B-Side Jams

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.

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.

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.

Parastichy

Sunflower florets spiral by 137.5° each, and the arms you see, the parastichies, always count up in Fibonacci numbers. Inspired by The Algorithmic Beauty of Plants.

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

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.

Staggered Reveal

Staggered Reveal

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

Origin Anchoring

Staggered Reveal

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

Dissolve reveal
  • Order
  • Share
  • Move
  • Review
  • Delete
Staggered Reveal
  • Order
  • Share
  • Move
  • Review
  • Delete
Not specified
Origin

Morphing Icons in a Toggle

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

© 2026 Gregory Bauwens