~/playground

Experiments in motion & interaction.

Small UI studies where the point is the feel: motion curves, cursor response, and tiny state changes.

spotlight

onmousemove

Radial gradient follows the cursor inside the tile.

oklch mixer

range -> color

Range input drives an OKLCH hue in real time.

elastic toggle

spring
Off

A compact toggle with spring physics and state feedback.

stepper

state
3

Tiny state changes, visible enough to feel responsive.

equalizer

@keyframes

Seven bars loop with staggered animation delays.

orbit

transform

Two periods, opposite direction, one compact orbit.

spring reorder

drag
  • Design tokens
  • Motion curves
  • Layout grids
  • Color systems
  • Typography scale

Drag rows to reorder them; the list resolves with springs.

tilt card

3d
INTERACTIVE
3D Tilt
Move your cursor across the card

A card tilts under the cursor with a moving glare layer.

wave text

hover
hovereach
letter

Hover individual letters and they jump with spring motion.

magnetic buttons

motion value

Buttons pull toward the cursor with a bit of parallax depth.

number ticker

framer motion
0
0
0

Digits roll in place with spring transitions.

text scramble

raf
Design Engineer

Characters resolve from noise into the next phrase.

state panel

tabs
24%

Draft

Loose idea. Enough shape to decide what deserves another pass.

Switch states and watch the panel update like a small app.