Next Showcase

by Jakkrit Turner

Loading

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.

A

Pulse Animation

Smooth rhythmic scaling effect that grows to one point two then returns, creating breathing feel suitable for badges, notifications, emphasis.

A

Glowing Pulse Animation

Outer glow pulses from subtle to bright, simulating energy or focus, perfect for active states, live indicators, loading accents visually.

A

Wiggle Animation

Playful tilt animation that rotates slightly left then right, drawing attention to icons, playful actions, errors, or draggable handles subtly.

A

Spin Animation

Continuous clockwise rotation at constant speed, ideal for loaders, refreshing indicators, progress visualization, or showcasing circular logos and elements smoothly.

A

Bounce Animation

Vertical hop with diminishing rebounds, conveying playful responsiveness, click feedback, or arrival, useful for buttons, badges, and notification pings animations.

A

Pounding Animation

Fast scale up then settle animation that pops into view, emphasizing new messages, alerts, or call to action elements that is urgent.

A

Heart Beat Animation

Organic two pulse rhythm mimicking a heartbeat, alternating strong and soft beats, great for health widgets, likes, and lively branding.

A

Shake-X Animation

Quick horizontal shake sequence signaling error or invalid action, attracting attention without delay, appropriate for forms, buttons, and alerts instantly.

A

Flip-Y Animation

Three dimensional card flip rotating around the vertical axis, revealing alternate sides, suitable for toggles, galleries, stats, and playful transitions.

A

Shimmer Animation

Animated highlight sweep across the surface, creating reflective sheen that suggests loading, skeleton placeholders, premium finishes, and interactive affordances effect.

Next Showcase

by Jakkrit Turner