Experience a visually stunning audio player with an animated waveform scrubber and queue in a dark dashboard aesthetic. Perfect for immersive music browsing.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-grid-overlay" aria-hidden="true"></div>
6 <div class="gs-card">
7 <div class="gs-card-inner">
8 <header class="player-header d-flex justify-content-between align-items-center">
9 <h2 class="player-title">Neon Vibes Playlist</h2>
10 <div class="player-actions">
11 <button class="btn player-btn player-btn-prev">◀</button>
12 <button class="btn player-btn player-btn-play">►</button>
13 <button class="btn player-btn player-btn-next">▶</button>
14 </div>
15 </header>
16 <div class="waveform" aria-hidden="true">
17 <svg xmlns="http://www.w3.org/2000/svg" class="wave-svg">
18 <path fill="var(--accent)" d="M0,32L48,53.3C96,75,192,117,288,122.7C384,128,480,96,576,69.3C672,43,768,21,864,26.7C960,32,1056,64,1152,74.7C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
19 </svg>
20 </div>
21 <ul class="music-queue">
22 <li class="queue-item">Let Me Down Easy - 3:45</li>
23 <li class="queue-item active">Sunrise Vibes - 2:59</li>
24 <li class="queue-item">Chasing Neon Dreams - 4:12</li>
25 </ul>
26 </div>
27 </div>
28</section>Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Deep Space API Key Manager with Dynamic Glow Effects
Manage your API keys seamlessly with this visually stunning UI. Enjoy claymorphic design and animated orbs that enhance the user experience.
Aurora Mint Code Diff Viewer with Floating Highlights
Explore seamless code comparison with our Aurora Mint themed viewer, featuring responsive hover effects and animated highlights.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
27
Components
216
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.