macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
1<section class="term-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="term-orb orb-a"></span>
3 <span class="term-orb orb-b"></span>
4
5 <div class="relative w-full max-w-2xl">
6 <div class="term-card rounded-2xl overflow-hidden">
7 <div class="term-chrome flex items-center justify-between px-4 py-2.5">
8 <span class="flex items-center gap-1.5">
9 <span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span>
10 <span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e]"></span>
11 <span class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>
12 </span>
13 <span class="text-slate-400 text-[11px] font-mono">~ / atlas / web</span>
14 <span class="w-12"></span>
15 </div>
16 <div class="term-body p-5 font-mono text-[13.5px] leading-relaxed">
17 <p class="term-line"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-1">npm</span><span class="term-cursor term-c-1">▌</span></p>
18 <p class="term-line term-line-2"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-2">npm <span class="term-cmd">install</span> @atlas/core</span><span class="term-cursor term-c-2">▌</span></p>
19 <p class="term-line term-line-3"><span class="term-out">added 142 packages in 2.3s · <span class="term-ok">✓ ok</span></span></p>
20 <p class="term-line term-line-4"><span class="term-prompt">~ $</span> <span class="term-typed term-typed-3">atlas <span class="term-cmd">build</span> --prod</span><span class="term-cursor term-c-3">▌</span></p>
21 <p class="term-line term-line-5"><span class="term-out">→ analyzing <span class="term-ok">✓</span></span></p>
22 <p class="term-line term-line-6"><span class="term-out">→ bundling <span class="term-ok">✓</span></span></p>
23 <p class="term-line term-line-7"><span class="term-out">→ optimizing <span class="term-ok">✓</span></span></p>
24 <p class="term-line term-line-8"><span class="term-out term-success">✨ build complete · </span><span class="term-out">28.4kb gzipped</span></p>
25 <p class="term-line term-line-9"><span class="term-prompt">~ $</span> <span class="term-cursor term-c-final">▌</span></p>
26 </div>
27 </div>
28
29 <p class="text-center text-[12px] mt-5 text-slate-400">↑ a five-second auto-playing demo</p>
30 </div>
31</section>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.
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.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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.
Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.
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.
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
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.