Radial Reveal

A pure-CSS radial transition: tap anywhere and the next screen reveals from your finger. Inspired by Rauno Freiberg's work on radial transitions.

Interactive Banner

View in browser

The first vibe-coded piece I shipped end-to-end, from Lovable to Cursor to GitHub to Vercel. Started as a cool interacting header for my portfolio home and became a physics playground for hover, press, edge, and bounce. Every setting is really a velocity, damping, or bounce knob in disguise.

An experiment in taking my design craft closer to prototyping interests I previously couldn't. I built and shipped this motion playground end to end, from Lovable and Cursor through GitHub and Vercel, to explore motion, physics, and code. Every control ultimately shapes velocity, damping, momentum, or bounce.

B-Side Jams

Sound on! Scratch the vinyl with no worries, swap needles and turn out the lights. Born from my daily design loops, spotifydesign.md and some elbow grease polish.

Low End

Thirty button sounds synthesized live in the browser, no audio files, every pitched hit tuned to the same five notes so pressing buttons in a row sounds like a beat instead of noise. Inspired by Material's sound design guidelines, which treat a product's sounds as instruments in one band.

Verlet Rope

A bit of real physics running in the browser: grab the weight and fling it, and the rope swings, stretches, and settles on its own. No keyframes, just point positions and the constraints between them. Inspired by Emily Campbell's pull-string lamp.

Shape Generator

A generative SVG pattern studio I built to explore AI-assisted coding and geometric shapes.

View in browser

View in browser

Feedback Weight

A press tuned from a light tick to a heavy thunk: real spring motion, a synthesized tick, and a matching mobile haptic, all dialed by one weight. Inspired by Apple's Human Interface Guidelines on haptics.

Morph Surface

A spring-driven shape morph between three surface states: a floating button, a card, and a sheet. Each transition runs on real physics, not a fixed duration. Inspired by Google's Material 3 Expressive.

Sound Family

Sound is making a come back in experience deisgn. Here is a family of four UI sounds: click, toggle, success, and error. Every one is generated live from oscillators and gain envelopes with no audio files, and a waveform draws across the canvas in time as the sound plays. Inspired by the open-source tiks library.

Dissolve reveal
  • Order
  • Share
  • Move
  • Review
  • Delete
Staggered Reveal
  • Order
  • Share
  • Move
  • Review
  • Delete

Staggered Reveal

Each list item delays by 60 ms. Your eye follows the cascade instead of taking in a wall of change.

Not specified
Origin

Origin Anchoring

Set transform-origin to the corner the element comes from so a menu visibly grows out of its trigger button.

Morphing Icons

An interaction study where every icon shares the same three SVG lines, so icons morph instead of swapping two icons.

Staggered Reveal

Each list item delays by 60 ms. Your eye follows the cascade instead of taking in a wall of change.

Dissolve reveal
  • Order
  • Share
  • Move
  • Review
  • Delete
Staggered Reveal
  • Order
  • Share
  • Move
  • Review
  • Delete

Origin Anchoring

Set transform-origin to the corner the element comes from so a menu visibly grows out of its trigger button.

Not specified
Origin

© 2026 Gregory Bauwens