Experimenting
Practice reps before they ship
06
experimentsComponents, templates, and full pages I'm rebuilding to learn new animation and interaction techniques. Some original, some inspired by other builders.
Ripple Button
A button with a cursor-following ripple effect and animated hover text transitions.component
AnimatePresenceEnter & Exit AnimationsHover StatesTap Feedback
Statefull Button
A deploy button with morphing state transitions.Background wipes, spring-driven error shake, and success popcomponent
motion-sequencespring-shakelayout-animationmicro-interaction
Tilt Card Spotlight
Cursor-driven 3D tilt with a dynamic spotlight highlight.component
useMotionValueuseSpringuseTransformuseMotionTemplate
Pricing Card
A pricing card with gradient border on hover, billing type selector with scramble text animation and a dropdown with features includedcomponent
useMotionValueuseMotionTemplateanimate()Gradient Border
App store grid
A pricing card with gradient border on hover, billing type selector with scramble text animation and a dropdown with features includedcomponent
layoutIdShared layout animationAnimatePresencecreate()
Travel Card Drag
Draggable stacked cards with smooth reveal and hide animationcomponent
draguseTransformuseMotionValue