Coverflow — Carousels that turn heads (dark coverflow aurora)

Summary

A dark, aurora-lit 3D coverflow carousel landing page in a confident, playful product-marketing voice. A sticky frosted-ink top nav (a teal-to-magenta gradient rounded card-stack logo + a 'Coverflow' wordmark, a hidden-on-mobile nav row -- Showcase / Features / Templates / Pricing -- a ghost 'Sign in' link and a solid white 'Start free' pill, plus a mobile hamburger that toggles a slide-down menu) sits above a centered hero: a small 'New: depth-aware coverflow engine' status pill, a big two-line 'Carousels that turn heads, not stomachs.' heading whose 'turn heads' is a teal-to-magenta gradient text, and a muted lead. The hero's centerpiece is a real CSS 3D coverflow: seven absolutely-positioned cards on a 1600px perspective stage, the active card facing front (translated toward the viewer with a teal glow ring) and its neighbours rotated ~42-48deg and pushed back in Z, scaled down and faded by distance, each card a vertical gradient tile with a soft top-left sheen and a bottom gradient label (an uppercase category eyebrow + a Space Grotesk title). Below the stage, a control row of a round glass prev button, a row of pill dots (the active dot a wide teal-to-magenta gradient bar with a glow), and a round glass next button; clicking a card or dot, the arrows, or the left/right arrow keys re-lays out the stage. A CTA pair ('Build your carousel' gradient button + a 'Watch it move' glass button) and a trust line follow. Beneath the hero: a grayscale logo strip, a 3-up glass feature grid (True 3D perspective / 60fps momentum / A11y by default), a split 'From prompt to motion' showcase (copy + checklist + a faux terminal prompt card), a 3-up templates grid of gradient-thumb cards, a dark gradient CTA section, and a social footer. Built on the Tailwind CDN with Inter + Space Grotesk and Iconify Phosphor icons; below ~860px the stage shrinks and drops far cards, and below 480px it shows only the active card plus close neighbours, the nav links collapse into the hamburger menu, and the hero/headings scale down.

Style

