Design · Build with AI

Daily UI Interactions

A daily practice of unique interactions, micro-interactions, and animation — built with the latest Claude models. One small, finishable thing at a time.

Day 21

Folding Receipt

A printed receipt hangs from a slot and accordion-folds as a traveling wave — each crease follows the one above it, so the fold cascades top-to-bottom with the between-panel shadow deepening at every seam. Pull the grip to fold by hand or tap to cascade; the camera leans in to reveal the zigzag. Drag the coupon sideways past the perforation to tear it off along a jagged edge, with a synth paper-rip and a two-tone ding.

CSS 3D foldTraveling-wave springsTear-off perforation
Day 20

Scatter Stack

A pile of photo cards on graph paper that springs between two states — shuffle (tossed on a table) and organize (a neat aligned grid) — with a staggered cascade. A live DialKit-style panel drives rotation range, offset, spread, shadow blur / opacity / Y, and card count in real time. Reshuffle to re-toss; flip the table to dark.

Organize ↔ shuffleLive controlsSpring choreography
Day 19

Magnetic Dock

A macOS-style dock where icons magnify on a smooth cursor-distance falloff, neighbors rise in sympathy, and clicking an app launches it with an anticipation squash and a GSAP bounce-out hop. Tooltips pop above the hovered icon; a running dot lights up on launch.

GSAP bounceCursor magnificationSpring falloff
Day 18

Toast Choreography

A Sonner-style notification stack that stays polite under abuse: interruptible springs re-sort the pile mid-flight, swipe right to dismiss with momentum (wrong way rubber-bands), hover to fan the stack out, and a spam button to prove it never gets flustered.

Interruptible springsSwipe to dismissProduct-UI restraint
Day 17

Type Lens

Kinetic variable-font typography: your cursor is a gravity lens that gives letters real mass — weight and width axes spring-animate per letter with inertia and overshoot. Click for a shockwave that ripples mass through the headline; idle, and a slow wave breathes through the type.

Variable font axesPer-letter springsShockwave
Day 16

Memory Lane Timeline

An editorial photo-timeline slider: drag the polaroid cluster or scrub the filmstrip, which always re-centres the active frame. Fling physics, peeking neighbours, cursor parallax on the photos, and hand-drawn notes that draw themselves in.

Drag + flingFilmstrip scrubberParallax
Day 15

Vintage Turntable

An old-school record player you can actually run: the vinyl spins, the tonearm drops, a VU meter dances. Play, pause, stop, and skip a warm generative lo-fi loop with real vinyl crackle — plus an Open-in-Spotify link.

Web AudioCSS turntableTransport controls
Day 14

Candy Jar — Physics

A tactile Matter.js sandbox: colorful shapes fall and pile with real rigid-body physics. Drag to fling them, shake to jumble the pile, drop more — and every collision plinks a note scaled to impact.

Matter.jsRigid-body physicsDrag + collide
Day 13

Raymarched Metaball

A 3D blob from pure shader math: metaball SDFs blended with a smooth-minimum, raymarched per pixel with SDF-gradient normals for lighting. It auto-rotates, glows, and bulges toward your cursor — an iridescent soap-bubble surface.

WebGLRaymarchingSDF
Day 12

Holographic Achievement

A myMind-style card: drops in with a playful bounce, shimmers as you tilt its holographic foil, then click to flip it (rotateY) and reveal the gold award on the back — with a confetti burst.

CSS 3D flipHolographic foilConfetti
Day 11

Grow — Scroll Story

A pinned, scroll-driven story with GSAP ScrollTrigger: scroll to grow a plant from seed to bloom across four beats — the sky shifts night→golden, the stem draws, leaves unfurl, and it snaps between beats with a progress rail.

GSAPScrollTriggerPin · scrub · snap
Day 10

Cloth in the Wind

A real-time Verlet cloth simulation in Three.js: a banner pinned at the top billows in traveling wind, drapes under gravity, and dents when you push it with your cursor — lit so every fold catches the light.

Three.jsVerlet physicsWebGL
Day 09

Liquid Light

A raw GLSL fragment shader: a domain-warped fBm noise field mapped to an iridescent palette, flowing on the GPU and warping into a glowing swirl around your cursor.

WebGLGLSLFragment shader
Day 08

Achievement Unlocked

A myMind-style reward moment choreographed in GSAP: a light-ray sunburst, a medal that 3D-pops in with a gloss sweep, a confetti burst, and staggered text — then a gentle idle float and shimmer.

GSAP3D transformCanvas confetti
Day 07

Morning Brew

A coffee brew choreographed on a single GSAP timeline: the cup fills, steam rises, and a checkmark pops — each step precisely offset, with pour and ding audio.

GSAPTimelineWeb Audio
Day 06

Interactive Zipper

A Flashbacks-style onboarding zipper: drag the pull down and the teeth split into a widening V to reveal the screen behind, with a per-tooth zip sound. Pull all the way and the halves slide off.

Parametric SVGSpring dragWeb Audio
Day 05

Scratch to Reveal

A Google Pay–style scratch card: drag to erase the foil with canvas destination-out, sparkles trailing your cursor, then a confetti burst and reward chime once you've cleared enough.

Canvas 2DParticlesWeb Audio
Day 04

Proximity Drawer

An empty-state illustration — a hand-built isometric filing cabinet whose drawer slides open as your cursor approaches, with a rolling slide sound and a wooden clunk when it bottoms out.

SVG isometricProximityWeb Audio
Day 03

Expanding Cards

A destinations grid where a card morph-expands into a full detail view and back, using Framer Motion's shared-layout (layoutId + AnimatePresence). No FLIP math — the library tweens between the two layouts.

ReactFramer MotionlayoutId
Day 02

Drag-to-Reorder List

An "Up Next" playlist where dragging a track makes the others spring out of the way. Framer Motion's Reorder — drag handle, lift-on-grab, and a soft blip on every swap.

ReactFramer MotionReorder
Day 01

Adaptive Slider

A $0–$1,500 amount picker with an odometer number that motion-blurs as it rolls, value-driven color, haptic-style ticks, and a magical theme reveal.

SVG filtersWeb AudioView Transitions
Warm-up

Liquid Toggle

A gooey switch you can drag and fling, with throw physics and a fully synthesized water-drop pop. Two springs plus an SVG goo filter make the thumb melt and merge.

Goo filterSpring physicsWeb Audio