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.
1function App() {
2 const [open, setOpen] = React.useState(false);
3 const actions = [
4 { label: "New doc", icon: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z", tint: "#22d3ee" },
5 { label: "Invite", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", tint: "#a855f7" },
6 { label: "Image", icon: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z", tint: "#f472b6" },
7 { label: "Comment", icon: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 01-4-.8L3 20l1.2-3.6A8 8 0 1121 12z", tint: "#fbbf24" },
8 ];
9
10 return (
11 <section className="fab-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
12 <span className="fab-orb orb-a" />
13 <span className="fab-orb orb-b" />
14
15 <div className="relative w-full max-w-md text-center">
16 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 fab-pill">Quick actions</span>
17 <h1 className="text-white font-bold leading-tight tracking-tight mb-3" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>One button, four shortcuts.</h1>
18 <p className="text-slate-300/70 text-[13.5px] mb-2">Click the floating button — actions fan out radially.</p>
19 </div>
20
21 <div className="fab-root">
22 {actions.map((a, i) => {
23 const angle = -135 + i * 30;
24 const r = 130;
25 const x = Math.cos((angle * Math.PI) / 180) * r;
26 const y = Math.sin((angle * Math.PI) / 180) * r;
27 return (
28 <button
29 key={a.label}
30 type="button"
31 className="fab-action"
32 style={{
33 "--x": open ? `${x}px` : "0px",
34 "--y": open ? `${y}px` : "0px",
35 "--delay": (open ? i : actions.length - 1 - i) * 50 + "ms",
36 "--tint": a.tint,
37 opacity: open ? 1 : 0,
38 pointerEvents: open ? "auto" : "none",
39 transform: open ? `translate(${x}px, ${y}px) scale(1)` : "translate(0,0) scale(0.4)",
40 }}
41 title={a.label}
42 aria-label={a.label}
43 >
44 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d={a.icon} /></svg>
45 <span className="fab-action-label">{a.label}</span>
46 </button>
47 );
48 })}
49 <button type="button" onClick={() => setOpen((v) => !v)} className={`fab-trigger ${open ? "is-open" : ""}`} aria-expanded={open}>
50 <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /></svg>
51 </button>
52 </div>
53 </section>
54 );
55}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.
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
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.