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.
1function App() {
2 const [trigger, setTrigger] = React.useState(0);
3 const skills = [
4 { name: "React + Next.js", value: 96, tint: "#22d3ee" },
5 { name: "Tailwind CSS", value: 92, tint: "#06b6d4" },
6 { name: "TypeScript", value: 88, tint: "#a855f7" },
7 { name: "System Design", value: 78, tint: "#f472b6" },
8 { name: "Motion / Animation", value: 84, tint: "#fbbf24" },
9 { name: "Accessibility", value: 72, tint: "#34d399" },
10 ];
11
12 return (
13 <section className="skill-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
14 <span className="skill-orb orb-a" />
15 <span className="skill-orb orb-b" />
16
17 <div className="relative w-full max-w-2xl">
18 <div className="skill-card rounded-3xl p-7 sm:p-9">
19 <div className="flex flex-wrap items-end justify-between gap-3 mb-7">
20 <div>
21 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-3 skill-pill">Front-end · 6 yrs</span>
22 <h2 className="text-white font-bold leading-tight tracking-tight" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>Riya's stack</h2>
23 <p className="text-slate-300/65 text-[13px] mt-1">Click <span className="text-white font-semibold">Replay</span> to re-run the fill animation.</p>
24 </div>
25 <button type="button" onClick={() => setTrigger((t) => t + 1)} className="skill-replay inline-flex items-center gap-2 rounded-full px-4 py-2 text-white text-[12.5px] font-semibold">
26 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8 8 0 1 0 4.5 8.5M20 20v-5h-.581" /></svg>
27 Replay
28 </button>
29 </div>
30 <div className="space-y-4" key={trigger}>
31 {skills.map((s, i) => (
32 <div key={s.name}>
33 <div className="flex items-center justify-between mb-1.5">
34 <span className="text-white text-[13.5px] font-semibold">{s.name}</span>
35 <span className="text-[12px] font-bold tracking-tight" style={{ color: s.tint }}>{s.value}%</span>
36 </div>
37 <div className="skill-track">
38 <span className="skill-fill" style={{ "--v": s.value + "%", "--tint": s.tint, animationDelay: i * 90 + "ms" }} />
39 </div>
40 </div>
41 ))}
42 </div>
43 </div>
44 </div>
45 </section>
46 );
47}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
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.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.