A premium dark, aurora-lit aesthetic: a near-black blue-ink ground (#0b0f14) lit from the corners by large blurred aurora blobs in a teal-to-magenta family. The two signature accents are aqua/teal (#2dd4bf) and magenta (#e879f9), used together as gradients (logo chip, hero 'turn heads' gradient text, active-card glow, active dot, primary CTA, template thumbs) and individually as section eyebrows and feature-icon tints. Text is light slate (Tailwind slate-200/300/400) on the dark ground; the only light surfaces are the white 'Start free' pill and the white CTA button (with dark #0b0f14 'ink' text on them). Surfaces are 'glass': translucent white panels (linear-gradient of rgba(255,255,255,0.06) to 0.015) with a hairline rgba(255,255,255,0.08) border and a 14px backdrop blur, plus deep drop shadows (0 30px 70px -28px rgba(0,0,0,0.85)); the active coverflow card swaps in a teal glow shadow + teal ring (0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25)). Depth comes from layered atmosphere: two large corner aurora blobs (teal top-left ~620px, magenta bottom-right ~680px, blur 90px, opacity .5), a central teal-magenta ellipse glow (blur 110px), and a faint 56px grid texture masked to a soft radial vignette around the hero. Corners are generously rounded (rounded-full pills/buttons/dots, rounded-2xl glass cards, 22px coverflow cards, rounded-xl/lg chips). Typography pairs Inter (sans body/UI, weights 400-700) with Space Grotesk (display headings + card titles, weights 500-700), with tight tracking on the big display heading. The overall feel is cinematic and motion-forward: real 3D perspective, smooth cubic-bezier(.22,.61,.36,1) card transitions over .55s, a glowing active slide, and gentle hover scales on the nav buttons.

Layout & Structure

A single dark scrolling landing page: sticky nav, a tall hero whose centerpiece is a 3D coverflow stage with controls, then a logo strip, a 3-up feature grid, a 2-col showcase split, a 3-up templates grid, a dark CTA section, and a footer. The `<nav>` is `sticky top-0 z-50 border-b border-white/5 bg-ink/70 backdrop-blur-xl` with a centered `mx-auto max-w-6xl flex items-center justify-between px-6 py-4` row (brand cluster left, `hidden md:flex` link row center, sign-in/Start-free/hamburger right) plus a `hidden md:hidden` slide-down mobile menu. The `<header>` hero is `relative overflow-hidden` and stacks an `.aurora` + `.aurora-mid` + `.grid-tex` backdrop, then a centered `max-w-6xl px-6 pt-16 pb-10 text-center` intro (a glass status pill, the two-line gradient-accent heading, a lead), then a `max-w-5xl px-4 pb-6` coverflow region (a soft teal glow oval behind, the `.coverflow` perspective stage, and a centered control row of prev / dots / next), then a `max-w-6xl px-6 pb-16 text-center` CTA pair + trust line. The coverflow stage is `position:relative; height:440px; perspective:1600px; transform-style:preserve-3d` holding seven `.cf-card` tiles (`position:absolute; top/left 50%; 280x372px; margin offsets to center; border-radius 22px; overflow:hidden`), each JS-injected with a vertical gradient background, a top-left radial sheen, and a bottom `.label` (uppercase category + Space Grotesk title). Sections below share `mx-auto max-w-6xl px-6`: a `border-y border-white/5 bg-ink2/60` logo strip (six Space Grotesk wordmarks), a `py-24` features section (centered eyebrow/heading/lead + a `grid md:grid-cols-3 gap-5` of glass feature cards), a `border-t border-white/5 bg-ink2/50 py-24` showcase split (`grid lg:grid-cols-2` of copy+checklist+CTA vs a glass terminal card), a `py-24` templates section (a header row + a `grid sm:grid-cols-2 lg:grid-cols-3 gap-5` of glass cards with gradient thumbs), a `border-t border-white/5 py-24` CTA section (an `.aurora-mid` glow + a centered `max-w-3xl` heading/lead/button-pair), and a `border-t border-white/5 bg-ink2/60` footer (brand / copyright / social icon row). Responsive: at <=860px the stage is 400px tall with smaller cards and the far cards fade out; at <=480px it is 360px with only the active + immediate neighbours visible; below md the nav links collapse into the hamburger menu and headings/CTAs scale and stack.

Sticky frosted-ink top nav + mobile menu

Hero intro (aurora backdrop + gradient heading)

3D coverflow stage + controls

Hero CTA pair + trust line

Logo strip

Feature grid (3-up glass cards)

Showcase split (copy + terminal card)

Templates grid (gradient-thumb cards)

Dark CTA section

Social footer

Responsive reflow

Special Notes

Exact tokens (Tailwind config extend): colors `ink` #0b0f14, `ink2` #0e141b, `aqua` #2dd4bf, `magenta` #e879f9; `fontFamily.sans = ['Inter','system-ui','sans-serif']`, `fontFamily.display = ['Space Grotesk','Inter','sans-serif']`. Fonts: Inter (Google Fonts weights 400;500;600;700) + Space Grotesk (500;600;700); Iconify 3.1.1 (Phosphor `ph:` set) from https://code.iconify.design/3/3.1.1/iconify.min.js. Body `font-sans text-slate-200 antialiased selection:bg-aqua/30` with `body { background-color:#0b0f14 }` and `html { scroll-behavior:smooth }`. Two accents only (aqua #2dd4bf + magenta #e879f9), used as gradients and as individual eyebrow/icon tints; the only light surfaces are the white 'Start free' pill and the white CTA button, both `text-ink`. `.glass`: `linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015))`, `border:1px solid rgba(255,255,255,0.08)`, `backdrop-filter: blur(14px)`. `.gradient-text`: `linear-gradient(100deg,#2dd4bf 0%,#7defe0 35%,#e879f9 100%)` clipped to text. Atmosphere: `.aurora::before` ~620px teal radial blob top-left, `.aurora::after` ~680px magenta radial blob bottom-right (blur 90px, opacity .5); `.aurora-mid` ~520x320px teal-magenta ellipse (blur 110px); `.grid-tex` 56px line grid masked by `radial-gradient(ellipse 90% 62% at 50% 38%, #000 18%, transparent 72%)`. Coverflow: `.coverflow { height:440px; perspective:1600px; transform-style:preserve-3d }`; `.cf-card { 280x372px; margin-left:-140px; margin-top:-186px; border-radius:22px; background:#0e141b; box-shadow:0 30px 70px -28px rgba(0,0,0,0.85); transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease }`. Position transforms: pos-0 `translate3d(0,0,140px) rotateY(0) scale(1)` + glow `box-shadow:0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25)`; pos-1/n1 `±168px,0,-40px rotateY ∓42deg scale .86 opacity .92`; pos-2/n2 `±310px,0,-200px rotateY ∓46deg scale .7 opacity .55`; pos-3/n3 `±420px,0,-360px rotateY ∓48deg scale .56 opacity .22`; cf-hidden `0,0,-520px scale .4 opacity 0`. Dots: `.dot 8px rgba(255,255,255,0.22)`, `.dot.active width:26px; background:linear-gradient(90deg,#2dd4bf,#e879f9); box-shadow:0 0 14px rgba(45,212,191,0.6)`. `.nav-btn 44px round, place-items center`, hover scale 1.08 + teal border. JS: a `slides` array of 7 `{title,sub,g}` objects (featured 'Moonrise' is true-aqua `linear-gradient(150deg,#2dd4bf 0%,#22a89a 45%,#0c3b45 78%)`), each rendered as a `.cf-card` with a top-left radial sheen + a bottom gradient `.label` (uppercase 11px category + 17px Space Grotesk title); `active` starts at 3; a single `render()` maps signed distance->position class and toggles the active dot; `#next`/`#prev` and ArrowRight/Left clamp active to `[0,6]`; card/dot clicks jump. Responsive: <=860px stage 400px, cards 230x312, neighbours pull in, far cards hidden; <=480px stage 360px, cards 200x272, only active+/-1 visible; below md nav links collapse into the hamburger `#mobileMenu`, 'Sign in' is `hidden sm:block`, headings/CTAs scale and stack. This is an original prompt-library product for the placeholder brand 'Coverflow' (faithfully reproducing the build HTML); the library value is the reusable dark aurora-lit CSS-3D coverflow pattern itself -- a perspective stage of rotating, receding gradient cards with a glowing active slide, pill-dot pagination, keyboard + click control, and a responsive geometry that drops far cards on small screens.