Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
1function App() {
2 const [open, setOpen] = React.useState(true);
3 const [key, setKey] = React.useState(0);
4 const pieces = React.useMemo(
5 () => Array.from({ length: 40 }, (_, i) => ({
6 i,
7 x: (i * 53) % 100,
8 d: ((i * 17) % 1400) + 200,
9 r: ((i * 91) % 360),
10 h: ((i * 47) % 360),
11 s: 6 + (i % 5),
12 })),
13 [key],
14 );
15
16 const replay = () => { setOpen(false); setTimeout(() => { setOpen(true); setKey((k) => k + 1); }, 350); };
17
18 return (
19 <section className="conf-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
20 <span className="conf-orb orb-a" />
21 <span className="conf-orb orb-b" />
22
23 <div className="text-center max-w-md relative z-10">
24 <h1 className="text-white font-bold leading-tight tracking-tight mb-3" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>You shipped it ?</h1>
25 <p className="text-slate-300/70 text-sm mb-7">A success modal with a pure-CSS confetti burst. No deps, no canvas, no JS animation loop.</p>
26 <button type="button" onClick={replay} className="conf-cta inline-flex items-center gap-2 rounded-full px-6 py-3 text-white font-semibold text-[13.5px]">Trigger again</button>
27 </div>
28
29 {open && (
30 <div key={key} className="conf-overlay fixed inset-0 flex items-center justify-center p-4 z-20" role="dialog">
31 <div className="absolute inset-0 conf-backdrop" onClick={() => setOpen(false)} />
32 <span className="conf-confetti" aria-hidden="true">
33 {pieces.map((p) => (
34 <span
35 key={p.i}
36 className="conf-piece"
37 style={{
38 left: p.x + "%",
39 background: `hsl(${p.h}, 85%, 65%)`,
40 width: p.s + "px",
41 height: p.s * 1.4 + "px",
42 animationDelay: p.d + "ms",
43 "--rot": p.r + "deg",
44 }}
45 />
46 ))}
47 </span>
48 <div className="conf-modal relative rounded-2xl p-8 max-w-sm w-full text-center">
49 <span className="conf-check mx-auto mb-5">
50 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
51 </span>
52 <h2 className="text-white font-bold text-xl tracking-tight mb-1.5">Payment confirmed</h2>
53 <p className="text-slate-300/75 text-sm leading-relaxed mb-6">Your Pro Yearly subscription is active. We've emailed your receipt and onboarding guide.</p>
54 <div className="flex flex-col sm:flex-row items-stretch gap-2.5">
55 <button type="button" onClick={() => setOpen(false)} className="conf-primary flex-1 inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-white font-semibold text-[13.5px]">
56 Continue
57 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
58 </button>
59 <button type="button" onClick={() => setOpen(false)} className="conf-ghost flex-1 inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-white font-semibold text-[13.5px]">View receipt</button>
60 </div>
61 </div>
62 </div>
63 )}
64 </section>
65 );
66}Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Floating action button that fans out four sub-actions in a radial arc on click. Tap rotates the plus icon to a close icon; each action chip eases in.
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.