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.
1<section class="mp-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="mp-orb orb-a"></span>
3 <span class="mp-orb orb-b"></span>
4 <span class="mp-grid"></span>
5
6 <div class="relative w-full max-w-md">
7 <div class="mp-card rounded-3xl p-6 sm:p-7">
8 <div class="flex items-start gap-5 mb-6">
9 <div class="mp-art-wrap">
10 <span class="mp-art-ring"></span>
11 <div class="mp-art">
12 <span class="mp-art-eq">
13 <span></span>
14 <span></span>
15 <span></span>
16 <span></span>
17 <span></span>
18 </span>
19 </div>
20 </div>
21 <div class="flex-1 min-w-0">
22 <span class="mp-pill inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9.5px] font-bold uppercase tracking-[0.18em] mb-2">
23 <span class="w-1 h-1 rounded-full bg-fuchsia-300 animate-pulse"></span>
24 Now playing
25 </span>
26 <h2 class="text-white font-bold text-[18px] leading-tight tracking-tight truncate">
27 Midnight Refractor
28 </h2>
29 <p class="text-slate-300/70 text-[12.5px] truncate">Aurora · Lumen, Vol. 02</p>
30 <div class="flex items-center gap-1.5 mt-3">
31 <button type="button" class="mp-tag">Synthwave</button>
32 <button type="button" class="mp-tag">Late-night</button>
33 </div>
34 </div>
35 </div>
36
37 <div class="flex items-center justify-between text-[10.5px] font-mono text-slate-400 mb-1.5">
38 <span class="tabular-nums">1:42</span>
39 <span class="tabular-nums">−2:18</span>
40 </div>
41 <div class="mp-scrub">
42 <span class="mp-scrub-fill"></span>
43 <span class="mp-scrub-knob"></span>
44 </div>
45
46 <div class="flex items-center justify-between mt-6">
47 <button type="button" class="mp-icon-btn" aria-label="Shuffle">
48 <svg fill="none" stroke="currentColor" stroke-width="2">
49 <path stroke-linecap="round" stroke-linejoin="round" d="M4 4l4 4-4 4M20 20l-4-4 4-4M4 20h6l4-12h6"></path>
50 </svg>
51 </button>
52 <button type="button" class="mp-icon-btn" aria-label="Previous">
53 <svg fill="currentColor"><path d="M6 6h2v12H6zm10 0v12L8 12z"></path></svg>
54 </button>
55 <button type="button" class="mp-play" aria-label="Play">
56 <svg fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
57 </button>
58 <button type="button" class="mp-icon-btn" aria-label="Next">
59 <svg fill="currentColor">
60 <path d="M16 6h2v12h-2zM6 18l8-6-8-6z"></path>
61 </svg>
62 </button>
63 <button type="button" class="mp-icon-btn" aria-label="Heart">
64 <svg fill="currentColor">
65 <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
66 </svg>
67 </button>
68 </div>
69
70 <div class="mp-eq mt-6 flex items-end justify-between gap-[3px] h-7">
71 <span style="animation-delay:-1.2s"></span>
72 <span style="animation-delay:-0.9s"></span>
73 <span style="animation-delay:-0.6s"></span>
74 <span style="animation-delay:-0.3s"></span>
75 <span style="animation-delay:-1.4s"></span>
76 <span style="animation-delay:-0.7s"></span>
77 <span style="animation-delay:-1.1s"></span>
78 <span style="animation-delay:-0.4s"></span>
79 <span style="animation-delay:-0.8s"></span>
80 <span style="animation-delay:-1.3s"></span>
81 <span style="animation-delay:-0.5s"></span>
82 <span style="animation-delay:-1.0s"></span>
83 <span style="animation-delay:-0.2s"></span>
84 <span style="animation-delay:-1.5s"></span>
85 <span style="animation-delay:-0.6s"></span>
86 <span style="animation-delay:-0.9s"></span>
87 <span style="animation-delay:-1.1s"></span>
88 <span style="animation-delay:-0.4s"></span>
89 <span style="animation-delay:-0.8s"></span>
90 <span style="animation-delay:-1.3s"></span>
91 </div>
92 </div>
93 </div>
94</section>Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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 theme switch with morphing sun → moon icon and a full-page palette transition. Click anywhere on the switch to toggle the demo card's vibe.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
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.
579
Snippets
2630.9k
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.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.