Micro-interactions, kinetic typography, loading states, and living interfaces.
Card Hover Effects
Scale Up
Scales to 105%
Lift Up
Floats upward
Glow
Soft pink glow
Border Shift
Color morphs
Four cards with scale, lift, glow, and border-shift hover transitions.
| 1 | <div "color:#79c0ff">className="grid grid-cols-2 gap-4 sm:grid-cols-4"> |
| 2 | <div "color:#79c0ff">className="cursor-pointer rounded-2xl border border-slate-700 bg-slate-800 p-5 transition-all duration-300 hover:scale-105 hover:border-violet-500/50 hover:shadow-xl hover:shadow-violet-500/10"> |
| 3 | <div "color:#79c0ff">className="mb-2 text-2xl">🚀</div> |
| 4 | <p "color:#79c0ff">className="font-semibold text-white">Scale Up</p> |
| 5 | <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Scales to 105%</p> |
| 6 | </div> |
| 7 | <div "color:#79c0ff">className="cursor-pointer rounded-2xl border border-slate-700 bg-slate-800 p-5 transition-all duration-300 hover:-translate-y-2 hover:border-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/10"> |
| 8 | <div "color:#79c0ff">className="mb-2 text-2xl">✨</div> |
| 9 | <p "color:#79c0ff">className="font-semibold text-white">Lift Up</p> |
| 10 | <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Floats upward</p> |
| 11 | </div> |
| 12 | <div "color:#79c0ff">className="cursor-pointer rounded-2xl border border-slate-700 bg-slate-800 p-5 transition-all duration-300 hover:border-pink-500/50 hover:shadow-[0_0_30px_rgba(236,72,153,0.2)]"> |
| 13 | <div "color:#79c0ff">className="mb-2 text-2xl">💫</div> |
| 14 | <p "color:#79c0ff">className="font-semibold text-white">Glow</p> |
| 15 | <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Soft pink glow</p> |
| 16 | </div> |
| 17 | <div "color:#79c0ff">className="group cursor-pointer rounded-2xl border-2 border-slate-700 bg-slate-800 p-5 transition-all duration-500 hover:border-emerald-500"> |
| 18 | <div "color:#79c0ff">className="mb-2 text-2xl">🌿</div> |
| 19 | <p "color:#79c0ff">className="font-semibold text-white transition-colors duration-300 group-hover:text-emerald-400">Border Shift</p> |
| 20 | <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Color morphs</p> |
| 21 | </div> |
| 22 | </div> |
Button Hover Animations
Slide-fill background, icon slide, underline grow, and shimmer sweep on hover.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | {/* Slide fill */} |
| 3 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-xl border border-violet-500 px-6 py-3 font-semibold text-violet-400 transition-colors duration-300 hover:text-white"> |
| 4 | <span "color:#79c0ff">className="absolute inset-0 -translate-x-full bg-violet-600 transition-transform duration-300 group-hover:translate-x-0" /> |
| 5 | <span "color:#79c0ff">className="relative">Slide Fill</span> |
| 6 | </button> |
| 7 | {/* Icon slide */} |
| 8 | <button "color:#79c0ff">className="group flex items-center gap-2 rounded-xl bg-slate-800 px-6 py-3 font-semibold text-white transition-all duration-300 hover:bg-cyan-600"> |
| 9 | <span>Launch</span> |
| 10 | <span "color:#79c0ff">className="transition-transform duration-300 group-hover:translate-x-1">→</span> |
| 11 | </button> |
| 12 | {/* Underline grow */} |
| 13 | <button "color:#79c0ff">className="group relative px-2 py-3 font-semibold text-white"> |
| 14 | Underline |
| 15 | <span "color:#79c0ff">className="absolute bottom-2 left-0 h-0.5 w-0 bg-pink-500 transition-all duration-300 group-hover:w-full" /> |
| 16 | </button> |
| 17 | {/* Shimmer sweep */} |
| 18 | <button "color:#79c0ff">className="relative overflow-hidden rounded-xl bg-slate-700 px-6 py-3 font-semibold text-white"> |
| 19 | <span "color:#79c0ff">className="relative z-10">Shimmer</span> |
| 20 | <span "color:#79c0ff">className="absolute inset-0 animate-[shimmer_2s_linear_infinite] bg-gradient-to-r from-transparent via-white/15 to-transparent bg-[length:200%_100%]" /> |
| 21 | </button> |
| 22 | </div> |
Image Hover Overlays
Caption slides up
Three colored panels with fade overlay, zoom+overlay, and slide-up caption.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | {/* Fade overlay */} |
| 3 | <div "color:#79c0ff">className="group relative h-36 w-36 cursor-pointer overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-700"> |
| 4 | <div "color:#79c0ff">className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100"> |
| 5 | <span "color:#79c0ff">className="text-sm font-bold text-white">View</span> |
| 6 | </div> |
| 7 | </div> |
| 8 | {/* Zoom + overlay */} |
| 9 | <div "color:#79c0ff">className="group relative h-36 w-36 cursor-pointer overflow-hidden rounded-2xl"> |
| 10 | <div "color:#79c0ff">className="h-full w-full bg-gradient-to-br from-pink-500 to-rose-600 transition-transform duration-500 group-hover:scale-110" /> |
| 11 | <div "color:#79c0ff">className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"> |
| 12 | <span "color:#79c0ff">className="text-sm font-bold text-white">Zoom</span> |
| 13 | </div> |
| 14 | </div> |
| 15 | {/* Slide-up caption */} |
| 16 | <div "color:#79c0ff">className="group relative h-36 w-36 cursor-pointer overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600"> |
| 17 | <div "color:#79c0ff">className="absolute bottom-0 left-0 right-0 translate-y-full bg-black/70 p-3 transition-transform duration-300 group-hover:translate-y-0"> |
| 18 | <p "color:#79c0ff">className="text-xs font-semibold text-white">Caption slides up</p> |
| 19 | </div> |
| 20 | </div> |
| 21 | </div> |
Text Hover Effects
Links with animated underline, letter-spacing expand, gradient reveal, and strikethrough.
| 1 | <div "color:#79c0ff">className="space-y-5"> |
| 2 | {/* Underline from left */} |
| 3 | <a "color:#79c0ff">className="group relative inline-block cursor-pointer text-xl font-bold text-white"> |
| 4 | Underline from Left |
| 5 | <span "color:#79c0ff">className="absolute bottom-0 left-0 h-0.5 w-0 bg-violet-500 transition-all duration-300 group-hover:w-full" /> |
| 6 | </a> |
| 7 | {/* Letter-spacing expand */} |
| 8 | <p "color:#79c0ff">className="cursor-pointer text-xl font-bold text-cyan-400 transition-all duration-300 hover:tracking-widest"> |
| 9 | Spacing Expand |
| 10 | </p> |
| 11 | {/* Gradient reveal */} |
| 12 | <p "color:#79c0ff">className="cursor-pointer text-xl font-bold text-slate-400 transition-colors duration-300 hover:bg-gradient-to-r hover:from-pink-400 hover:via-fuchsia-400 hover:to-violet-400 hover:bg-clip-text hover:text-transparent"> |
| 13 | Gradient Reveal |
| 14 | </p> |
| 15 | {/* Strikethrough animate */} |
| 16 | <p "color:#79c0ff">className="group relative inline-block cursor-pointer text-xl font-bold text-slate-300"> |
| 17 | Strikethrough |
| 18 | <span "color:#79c0ff">className="absolute left-0 top-1/2 h-0.5 w-0 bg-rose-500 transition-all duration-500 group-hover:w-full" /> |
| 19 | </p> |
| 20 | </div> |
Icon Hover Animations
Six icon buttons: rotate, bounce, scale+color, flip, shake, and pulse ring.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | {/* Rotate */} |
| 3 | <button "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/20 text-2xl transition-transform duration-300 hover:rotate-45">⚙️</button> |
| 4 | {/* Bounce */} |
| 5 | <button "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-500/20 text-2xl transition-transform duration-300 hover:animate-bounce">🔔</button> |
| 6 | {/* Scale + color */} |
| 7 | <button "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-700 text-2xl transition-all duration-300 hover:scale-125 hover:bg-pink-500/30">❤️</button> |
| 8 | {/* Flip 180deg */} |
| 9 | <button "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/20 text-2xl transition-transform duration-500 hover:[transform:rotateY(180deg)]">🔄</button> |
| 10 | {/* Shake */} |
| 11 | <button "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/20 text-2xl hover:animate-[wiggle_0.4s_ease-in-out]">⚡</button> |
| 12 | {/* Pulse ring */} |
| 13 | <button "color:#79c0ff">className="relative flex h-12 w-12 items-center justify-center rounded-xl bg-fuchsia-500/20 text-2xl"> |
| 14 | 🌟 |
| 15 | <span "color:#79c0ff">className="absolute inset-0 rounded-xl ring-2 ring-fuchsia-400 ring-offset-2 ring-offset-slate-900 opacity-0 transition-opacity duration-300 hover:opacity-100 hover:animate-ping" /> |
| 16 | </button> |
| 17 | </div> |
Loading Spinners
Spinner
Dots
Bars
Orbital
Border spinner, staggered dots, equalizer bars, and dual orbital rings.
| 1 | <div "color:#79c0ff">className="flex flex-wrap items-end gap-10"> |
| 2 | {/* Border spinner */} |
| 3 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 4 | <div "color:#79c0ff">className="h-10 w-10 animate-spin rounded-full border-4 border-violet-500/30 border-t-violet-500" /> |
| 5 | <p "color:#79c0ff">className="text-xs text-slate-500">Spinner</p> |
| 6 | </div> |
| 7 | {/* Staggered dots */} |
| 8 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 9 | <div "color:#79c0ff">className="flex items-end gap-1.5"> |
| 10 | {[0,1,2].map(i => ( |
| 11 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="h-3 w-3 animate-bounce rounded-full bg-cyan-500" |
| 12 | "color:#79c0ff">style={{ animationDelay: `${i * 0.15}s` }} /> |
| 13 | ))} |
| 14 | </div> |
| 15 | <p "color:#79c0ff">className="text-xs text-slate-500">Dots</p> |
| 16 | </div> |
| 17 | {/* Equalizer bars */} |
| 18 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 19 | <div "color:#79c0ff">className="flex items-end gap-1"> |
| 20 | {[20,32,24,36,20].map((h,i) => ( |
| 21 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="w-2 animate-[bounce_1s_ease-in-out_infinite] rounded-sm bg-pink-500" |
| 22 | "color:#79c0ff">style={{ height: h, animationDelay: `${i * 0.1}s` }} /> |
| 23 | ))} |
| 24 | </div> |
| 25 | <p "color:#79c0ff">className="text-xs text-slate-500">Bars</p> |
| 26 | </div> |
| 27 | {/* Orbital rings */} |
| 28 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 29 | <div "color:#79c0ff">className="relative h-10 w-10"> |
| 30 | <div "color:#79c0ff">className="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-violet-500" /> |
| 31 | <div "color:#79c0ff">className="absolute inset-1 animate-[spin_1.5s_linear_infinite_reverse] rounded-full border-4 border-transparent border-t-fuchsia-400" /> |
| 32 | </div> |
| 33 | <p "color:#79c0ff">className="text-xs text-slate-500">Orbital</p> |
| 34 | </div> |
| 35 | </div> |
Pulse Loaders
Gradient pulse card, staggered pulsing dots, breathing circle, and heartbeat pulse.
| 1 | <div "color:#79c0ff">className="flex flex-wrap items-center gap-8"> |
| 2 | {/* Gradient pulse card */} |
| 3 | <div "color:#79c0ff">className="h-20 w-36 animate-pulse rounded-2xl bg-gradient-to-r from-violet-900 via-slate-800 to-violet-900" /> |
| 4 | {/* Staggered pulsing dots */} |
| 5 | <div "color:#79c0ff">className="flex gap-2"> |
| 6 | {[0,1,2,3].map(i => ( |
| 7 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="h-4 w-4 animate-pulse rounded-full bg-cyan-500" |
| 8 | "color:#79c0ff">style={{ animationDelay: `${i * 0.2}s` }} /> |
| 9 | ))} |
| 10 | </div> |
| 11 | {/* Breathing circle */} |
| 12 | <div "color:#79c0ff">className="relative flex h-16 w-16 items-center justify-center"> |
| 13 | <div "color:#79c0ff">className="absolute h-full w-full animate-ping rounded-full bg-emerald-500/20" /> |
| 14 | <div "color:#79c0ff">className="absolute h-10 w-10 animate-pulse rounded-full bg-emerald-500/40" /> |
| 15 | <div "color:#79c0ff">className="h-6 w-6 rounded-full bg-emerald-500" /> |
| 16 | </div> |
| 17 | {/* Heartbeat */} |
| 18 | <div "color:#79c0ff">className="flex items-center gap-1"> |
| 19 | {[4, 8, 14, 8, 4, 10, 4].map((h, i) => ( |
| 20 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="w-1.5 animate-[bounce_0.8s_ease-in-out_infinite] rounded-full bg-rose-500" |
| 21 | "color:#79c0ff">style={{ height: h * 2, animationDelay: `${i * 0.08}s` }} /> |
| 22 | ))} |
| 23 | </div> |
| 24 | </div> |
Progress Indicators
Syncing data
Please wait…
Animated progress bar, step indicator, SVG circular ring, and striped progress.
| 1 | <div "color:#79c0ff">className="w-full max-w-sm space-y-6"> |
| 2 | {/* Animated progress bar */} |
| 3 | <div> |
| 4 | <div "color:#79c0ff">className="mb-1 flex justify-between text-xs text-slate-400"><span>Uploading…</span><span>72%</span></div> |
| 5 | <div "color:#79c0ff">className="h-2 rounded-full bg-slate-800"> |
| 6 | <div "color:#79c0ff">className="h-2 w-[72%] animate-[shimmer_2s_linear_infinite] rounded-full bg-gradient-to-r from-violet-500 via-fuchsia-400 to-violet-500 bg-[length:200%_100%]" /> |
| 7 | </div> |
| 8 | </div> |
| 9 | {/* Step indicator */} |
| 10 | <div "color:#79c0ff">className="flex items-center gap-2"> |
| 11 | {["Done","Active","Wait"].map((s,i) => ( |
| 12 | <div "color:#79c0ff">key={s} "color:#79c0ff">className="flex items-center gap-2"> |
| 13 | <div "color:#79c0ff">className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold ${i===0?"bg-emerald-500 text-white":i===1?"bg-violet-500 text-white animate-pulse":"bg-slate-700 text-slate-400"}`}>{i+1}</div> |
| 14 | <span "color:#79c0ff">className={`text-xs ${i<2?"text-white":"text-slate-500"}`}>{s}</span> |
| 15 | {i<2&&<div "color:#79c0ff">className={`h-px w-6 ${i===0?"bg-emerald-500":"bg-slate-700"}`}/>} |
| 16 | </div> |
| 17 | ))} |
| 18 | </div> |
| 19 | {/* Circular SVG ring */} |
| 20 | <div "color:#79c0ff">className="flex items-center gap-4"> |
| 21 | <svg "color:#79c0ff">className="-rotate-90" width="56" height="56" viewBox="0 0 56 56"> |
| 22 | <circle cx="28" cy="28" r="22" fill="none" stroke="#1e293b" strokeWidth="5"/> |
| 23 | <circle cx="28" cy="28" r="22" fill="none" stroke="#a78bfa" strokeWidth="5" |
| 24 | strokeLinecap="round" strokeDasharray="100 138" "color:#79c0ff">className="animate-[spin_3s_linear_infinite]" |
| 25 | "color:#79c0ff">style={{ transformOrigin: "center" }}/> |
| 26 | </svg> |
| 27 | <div><p "color:#79c0ff">className="text-sm font-semibold text-white">Syncing data</p><p "color:#79c0ff">className="text-xs text-slate-500">Please wait…</p></div> |
| 28 | </div> |
| 29 | {/* Striped progress */} |
| 30 | <div "color:#79c0ff">className="h-4 overflow-hidden rounded-full bg-slate-800"> |
| 31 | <div "color:#79c0ff">className="h-4 w-3/5 animate-[shimmer_1s_linear_infinite] bg-[repeating-linear-gradient(45deg,#7c3aed_0,#7c3aed_10px,#6d28d9_10px,#6d28d9_20px)] bg-[length:40px_100%]" /> |
| 32 | </div> |
| 33 | </div> |
Skeleton Screens
Blog post skeleton, card skeleton, and table row skeleton with pulse animation.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-6"> |
| 2 | {/* Blog skeleton */} |
| 3 | <div "color:#79c0ff">className="w-64 space-y-3 rounded-2xl border border-slate-800 bg-slate-900 p-5"> |
| 4 | <div "color:#79c0ff">className="h-32 animate-pulse rounded-xl bg-slate-800" /> |
| 5 | <div "color:#79c0ff">className="h-3 w-3/4 animate-pulse rounded bg-slate-800" /> |
| 6 | <div "color:#79c0ff">className="h-3 animate-pulse rounded bg-slate-800" /> |
| 7 | <div "color:#79c0ff">className="h-3 w-5/6 animate-pulse rounded bg-slate-800" /> |
| 8 | <div "color:#79c0ff">className="flex items-center gap-2 pt-1"> |
| 9 | <div "color:#79c0ff">className="h-6 w-6 animate-pulse rounded-full bg-slate-800" /> |
| 10 | <div "color:#79c0ff">className="h-2 w-20 animate-pulse rounded bg-slate-800" /> |
| 11 | </div> |
| 12 | </div> |
| 13 | {/* Card skeleton */} |
| 14 | <div "color:#79c0ff">className="w-44 space-y-3 rounded-2xl border border-slate-800 bg-slate-900 p-4"> |
| 15 | <div "color:#79c0ff">className="h-24 animate-pulse rounded-xl bg-slate-800" /> |
| 16 | <div "color:#79c0ff">className="h-3 w-2/3 animate-pulse rounded bg-slate-800" /> |
| 17 | <div "color:#79c0ff">className="h-2 animate-pulse rounded bg-slate-800" /> |
| 18 | <div "color:#79c0ff">className="h-2 w-4/5 animate-pulse rounded bg-slate-800" /> |
| 19 | <div "color:#79c0ff">className="h-7 animate-pulse rounded-lg bg-slate-800" /> |
| 20 | </div> |
| 21 | {/* Table rows */} |
| 22 | <div "color:#79c0ff">className="w-64 space-y-2 rounded-2xl border border-slate-800 bg-slate-900 p-4"> |
| 23 | {[1,2,3].map(i => ( |
| 24 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="flex items-center gap-3"> |
| 25 | <div "color:#79c0ff">className="h-8 w-8 animate-pulse rounded-full bg-slate-800" /> |
| 26 | <div "color:#79c0ff">className="flex-1 space-y-1"> |
| 27 | <div "color:#79c0ff">className="h-2 w-3/4 animate-pulse rounded bg-slate-800" /> |
| 28 | <div "color:#79c0ff">className="h-2 w-1/2 animate-pulse rounded bg-slate-800" /> |
| 29 | </div> |
| 30 | <div "color:#79c0ff">className="h-2 w-10 animate-pulse rounded bg-slate-800" /> |
| 31 | </div> |
| 32 | ))} |
| 33 | </div> |
| 34 | </div> |
Slide In Animations
Four labeled boxes sliding in from top, right, bottom, and left.
| 1 | <div "color:#79c0ff">className="grid grid-cols-2 gap-4"> |
| 2 | <div "color:#79c0ff">className="animate-[slide-up_0.6s_ease-out_both] rounded-xl bg-violet-600/20 border border-violet-500/30 p-4 text-center text-sm font-semibold text-violet-300">↑ From Top</div> |
| 3 | <div "color:#79c0ff">className="animate-[slide-in-right_0.6s_ease-out_both] rounded-xl bg-cyan-600/20 border border-cyan-500/30 p-4 text-center text-sm font-semibold text-cyan-300">← From Right</div> |
| 4 | <div "color:#79c0ff">className="animate-[slide-up_0.6s_ease-out_0.1s_both] [animation-direction:reverse] rounded-xl bg-pink-600/20 border border-pink-500/30 p-4 text-center text-sm font-semibold text-pink-300">↓ From Bottom</div> |
| 5 | <div "color:#79c0ff">className="animate-[slide-in-right_0.6s_ease-out_0.15s_both] [animation-direction:reverse] rounded-xl bg-emerald-600/20 border border-emerald-500/30 p-4 text-center text-sm font-semibold text-emerald-300">→ From Left</div> |
| 6 | </div> |
Fade In Animations
Four boxes fading in with staggered delays (0s / 0.1s / 0.2s / 0.3s).
| 1 | <div "color:#79c0ff">className="grid grid-cols-2 gap-4 sm:grid-cols-4"> |
| 2 | {[ |
| 3 | { delay:"0s", color:"bg-violet-600/30 border-violet-500/30 text-violet-300", label:"0s delay" }, |
| 4 | { delay:"0.1s", color:"bg-cyan-600/30 border-cyan-500/30 text-cyan-300", label:"0.1s" }, |
| 5 | { delay:"0.2s", color:"bg-pink-600/30 border-pink-500/30 text-pink-300", label:"0.2s" }, |
| 6 | { delay:"0.3s", color:"bg-amber-600/30 border-amber-500/30 text-amber-300", label:"0.3s" }, |
| 7 | ].map(b => ( |
| 8 | <div "color:#79c0ff">key={b.delay} |
| 9 | "color:#79c0ff">className={`animate-[slide-up_0.6s_ease-out_both] rounded-xl border p-5 text-center text-sm font-semibold ${b.color}`} |
| 10 | "color:#79c0ff">style={{ animationDelay: b.delay }}> |
| 11 | {b.label} |
| 12 | </div> |
| 13 | ))} |
| 14 | </div> |
Scale In Animations
Cards scaling from 0 to 1 with staggered spring-like pop-in effect.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | {[ |
| 3 | { bg:"bg-violet-600", delay:"0s", label:"Pop 1" }, |
| 4 | { bg:"bg-fuchsia-600", delay:"0.1s", label:"Pop 2" }, |
| 5 | { bg:"bg-pink-600", delay:"0.2s", label:"Pop 3" }, |
| 6 | { bg:"bg-rose-600", delay:"0.3s", label:"Pop 4" }, |
| 7 | ].map(c => ( |
| 8 | <div "color:#79c0ff">key={c.label} |
| 9 | "color:#79c0ff">className={`flex h-20 w-20 animate-[slide-up_0.5s_cubic-bezier(0.34,1.56,0.64,1)_both] items-center justify-center rounded-2xl ${c.bg} font-bold text-white`} |
| 10 | "color:#79c0ff">style={{ animationDelay: c.delay }}> |
| 11 | {c.label} |
| 12 | </div> |
| 13 | ))} |
| 14 | </div> |
Color Transitions
Boxes and text that smoothly transition background, text, and border colors on hover.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | {/* BG gradient shift */} |
| 3 | <div "color:#79c0ff">className="h-20 w-32 cursor-pointer rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 transition-all duration-700 hover:from-pink-500 hover:to-rose-600 flex items-center justify-center text-xs font-bold text-white">BG Gradient</div> |
| 4 | {/* Text color */} |
| 5 | <div "color:#79c0ff">className="flex h-20 w-32 cursor-pointer items-center justify-center rounded-2xl border border-slate-700 bg-slate-800 text-sm font-bold text-slate-400 transition-colors duration-500 hover:text-cyan-400">Text Color</div> |
| 6 | {/* Border morph */} |
| 7 | <div "color:#79c0ff">className="flex h-20 w-32 cursor-pointer items-center justify-center rounded-2xl border-2 border-slate-600 bg-slate-900 text-xs font-bold text-white transition-all duration-500 hover:border-fuchsia-500 hover:shadow-[0_0_20px_rgba(217,70,239,0.3)]">Border Glow</div> |
| 8 | {/* Full transition */} |
| 9 | <div "color:#79c0ff">className="flex h-20 w-32 cursor-pointer items-center justify-center rounded-2xl bg-slate-800 text-xs font-bold text-slate-400 transition-all duration-500 hover:-translate-y-1 hover:bg-emerald-600 hover:text-white hover:shadow-lg hover:shadow-emerald-500/30">All Props</div> |
| 10 | </div> |
Layout Transitions
This content collapses and expands with a smooth height transition. Click the button above to toggle.
Expandable panel and collapsible content with smooth height and opacity transitions.
| 1 | // Requires useState for expand toggle |
| 2 | const [open, setOpen] = useState(false); |
| 3 | return ( |
| 4 | <div "color:#79c0ff">className="w-full max-w-sm space-y-4"> |
| 5 | {/* Expandable panel */} |
| 6 | <div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-900 overflow-hidden"> |
| 7 | <button "color:#79c0ff">onClick={() => setOpen(!open)} |
| 8 | "color:#79c0ff">className="flex w-full items-center justify-between px-5 py-4 text-sm font-semibold text-white transition hover:bg-slate-800"> |
| 9 | Show more details |
| 10 | <span "color:#79c0ff">className={`transition-transform duration-300 ${open ? "rotate-180" : ""}`}>▼</span> |
| 11 | </button> |
| 12 | <div "color:#79c0ff">className={`transition-all duration-500 ease-in-out overflow-hidden ${open ? "max-h-40 opacity-100" : "max-h-0 opacity-0"}`}> |
| 13 | <div "color:#79c0ff">className="space-y-2 px-5 pb-5"> |
| 14 | {["Detail A","Detail B","Detail C"].map(d => ( |
| 15 | <div "color:#79c0ff">key={d} "color:#79c0ff">className="h-8 rounded-lg bg-slate-800 flex items-center px-3 text-xs text-slate-400">{d}</div> |
| 16 | ))} |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
| 21 | ); |
Success Animations
Checkmark
Confetti
Thumbs Up
SVG checkmark stroke animation, scattered confetti pings, and thumbs up bounce.
| 1 | <div "color:#79c0ff">className="flex flex-wrap items-center gap-10"> |
| 2 | {/* SVG checkmark */} |
| 3 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 4 | <div "color:#79c0ff">className="relative flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/20"> |
| 5 | <svg "color:#79c0ff">className="h-10 w-10" viewBox="0 0 40 40" fill="none"> |
| 6 | <circle cx="20" cy="20" r="18" stroke="#10b981" strokeWidth="2.5" /> |
| 7 | <path d="M12 20l6 6 10-12" stroke="#10b981" strokeWidth="2.5" strokeLinecap="round" |
| 8 | strokeLinejoin="round" strokeDasharray="30" strokeDashoffset="0" |
| 9 | "color:#79c0ff">className="animate-[dash_0.5s_ease-out_both]" /> |
| 10 | </svg> |
| 11 | </div> |
| 12 | <p "color:#79c0ff">className="text-xs text-emerald-400 font-semibold">Checkmark</p> |
| 13 | </div> |
| 14 | {/* Confetti ping */} |
| 15 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 16 | <div "color:#79c0ff">className="relative h-16 w-16"> |
| 17 | {["top-0 left-2 bg-violet-500","top-2 right-0 bg-pink-500","bottom-0 left-4 bg-cyan-500", |
| 18 | "bottom-2 right-2 bg-amber-500","top-4 left-0 bg-emerald-500"].map((cls,i) => ( |
| 19 | <span "color:#79c0ff">key={i} "color:#79c0ff">className={`absolute h-3 w-3 rounded-full animate-ping ${cls}`} |
| 20 | "color:#79c0ff">style={{ animationDelay: `${i*0.15}s`, animationDuration:"1.5s" }} /> |
| 21 | ))} |
| 22 | <div "color:#79c0ff">className="absolute inset-0 flex items-center justify-center text-2xl">🎉</div> |
| 23 | </div> |
| 24 | <p "color:#79c0ff">className="text-xs text-violet-400 font-semibold">Confetti</p> |
| 25 | </div> |
| 26 | {/* Thumbs bounce */} |
| 27 | <div "color:#79c0ff">className="flex flex-col items-center gap-3"> |
| 28 | <div "color:#79c0ff">className="animate-bounce text-4xl">👍</div> |
| 29 | <p "color:#79c0ff">className="text-xs text-cyan-400 font-semibold">Thumbs Up</p> |
| 30 | </div> |
| 31 | </div> |
Error & Alert Animations
High memory usage detected
Shake on error, red flash border, and warning pulse icon.
| 1 | <div "color:#79c0ff">className="space-y-4 w-full max-w-sm"> |
| 2 | {/* Shake input */} |
| 3 | <div "color:#79c0ff">className="animate-[wiggle_0.5s_ease-in-out] rounded-xl border-2 border-rose-500 bg-slate-900 px-4 py-3 text-sm text-rose-300"> |
| 4 | ✗ Invalid email address |
| 5 | </div> |
| 6 | {/* Flash border */} |
| 7 | <div "color:#79c0ff">className="animate-[glow_2s_ease-in-out_infinite_alternate] rounded-xl border border-red-500/50 bg-red-500/10 px-4 py-3 text-sm font-medium text-red-300"> |
| 8 | ⚠ Session expired — please re-login |
| 9 | </div> |
| 10 | {/* Warning pulse */} |
| 11 | <div "color:#79c0ff">className="flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3"> |
| 12 | <div "color:#79c0ff">className="relative flex h-8 w-8 shrink-0 items-center justify-center"> |
| 13 | <span "color:#79c0ff">className="absolute h-full w-full animate-ping rounded-full bg-amber-400/40" /> |
| 14 | <span "color:#79c0ff">className="text-lg">⚡</span> |
| 15 | </div> |
| 16 | <p "color:#79c0ff">className="text-sm text-amber-300">High memory usage detected</p> |
| 17 | </div> |
| 18 | </div> |
Pulse Beacon Indicators
Online
Away
Alert
Live
Animated ping rings radiate outward from status dots — perfect for live presence and alerts.
| 1 | <div "color:#79c0ff">className="flex flex-wrap items-center gap-8"> |
| 2 | <div "color:#79c0ff">className="flex flex-col items-center gap-2"> |
| 3 | <div "color:#79c0ff">className="relative flex h-10 w-10 items-center justify-center"> |
| 4 | <span "color:#79c0ff">className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-50" /> |
| 5 | <span "color:#79c0ff">className="relative h-5 w-5 rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/50" /> |
| 6 | </div> |
| 7 | <p "color:#79c0ff">className="text-xs text-slate-400">Online</p> |
| 8 | </div> |
| 9 | <div "color:#79c0ff">className="flex flex-col items-center gap-2"> |
| 10 | <div "color:#79c0ff">className="relative flex h-10 w-10 items-center justify-center"> |
| 11 | <span "color:#79c0ff">className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-50 animation-delay-200" /> |
| 12 | <span "color:#79c0ff">className="relative h-5 w-5 rounded-full bg-amber-500 shadow-lg shadow-amber-500/50" /> |
| 13 | </div> |
| 14 | <p "color:#79c0ff">className="text-xs text-slate-400">Away</p> |
| 15 | </div> |
| 16 | <div "color:#79c0ff">className="flex flex-col items-center gap-2"> |
| 17 | <div "color:#79c0ff">className="relative flex h-10 w-10 items-center justify-center"> |
| 18 | <span "color:#79c0ff">className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-50" /> |
| 19 | <span "color:#79c0ff">className="relative h-5 w-5 rounded-full bg-red-500 shadow-lg shadow-red-500/50" /> |
| 20 | </div> |
| 21 | <p "color:#79c0ff">className="text-xs text-slate-400">Alert</p> |
| 22 | </div> |
| 23 | <div "color:#79c0ff">className="flex flex-col items-center gap-2"> |
| 24 | <div "color:#79c0ff">className="relative flex h-10 w-10 items-center justify-center"> |
| 25 | <span "color:#79c0ff">className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-50" /> |
| 26 | <span "color:#79c0ff">className="relative h-5 w-5 rounded-full bg-violet-500 shadow-lg shadow-violet-500/50" /> |
| 27 | </div> |
| 28 | <p "color:#79c0ff">className="text-xs text-slate-400">Live</p> |
| 29 | </div> |
| 30 | </div> |