Auto-rotating testimonial slider with a soft cross-fade, gradient avatar rings and indicator dots. Pause on hover, manual nav via arrows or dots.
1function App() {
2 const items = [
3 { name: "Maya Devi", role: "Senior Engineer · Stripe", quote: "Cut our component-build time in half. The custom-CSS tab is what closed the deal for our design team.", initials: "MD", gradient: "linear-gradient(135deg,#22d3ee,#a855f7)" },
4 { name: "Surya Ramesh", role: "Product Lead · Linear", quote: "The fastest preview iframe I've used. We replaced our internal docs site with this in one afternoon.", initials: "SR", gradient: "linear-gradient(135deg,#f472b6,#6366f1)" },
5 { name: "Lin Park", role: "Indie Founder · Atelier", quote: "Beautiful by default. Even my first throwaway prototype looked like a production landing page.", initials: "LP", gradient: "linear-gradient(135deg,#34d399,#06b6d4)" },
6 { name: "Jamie Okafor", role: "Design Engineer · Vercel", quote: "Bento and gallery components are world-class. Holographic shimmer is *chef's kiss*.", initials: "JO", gradient: "linear-gradient(135deg,#fbbf24,#f472b6)" },
7 ];
8 const [i, setI] = React.useState(0);
9 const [paused, setPaused] = React.useState(false);
10
11 React.useEffect(() => {
12 if (paused) return;
13 const t = setInterval(() => setI((v) => (v + 1) % items.length), 4500);
14 return () => clearInterval(t);
15 }, [paused, items.length]);
16
17 const current = items[i];
18
19 return (
20 <section className="testi-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
21 <span className="testi-orb orb-a" />
22 <span className="testi-orb orb-b" />
23
24 <div className="relative w-full max-w-2xl">
25 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5 testi-pill">Loved by builders</span>
26 <div className="testi-card relative rounded-3xl p-8 sm:p-10 overflow-hidden" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
27 <svg className="absolute top-7 right-7 w-10 h-10 text-white/10" viewBox="0 0 24 24" fill="currentColor"><path d="M9 7H5.5a3.5 3.5 0 100 7H7v3a3 3 0 003 3v-3.5a6 6 0 00-1-10.5zm9 0h-3.5a3.5 3.5 0 100 7H16v3a3 3 0 003 3v-3.5a6 6 0 00-1-10.5z" /></svg>
28 <div key={i} className="testi-fade">
29 <p className="text-white text-lg sm:text-xl leading-snug font-medium tracking-tight mb-7">"{current.quote}"</p>
30 <div className="flex items-center gap-3">
31 <span className="testi-avatar" style={{ background: current.gradient }}>{current.initials}</span>
32 <div>
33 <p className="text-white font-semibold text-[14px]">{current.name}</p>
34 <p className="text-slate-300/65 text-[12px]">{current.role}</p>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <div className="flex items-center justify-between mt-5">
41 <div className="flex items-center gap-2">
42 {items.map((_, idx) => (
43 <button key={idx} type="button" onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`} className={`testi-dot ${idx === i ? "is-active" : ""}`} />
44 ))}
45 </div>
46 <div className="flex items-center gap-2">
47 <button type="button" onClick={() => setI((v) => (v - 1 + items.length) % items.length)} className="testi-nav"><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg></button>
48 <button type="button" onClick={() => setI((v) => (v + 1) % items.length)} className="testi-nav"><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg></button>
49 </div>
50 </div>
51 </div>
52 </section>
53 );
54}Compact music player with album art, animated equaliser bars, scrubber, elapsed/remaining time and play controls. Pure CSS keyframes drive the EQ pulse and the neon ring around the album art.
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.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.