Loading...
Loading...
A unified animation system built on Framer Motion and CSS custom properties. Every curve, spring, and transition is a reusable token.
import { ease, spring, transition }from "@/lib/animations"
Timing Functions
Six easing curves race across the same distance. Click any lane to inspect its bezier curve.
Ease Out
Best for: entrances
cubic-bezier(0.16, 1, 0.3, 1)ease.outRhythm
Named tokens that control how long and how staggered motion feels. All durations fire together — watch the waterfall.
instantfastnormalmoderateslowdramaticReal-World
Production patterns powered by the animation tokens. Every demo below uses primitives you can drop into your own components.
useSpringAnimatePresencegesture.premiumFollows your cursor with spring physics
spring.bouncyspring.snappyOFF · spring.snappy
gesture.*Press
gesture.pressLift
gesture.liftGrow
gesture.growPremium
gesture.premiumHover and click each card to feel the preset
Spatial
Mouse-driven transforms that add spatial depth. Each pattern composites spring physics with CSS transforms for fluid, natural motion.
Spotlight Glow
Hover to move the light
useTransform → radial-gradient3D Perspective
Move your cursor to rotate
rotateX + rotateY + preserve-3dParallax Depth
3 layers · mouse-driven offsetPhysics
Seven spring presets compared side-by-side. Same destination, radically different character. Tune your own below.
tight400/30Micro-interactions
default200/24Balanced snap
gentle120/20Modals, panels
bouncy300/15Playful entrances
wobbly180/12Extreme overshoot
heavy80/20Weighty, slow
snappy500/40Quick settle
Choreography
Shared layout animations, accordion reveals, dynamic lists with smooth reflow, and content crossfades — all built on AnimatePresence.
layout + AnimatePresenceHigh-level metrics for your project. Charts, KPIs, and status indicators at a glance.
AnimatePresencemode='wait'layout + exitZero JavaScript
Pure keyframe animations from globals.css. No runtime cost, automatic reduced-motion support.
Opacity 0 → 1
animate-fade-inY + fade
animate-slide-up-Y + fade
animate-slide-down0.95 → 1 + fade
animate-scale-inElastic overshoot
animate-pop-inSkeleton sweep
animate-shimmerOpacity pulse
animate-pulse-soft3s rotation
animate-spin-slowRotation wiggle
animate-wiggleVertical bounce
animate-bounce-subtleReduced motion: All CSS animations are wrapped in @media (prefers-reduced-motion: reduce) — they automatically disable for users who prefer reduced motion.
Curves, springs, durations, gestures — production-ready and fully typed.
import { ease, spring, transition }from "@/lib/animations"