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}Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
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.
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.
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.
Spotlight-style command palette with live keystroke filtering, keyboard hint chips and grouped results. Backdrop blurs the page below for focus.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
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.
546
Snippets
2629.8k
Views
86.3k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.