21st.dev + UI/UX Pro Max

30 Master Animation Presets

Complete gallery of 30 production-ready 21st.dev UI animations, micro-interactions, and visual shaders for CodeCurious. Click or hover on any component to trigger interactive animations.

01 // BORDER Conic Laser

Travelling Border Beam

Continuous high-voltage neon laser traveling around card perimeter with conic interpolation.

⚡ Active Laser Perimeter
02 // BORDER Gradient Flow

Flowing Rainbow Edge

Seamless continuous horizontal gradient wave wrapping around interactive buttons.

03 // BORDER Neon Pulse

Breathe Neon Glow

Harmonic oscillating neon drop shadow and dual-stage inset radiance.

🔥 HIGH PRIORITY STATUS
04 // BORDER HUD Reticle

Cyber Bracket Expansion

Sci-fi corner brackets that expand to full enclosing frame on hover.

[ SYSTEM ARCHITECTURE ]
05 // BORDER Dashed Loop

Dashed Electric Orbit

Animated dashed stroke border simulating high-speed data packet transfer.

☁️ AWS Multi-Tenant Mesh
06 // BORDER Glass Pill

Frosted Glass Inset

Subtle top-edge light reflection and translucent glass backdrop.

✨ 100% IP Code Ownership
07 // 3D PHYSICS Perspective Tilt

Magnetic 3D Perspective

Physics-based tilt rotation responding to real-time mouse coordinate vectors.

🎮 Hover & Tilt Me
08 // SPOTLIGHT Mouse Beam

Radial Cursor Spotlight

Dynamic luminous spotlight beam that illuminates the card under cursor movement.

Move Cursor Inside
09 // PARTICLES Meteors Stream

Shooting Stars / Meteors

Luminous meteors cascading at 45° angles with variable speeds and tail lengths.

10 // BUTTON Light Sweep

Luminous Shimmer CTA

Iridescent angled light sweep wave moving infinitely across primary action buttons.

11 // TYPOGRAPHY Text Shimmer

Metallic Text Shine

Silky chrome shine wave sweeping horizontally across headline text.

CodeCurious Scale
12 // TYPOGRAPHY Hacker Decrypt

Matrix Decrypt Effect

Cyberpunk terminal character shuffling on hover before resolving to plain text.

ZERO_DOWNTIME_DEPLOY
13 // 3D ASSETS Floating Sphere

Floating 3D Sphere

Glossy spherical surface with specular highlights and levitation physics.

14 // SHADER Aurora Gradient

Northern Lights Aurora

Multi-color fluid gradient mesh with dynamic smooth color blending.

Fluid Aurora Motion
15 // RETRO HUD CRT Scanline

CRT Terminal Scanline

Retro-futuristic monitor scanline beam moving vertically across display panels.

LIVE K8s POD #402
16 // MICRO-UI Spring Scale

Magnetic Spring Pill

Elastic spring-physics scale with luminous border bloom on hover.

⚡ Next.js 15 Fast Refresh
17 // MOTION Infinite Ticker

Continuous Marquee

Infinite smooth horizontal carousel for tech stacks, awards, and client logos.

⚛️ React 19 📱 Flutter ☁️ AWS SRE 🤖 OpenAI ⚛️ React 19 📱 Flutter ☁️ AWS SRE 🤖 OpenAI
18 // TOUCH FEEDBACK Material Ripple

Material Click Ripple

Origin-tracked radial ripple wave expanding outwards from click point.

19 // CYBER RGB Split

RGB Glitch Distortion

Cyberpunk chromatic aberration with rapid horizontal slice displacements.

CODECURIOUS
20 // STATUS Beacon Radar

Pulse Beacon Radar

Expanding concentric radar rings for live system status indicators.

21 // BADGE Violet Glow

Violet Neon Tag

Ambient luminous drop shadow with high-contrast violet typography.

💎 99.99% SLA Uptime
22 // CARD SHADOW Border Bloom

Border Bloom Elevation

Dual inner and outer electric cyan border bloom when hovered.

Hover To Elevate
23 // BUTTON Liquid Fill

Bottom-Up Liquid Fill

Smooth liquid volume filling button background on cursor hover.

24 // NAVIGATION Sliding Arrow

Accelerated Arrow Pill

Micro-animated SVG arrow translating rightward with spring elasticity.

Explore Services
25 // AUDIO / LIVE Equalizer

Audio Spectrum Equalizer

Dynamic multi-bar equalizer for live streaming, voice rooms, and AI agents.

26 // HUD Terminal Monospace

Holographic HUD Label

Monospace cyber tag with blinking terminal prompt indicator.

CLUSTER_NODE_01
27 // 3D LAYERS Z-Axis Depth

Z-Space Parallax Badge

Multi-layer 3D depth with floating chip projected along the Z axis.

PRO SCALE
28 // BENTO Modular Grid

Bento Grid Cell Highlight

Modular cell illumination and reactive border highlight on mouse enter.

⚡ Speed
🔒 Security
☁️ Scale
🤖 AI Core
29 // CODE UI Syntax Glow

Neon Code Snippet Box

Glowing syntax block with subtle cyan terminal reflection.

const app = await deploy();
30 // DOCK macOS Dock

Interactive Floating Dock

macOS-style spring magnification on hover with translucent glass bar.

🌐
📱
⚙️
🎨
☁️