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}Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
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.
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
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.