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.
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>
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.

macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.

Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.

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.

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.
519
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.