Five full-bleed heroes — aurora AI, spotlight grid, split product, neon terminal and frosted glass. Each renders edge-to-edge exactly as it will on your landing page.
Aurora AI Hero
Production React components generated from plain English. Copy the code, own it forever.
Free forever · No credit card · 12,000+ builders
Drifting aurora blobs, a live badge, gradient headline and an AI prompt bar as the primary CTA.
| 1 | <section "color:#79c0ff">className="relative flex min-h-[540px] flex-col items-center justify-center overflow-hidden bg-[#05050c] px-6 py-20 text-center"> |
| 2 | {/* aurora blobs */} |
| 3 | <div "color:#79c0ff">className="pointer-events-none absolute -top-32 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full bg-violet-600/30 blur-[120px]" |
| 4 | "color:#79c0ff">style={{ animation: "blob 9s ease-in-out infinite" }} /> |
| 5 | <div "color:#79c0ff">className="pointer-events-none absolute -bottom-24 left-1/4 h-72 w-72 rounded-full bg-cyan-500/20 blur-[110px]" |
| 6 | "color:#79c0ff">style={{ animation: "blob 11s ease-in-out infinite reverse" }} /> |
| 7 | <div "color:#79c0ff">className="pointer-events-none absolute -bottom-16 right-1/4 h-72 w-72 rounded-full bg-fuchsia-600/20 blur-[110px]" |
| 8 | "color:#79c0ff">style={{ animation: "blob 13s ease-in-out infinite" }} /> |
| 9 | |
| 10 | <div "color:#79c0ff">className="relative"> |
| 11 | <span "color:#79c0ff">className="inline-flex items-center gap-2 rounded-full border border-violet-400/30 bg-violet-500/10 px-4 py-1.5 text-sm font-semibold text-violet-300 backdrop-blur"> |
| 12 | <span "color:#79c0ff">className="relative flex h-2 w-2"> |
| 13 | <span "color:#79c0ff">className="absolute h-full w-full animate-ping rounded-full bg-violet-400 opacity-70" /> |
| 14 | <span "color:#79c0ff">className="relative h-2 w-2 rounded-full bg-violet-400" /> |
| 15 | </span> |
| 16 | Introducing UIDrops AI |
| 17 | </span> |
| 18 | |
| 19 | <h1 "color:#79c0ff">className="mx-auto mt-7 max-w-3xl text-5xl font-extrabold leading-[1.05] tracking-tight text-white sm:text-6xl"> |
| 20 | Describe it.{" "} |
| 21 | <span "color:#79c0ff">className="bg-gradient-to-r from-violet-400 via-fuchsia-400 to-cyan-300 bg-clip-text text-transparent"> |
| 22 | Watch it build itself. |
| 23 | </span> |
| 24 | </h1> |
| 25 | <p "color:#79c0ff">className="mx-auto mt-5 max-w-xl text-lg text-white/45"> |
| 26 | Production React components generated from plain English. Copy the code, own it forever. |
| 27 | </p> |
| 28 | |
| 29 | {/* prompt bar CTA */} |
| 30 | <div "color:#79c0ff">className="mx-auto mt-9 flex max-w-lg items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] p-2 pl-5 backdrop-blur-xl transition focus-within:border-violet-400/60 focus-within:shadow-[0_0_50px_rgba(139,92,246,0.3)]"> |
| 31 | <input "color:#79c0ff">placeholder="A pricing card with a yearly toggle…" |
| 32 | "color:#79c0ff">className="flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none" /> |
| 33 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/40 transition hover:shadow-violet-500/60"> |
| 34 | Generate ✦ |
| 35 | </button> |
| 36 | </div> |
| 37 | |
| 38 | <p "color:#79c0ff">className="mt-6 text-xs text-white/30">Free forever · No credit card · 12,000+ builders</p> |
| 39 | </div> |
| 40 | </section> |
| 41 | |
| 42 | /* @keyframes blob { 0%,100% { transform: translate(0,0) scale(1) } 33% { transform: translate(28px,-22px) scale(1.08) } 66% { transform: translate(-20px,16px) scale(.94) } } */ |
Spotlight Grid Hero
One import away from a consistent, accessible, beautiful product.
120+
Components
48ms
Median load
99.99%
Uptime
12k
Teams
A faint blueprint grid with a radial spotlight, stat proof row and dual CTAs — the Linear look.
| 1 | <section "color:#79c0ff">className="relative flex min-h-[520px] flex-col items-center justify-center overflow-hidden bg-[#060609] px-6 py-20 text-center"> |
| 2 | {/* blueprint grid */} |
| 3 | <div "color:#79c0ff">className="pointer-events-none absolute inset-0" |
| 4 | "color:#79c0ff">style={{ |
| 5 | backgroundImage: |
| 6 | "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)", |
| 7 | backgroundSize: "56px 56px", |
| 8 | maskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%)", |
| 9 | }} /> |
| 10 | {/* spotlight */} |
| 11 | <div "color:#79c0ff">className="pointer-events-none absolute left-1/2 top-0 h-80 w-[42rem] -translate-x-1/2 rounded-full bg-white/[0.07] blur-[100px]" /> |
| 12 | |
| 13 | <div "color:#79c0ff">className="relative"> |
| 14 | <h1 "color:#79c0ff">className="mx-auto max-w-3xl text-5xl font-extrabold leading-[1.06] tracking-tight text-white sm:text-6xl"> |
| 15 | The design system your team ships with |
| 16 | </h1> |
| 17 | <p "color:#79c0ff">className="mx-auto mt-5 max-w-xl text-lg text-white/40"> |
| 18 | One import away from a consistent, accessible, beautiful product. |
| 19 | </p> |
| 20 | <div "color:#79c0ff">className="mt-9 flex flex-wrap items-center justify-center gap-3"> |
| 21 | <button "color:#79c0ff">className="rounded-xl bg-white px-7 py-3 text-sm font-bold text-slate-900 transition hover:bg-slate-200"> |
| 22 | Start building → |
| 23 | </button> |
| 24 | <button "color:#79c0ff">className="rounded-xl border border-white/15 px-7 py-3 text-sm font-semibold text-white/75 transition hover:border-white/35 hover:text-white"> |
| 25 | Book a demo |
| 26 | </button> |
| 27 | </div> |
| 28 | {/* proof row */} |
| 29 | <div "color:#79c0ff">className="mt-12 flex flex-wrap items-center justify-center gap-x-10 gap-y-4"> |
| 30 | {[["120+", "Components"], ["48ms", "Median load"], ["99.99%", "Uptime"], ["12k", "Teams"]].map(([v, l]) => ( |
| 31 | <div "color:#79c0ff">key={l} "color:#79c0ff">className="text-center"> |
| 32 | <p "color:#79c0ff">className="text-2xl font-extrabold text-white">{v}</p> |
| 33 | <p "color:#79c0ff">className="text-[11px] uppercase tracking-widest text-white/30">{l}</p> |
| 34 | </div> |
| 35 | ))} |
| 36 | </div> |
| 37 | </div> |
| 38 | </section> |
Split Product Hero
Real-time dashboards your whole team can read — no SQL, no waiting on data teams.
Loved by 2,400+ data teams
Revenue overview
Last 30 days$48k
MRR
12.8k
Users
72
NPS
Conversion
↑ 3.64%
Live visitors
842
Copy and CTAs on the left, a floating app mockup with orbiting stat cards on the right.
| 1 | <section "color:#79c0ff">className="grid min-h-[520px] items-center gap-10 overflow-hidden bg-[#07070f] px-8 py-16 lg:grid-cols-2 lg:px-14"> |
| 2 | {/* copy */} |
| 3 | <div> |
| 4 | <span "color:#79c0ff">className="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3.5 py-1.5 text-xs font-bold text-emerald-400 ring-1 ring-inset ring-emerald-400/25"> |
| 5 | ✓ SOC 2 Type II certified |
| 6 | </span> |
| 7 | <h1 "color:#79c0ff">className="mt-6 text-4xl font-extrabold leading-[1.08] tracking-tight text-white sm:text-5xl"> |
| 8 | Your analytics, |
| 9 | <br /> |
| 10 | <span "color:#79c0ff">className="text-emerald-400">actually understandable.</span> |
| 11 | </h1> |
| 12 | <p "color:#79c0ff">className="mt-5 max-w-md text-lg text-white/45"> |
| 13 | Real-time dashboards your whole team can read — no SQL, no waiting on data teams. |
| 14 | </p> |
| 15 | <div "color:#79c0ff">className="mt-8 flex flex-wrap gap-3"> |
| 16 | <button "color:#79c0ff">className="rounded-xl bg-emerald-500 px-7 py-3 text-sm font-bold text-emerald-950 transition hover:bg-emerald-400"> |
| 17 | Try it free |
| 18 | </button> |
| 19 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-xl border border-white/12 px-6 py-3 text-sm font-semibold text-white/75 hover:border-white/30"> |
| 20 | ▶ Watch 2-min tour |
| 21 | </button> |
| 22 | </div> |
| 23 | </div> |
| 24 | |
| 25 | {/* mockup with floating stat cards */} |
| 26 | <div "color:#79c0ff">className="relative mx-auto w-full max-w-md"> |
| 27 | <div "color:#79c0ff">className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 shadow-2xl"> |
| 28 | <div "color:#79c0ff">className="flex h-40 items-end gap-1.5 rounded-xl border border-white/6 bg-black/30 p-3"> |
| 29 | {[30, 48, 38, 60, 52, 72, 58, 84, 70, 95].map((h, i) => ( |
| 30 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="flex-1 rounded-sm bg-gradient-to-t from-emerald-600 to-teal-400" |
| 31 | "color:#79c0ff">style={{ height: h + "%" }} /> |
| 32 | ))} |
| 33 | </div> |
| 34 | </div> |
| 35 | {/* floating card */} |
| 36 | <div "color:#79c0ff">className="absolute -left-6 -top-6 rounded-2xl border border-white/10 bg-[#10101c]/95 p-3.5 shadow-2xl backdrop-blur" |
| 37 | "color:#79c0ff">style={{ animation: "float 6s ease-in-out infinite" }}> |
| 38 | <p "color:#79c0ff">className="text-[10px] text-white/40">Conversion</p> |
| 39 | <p "color:#79c0ff">className="text-lg font-extrabold text-emerald-400">↑ 3.64%</p> |
| 40 | </div> |
| 41 | </div> |
| 42 | </section> |
| 43 | |
| 44 | /* @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } } */ |
Neon Terminal Hero
// developer first
Push to the edge in 40 seconds. Rollbacks, previews and logs included.
$ npx uidrops deploy
▲ Building… done in 12.4s
▲ Uploading 42 files… done
✓ Deployed to https://my-app.uidrops.app
Developer-tool hero with a glowing terminal window, deploy output and neon CTAs.
| 1 | <section "color:#79c0ff">className="relative flex min-h-[520px] flex-col items-center justify-center overflow-hidden bg-[#030308] px-6 py-16 text-center"> |
| 2 | {/* glow */} |
| 3 | <div "color:#79c0ff">className="pointer-events-none absolute left-1/2 top-1/3 h-64 w-[40rem] -translate-x-1/2 rounded-full bg-cyan-500/10 blur-[110px]" /> |
| 4 | |
| 5 | <p "color:#79c0ff">className="font-mono text-xs font-bold uppercase tracking-[0.3em] text-cyan-400">// developer first</p> |
| 6 | <h1 "color:#79c0ff">className="mt-4 max-w-2xl text-5xl font-extrabold tracking-tight text-white"> |
| 7 | Deploy in one command |
| 8 | </h1> |
| 9 | <p "color:#79c0ff">className="mt-4 max-w-lg text-white/40"> |
| 10 | Push to the edge in 40 seconds. Rollbacks, previews and logs included. |
| 11 | </p> |
| 12 | |
| 13 | {/* terminal */} |
| 14 | <div "color:#79c0ff">className="mt-10 w-full max-w-xl overflow-hidden rounded-2xl border border-cyan-400/20 bg-[#0a0f16] text-left shadow-[0_0_60px_rgba(34,211,238,0.15)]"> |
| 15 | <div "color:#79c0ff">className="flex items-center gap-2 border-b border-white/8 px-4 py-3"> |
| 16 | <span "color:#79c0ff">className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" /> |
| 17 | <span "color:#79c0ff">className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" /> |
| 18 | <span "color:#79c0ff">className="h-2.5 w-2.5 rounded-full bg-[#28c840]" /> |
| 19 | <span "color:#79c0ff">className="ml-2 font-mono text-[10px] text-white/30">~/my-app</span> |
| 20 | </div> |
| 21 | <div "color:#79c0ff">className="space-y-2 p-5 font-mono text-[13px]"> |
| 22 | <p "color:#79c0ff">className="text-white/80"><span "color:#79c0ff">className="text-cyan-400">$</span> npx uidrops deploy</p> |
| 23 | <p "color:#79c0ff">className="text-white/35">▲ Building… <span "color:#79c0ff">className="text-emerald-400">done in 12.4s</span></p> |
| 24 | <p "color:#79c0ff">className="text-white/35">▲ Uploading 42 files… <span "color:#79c0ff">className="text-emerald-400">done</span></p> |
| 25 | <p "color:#79c0ff">className="text-emerald-400">✓ Deployed to https://my-app.uidrops.app |
| 26 | <span "color:#79c0ff">className="ml-1 inline-block h-3.5 w-2 bg-cyan-400" "color:#79c0ff">style={{ animation: "caret 1s step-end infinite" }} /> |
| 27 | </p> |
| 28 | </div> |
| 29 | </div> |
| 30 | |
| 31 | <div "color:#79c0ff">className="mt-8 flex flex-wrap items-center justify-center gap-3"> |
| 32 | <button "color:#79c0ff">className="rounded-xl border-2 border-cyan-400 px-7 py-2.5 text-sm font-bold text-cyan-300 transition hover:bg-cyan-400/10" |
| 33 | "color:#79c0ff">style={{ boxShadow: "0 0 18px rgba(34,211,238,0.35), inset 0 0 14px rgba(34,211,238,0.06)" }}> |
| 34 | Read the docs |
| 35 | </button> |
| 36 | <button "color:#79c0ff">className="rounded-xl bg-white px-7 py-2.5 text-sm font-bold text-slate-900 transition hover:bg-slate-200"> |
| 37 | Get API key → |
| 38 | </button> |
| 39 | </div> |
| 40 | </section> |
Frosted Glass Hero
Join 8,000+ designers getting weekly drops of fresh components.
No spam. Unsubscribe anytime.
An animated multi-stop gradient behind a frosted panel with badge, headline and inline email capture.
| 1 | <section "color:#79c0ff">className="relative flex min-h-[520px] items-center justify-center overflow-hidden px-6 py-16"> |
| 2 | {/* animated gradient backdrop */} |
| 3 | <div "color:#79c0ff">className="absolute inset-0" |
| 4 | "color:#79c0ff">style={{ |
| 5 | background: "linear-gradient(120deg,#1e1b4b,#4c1d95,#0e7490,#831843,#1e1b4b)", |
| 6 | backgroundSize: "300% 300%", |
| 7 | animation: "gradientShift 14s ease infinite", |
| 8 | }} /> |
| 9 | {/* dot texture */} |
| 10 | <div "color:#79c0ff">className="absolute inset-0 opacity-20" |
| 11 | "color:#79c0ff">style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px)", backgroundSize: "22px 22px" }} /> |
| 12 | |
| 13 | {/* glass panel */} |
| 14 | <div "color:#79c0ff">className="relative w-full max-w-2xl rounded-[2rem] border border-white/15 bg-white/[0.08] p-10 text-center shadow-2xl backdrop-blur-2xl sm:p-14"> |
| 15 | <span "color:#79c0ff">className="rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-white/80"> |
| 16 | Early access |
| 17 | </span> |
| 18 | <h1 "color:#79c0ff">className="mt-6 text-4xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl"> |
| 19 | Be first in line when we launch |
| 20 | </h1> |
| 21 | <p "color:#79c0ff">className="mx-auto mt-4 max-w-md text-white/55"> |
| 22 | Join 8,000+ designers getting weekly drops of fresh components. |
| 23 | </p> |
| 24 | {/* email capture */} |
| 25 | <form "color:#79c0ff">className="mx-auto mt-8 flex max-w-md gap-2 rounded-2xl border border-white/15 bg-black/20 p-1.5 backdrop-blur"> |
| 26 | <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@company.com" |
| 27 | "color:#79c0ff">className="min-w-0 flex-1 bg-transparent px-4 text-sm text-white placeholder-white/35 outline-none" /> |
| 28 | <button "color:#79c0ff">className="shrink-0 rounded-xl bg-white px-5 py-2.5 text-sm font-bold text-slate-900 transition hover:bg-slate-200"> |
| 29 | Join waitlist |
| 30 | </button> |
| 31 | </form> |
| 32 | <p "color:#79c0ff">className="mt-4 text-[11px] text-white/35">No spam. Unsubscribe anytime.</p> |
| 33 | </div> |
| 34 | </section> |
| 35 | |
| 36 | /* @keyframes gradientShift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } } */ |