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>
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.
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.
Dashboard-style sidebar that smoothly collapses from a 240px expanded state to a 64px icon rail. Active item glow, hover highlight, group separators.
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.
517
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.