Animations
Showcase of reusable UI animations built with Next.js, CSS Modules, and Tailwind. Each demo uses a typed component with play and pause controls, highlighting accessibility, performance, and clean composition. Practical patterns ready to lift into real products.
Pulse Animation
Smooth rhythmic scaling effect that grows to one point two then returns, creating breathing feel suitable for badges, notifications, emphasis.
Glowing Pulse Animation
Outer glow pulses from subtle to bright, simulating energy or focus, perfect for active states, live indicators, loading accents visually.
Wiggle Animation
Playful tilt animation that rotates slightly left then right, drawing attention to icons, playful actions, errors, or draggable handles subtly.
Spin Animation
Continuous clockwise rotation at constant speed, ideal for loaders, refreshing indicators, progress visualization, or showcasing circular logos and elements smoothly.
Bounce Animation
Vertical hop with diminishing rebounds, conveying playful responsiveness, click feedback, or arrival, useful for buttons, badges, and notification pings animations.
Pounding Animation
Fast scale up then settle animation that pops into view, emphasizing new messages, alerts, or call to action elements that is urgent.
Heart Beat Animation
Organic two pulse rhythm mimicking a heartbeat, alternating strong and soft beats, great for health widgets, likes, and lively branding.
Shake-X Animation
Quick horizontal shake sequence signaling error or invalid action, attracting attention without delay, appropriate for forms, buttons, and alerts instantly.
Flip-Y Animation
Three dimensional card flip rotating around the vertical axis, revealing alternate sides, suitable for toggles, galleries, stats, and playful transitions.
Shimmer Animation
Animated highlight sweep across the surface, creating reflective sheen that suggests loading, skeleton placeholders, premium finishes, and interactive affordances effect.