Experimenting

Practice reps before they ship

12

experiments

Components, templates, and full pages I'm rebuilding to learn new animation and interaction techniques. Some original, some inspired by other builders.

All12Component12
Ripple Button
component
A button with a cursor-following ripple effect and animated hover text transitions.
AnimatePresenceEnter & Exit AnimationsHover StatesTap Feedback
Statefull Button
component
A deploy button with morphing state transitions.Background wipes, spring-driven error shake, and success pop
motion-sequencespring-shakelayout-animationmicro-interaction
Tilt Card Spotlight
component
Cursor-driven 3D tilt with a dynamic spotlight highlight.
useMotionValueuseSpringuseTransformuseMotionTemplate
Pricing Card
component
A pricing card with gradient border on hover, billing type selector with scramble text animation and a dropdown with features included
useMotionValueuseMotionTemplateanimate()Gradient Border
App store grid
component
An App Store–style expandable card grid powered by Motion
layoutIdShared layout animationAnimatePresencecreate()
Travel Card Drag
component
Draggable stacked cards with smooth reveal and hide animation
draguseTransformuseMotionValue
Swipe Action Card
component
iOS-style swipe actions with progressive delete expansion and hold-to-delete interaction.
draguseTransformuseAnimateuseMotionValueEvent
Multi Step Form
component
Direction-Aware Multi-Step Form
variantscustom propertiesAnimatePresenseuseReducedMotion
Floating Menu
component
A macOS style dock menu
useMotionValueuseTransformAnimatePresenseSVGAnimation
Split Button Interaction
component
An expandable split button with project options
AnimatePresenceuseReducedMotionlayout
Grok Bot
component
An expressive SVG character
useAnimateSVG ellipse morphing
Back Button Reveal
component
An expressive SVG character
AnimatePresenceSVG Gooey Filter