Spring physics, particle systems, generative art, and interactive playgrounds — all vanilla JS, all token-driven.
Explore 7 categoriesDamped harmonic oscillators bring natural, organic motion to UI elements. Press, drag, and tweak parameters in real time.
Click to compress with spring physics. Release bounces back with overshoot.
Click or tap the button
Linked elements connected by springs. The leader follows the cursor, trailing nodes follow with cascading delay.
Move mouse over the canvas
Adjust stiffness, damping, and mass to see how spring parameters affect motion. Click the canvas to set a new target position.
Toggle switches animated with a damped spring. The knob overshoots on click and settles with bounce — driven by springStep(), not CSS transitions.
Click any toggle to switch it
springStep() for physically grounded animation.
prefers-reduced-motion is active, all spring animations snap instantly to their targets. Every demo respects this preference.
Accordion panels with spring-animated height. Only one panel opens at a time — opening one springs the previous closed with bouncy overshoot.
Click a panel header to expand it
Object-pooled particle engines for confetti, fireworks, and token-colored bubbles. All running at 60fps with recycled particles.
Click to launch a burst of confetti with gravity, rotation, and air resistance. Particles are pooled and recycled.
Click the Fire button or the canvas
Multi-phase particles: a rocket launches up, then explodes into trailing sparks with color shifts.
Click anywhere on the canvas
Seven gently floating circles — one per color family — labeled with their names. Click a bubble to spring-scale it and emit micro-particles.
Click a bubble to pop it
First-Last-Invert-Play technique for smooth layout transitions. Elements animate from where they were to where they are.
FLIP-animated card reordering. Records positions, shuffles DOM, then animates from old positions to new.
Click Shuffle to see FLIP in action
A grid of color chips with filter buttons. Clicking a filter FLIP-animates matching cards into new positions while non-matching scale to zero.
Click a filter button
A vertical list with up/down arrows. Clicking swaps items with FLIP animation. Sort A-Z reorders all at once.
Click arrows or Sort A-Z
Drag with inertia, swipe-to-dismiss, elastic overscroll, magnetic buttons, spotlight effects, and spring-physics cursor trails.
Buttons that are attracted to your cursor when you hover nearby. The pull increases as you get closer.
Move cursor near the buttons
Cursor creates a radial spotlight in the card's accent color. The solid shadow shifts direction opposite the cursor — light source follows your mouse.
Move cursor over the cards
12 shrinking circles trail the cursor, each springing toward its predecessor with decreasing stiffness. Colors cycle through the full token palette.
Move mouse over the canvas
Drag cards with momentum. Release to see inertia carry the card forward, with spring-damped settling.
Drag the cards around
Swipe notification cards horizontally to dismiss. Past the threshold, the card flings off and remaining cards FLIP upward.
Drag a card left or right to dismiss
Horizontally scrollable strip with elastic overscroll. Drag past the edge for a rubber-band effect with spring snap-back and edge glow.
Drag horizontally, pull past the edge
Algorithmic visuals driven by noise, flow fields, and spring-physics wave propagation. Plus signature interactions: blur, depth, and color shifting.
Particles follow a Perlin noise flow field, creating organic, wind-like patterns colored by the token palette.
Watch the flow emerge
Animated mesh gradients using token colors to create shifting aurora/nebula effects. Soft, dreamy, organic.
Watch the colors shift
A grid of ~200 dots in token palette colors. Click to send a radial wave that displaces dots with spring settling. Auto-waves every 3 seconds.
Click anywhere for a wave
Pure CSS: hovering one card blurs and dims its siblings. Creates visual hierarchy through focus.
Mouse-tracked perspective rotation with spring interpolation. Shine overlay follows cursor position.
CSS @property hue cycling through all 6 accent families. Play/pause toggle.
Skeleton placeholders, page transitions, and staggered reveals — the patterns that make waiting feel purposeful.
Shimmer and pulse placeholder patterns. Toggle modes or load real content with staggered reveal.
Crossfade and slide transitions in a contained frame. Production use: CSS View Transitions API.
JS springStep() solver drives stagger — the physics complement to motion.html's CSS easing version.
Real design system components brought to life with spring physics. Toast notifications, badge counters, celebration moments, and drag-sortable lists.
Toast notifications that spring in from the right and auto-dismiss after 3 seconds. Remaining toasts FLIP upward when one is removed.
Click Send Toast to spawn notifications
Icon buttons with spring-animated badge counters. Badges pop into existence from scale(0) when going 0 to 1, and spring-pop on each increment.
Click icons to increment, Clear to reset
A spring-animated button that fires confetti on click. Combines the spring press effect with the particle cannon for a celebration moment.
Click Celebrate! for the full effect
Drag-sortable list combining springs, gestures, and FLIP. Grab a handle to lift (scale + shadow), drag to reorder, drop to spring-animate into place.
Grab the handle and drag to reorder