Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.
1<section class="cyber-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
2 <span class="cyber-grid"></span>
3 <span class="cyber-scanline"></span>
4 <span class="cyber-geom cyber-geom-a"></span>
5 <span class="cyber-geom cyber-geom-b"></span>
6
7 <div class="relative z-10 text-center max-w-3xl">
8 <span class="cyber-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-7">
9 <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>
10 v2.0 · now in beta
11 </span>
12 <h1 class="font-black text-white leading-[1.05] tracking-tight mb-5" style="font-size:clamp(2.5rem,7vw,5rem)">
13 Build the future,
14 <span class="cyber-glitch" data-text="faster.">faster.</span>
15 </h1>
16 <p class="text-base sm:text-lg leading-relaxed mb-8 max-w-xl mx-auto text-slate-300/80">
17 A no-nonsense developer toolkit for shipping production-ready interfaces at the speed of thought.
18 </p>
19 <div class="flex flex-wrap items-center justify-center gap-3">
20 <a href="#" class="cyber-primary inline-flex items-center gap-2 px-7 py-3.5 rounded-xl font-semibold text-[14px] text-black">
21 Start free
22 <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
23 </a>
24 <a href="#" class="cyber-ghost inline-flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold text-[14px] text-white">See docs</a>
25 </div>
26 </div>
27</section>
Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
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.
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.