Voices from the Canvas — Aurora Carousel

Summary

A dark, aurora-glow testimonial CAROUSEL section for a prompt-to-UI design product. Under a sticky glass nav, a centered header (a small live-dot 'Loved by 57,000+ builders' badge, an Inter+Space-Grotesk headline whose tail 'staring at blank canvases' is painted in an aqua->sky->magenta aurora gradient, a muted subhead) sits above the carousel stage. The stage is one large glass 'stage-card' (rounded-[2rem], dual radial aqua/magenta tints + a blurred aurora glow halo behind it) carrying the active testimonial: an avatar with an aqua->magenta gradient ring, a name + role (the company name in aqua), a five-star magenta rating, a big Space-Grotesk pull-quote, a hairline divider, and a footer row of pill/pill-pip pagination dots (the active dot a stretched aqua->magenta gradient pill) on the left and prev/next round arrow buttons on the right (prev = glass, next = solid white). Two blurred, rotated 'ghost' peek cards float (CSS keyframe) behind the stage on large screens to sell the carousel motif. Below, a three-up trust-stats strip (4.9/5, 120k+, 9x) on a hairline top border. A faint SVG grain + two big ambient aqua/magenta blur globs sit fixed behind everything. Vanilla JS drives slide state (data array, paint/render with a fade-up transition, dot + arrow handlers) and the mobile hamburger menu. Space Grotesk (display) + Inter (body), Phosphor icons inline.

Style

A premium, dark 'aurora glass' testimonial style: a near-black ink ground (#0b0f14) lit by two ambient blur globs (aqua #2dd4bf and magenta #e879f9, each at ~10% over a 140-150px blur) and a faint fractal-noise SVG grain at ~2.5% opacity. The signature accent is an aurora gradient (aqua #2dd4bf -> sky #7dd3fc -> magenta #e879f9) used as clipped headline text, as the avatar ring, as the active pagination pill, and as the logo tile. Surfaces are glass: translucent white-at-3% fills with backdrop-blur and hairline white borders; the nav is a darker ink/60 blur bar. The hero 'stage-card' layers two radial color tints (aqua from top-left, magenta from bottom-right) over a dark linear gradient, with a deep multi-layer shadow + inset highlight, and a separate blurred 'stage-glow' halo behind it. Type pairs Space Grotesk (display: headline, quote, name, stats) with Inter (body/labels); ink-on-light is inverted here, so text is slate-200/300/400 over dark, white reserved for emphasis. Color discipline: only aqua + magenta (+ the sky midpoint) as accents, everything else is the slate/ink dark scale. Motion is subtle and tasteful: ghost cards float on a 7s/9s ease-in-out keyframe, the quote cross-fades up on slide change, arrow buttons scale down on press, dots animate width over 0.35s. Mood: modern, nocturnal, high-craft, a little playful via the aurora and floaty cards, never flat or generic.

Layout & Structure

A single dark testimonial section under a sticky glass nav, centered and capped (header max-w-2xl, carousel stage max-w-4xl, stats max-w-3xl) inside a max-w-7xl px-6/lg:px-8 shell with generous vertical padding (py-24 -> sm:py-28 -> lg:py-32). Top-down: (1) a sticky glass header (h-16) with a logo lockup, center nav links, sign-in + 'Start free' pill, and a mobile hamburger that toggles a slide-down menu panel; (2) a centered header block (live-dot badge, two-line aurora headline, subhead); (3) the carousel stage = one big glass stage-card with two rotated floating ghost peek cards behind it (lg+ only) and a blurred glow halo, the card holding avatar+meta+stars, a big quote, a divider, and a dots+arrows footer; (4) a three-up trust-stats strip on a hairline top border. Responsive: nav center links + hamburger swap at md, the sign-in link hides below sm; the headline goes text-4xl -> sm:5xl, the quote 2xl -> sm:[2rem] -> lg:[2.15rem]; the stage padding steps px-8 py-12 -> sm:px-14 sm:py-14; the ghost peek cards and the star rating only appear at lg / sm respectively; everything stays centered with no horizontal overflow despite the off-card ghosts, the glow halo and the fixed ambient globs.

Sticky glass nav

Section header

Carousel stage card

Avatar, meta + star rating

Pull-quote + divider

Pagination dots + arrows footer

Trust-stats strip

Special Notes

Fonts via Google Fonts: Space Grotesk (display: headline, pull-quote, name, stat numbers, the big quote-mark glyph) and Inter (sans: body, labels, badges), weights 400/500/600/700. Styled with Tailwind via CDN using a custom theme: fontFamily.sans = Inter, fontFamily.display = Space Grotesk; colors ink #0b0f14, aqua #2dd4bf, magenta #e879f9 (the sky midpoint #7dd3fc is used inline in the aurora gradient). Body background #0b0f14, html scroll-behavior:smooth, ::selection aqua/30. Custom CSS utilities: .aurora-text (the 100deg aqua->sky->magenta clipped gradient), .glass (white/3 + blur 14px + white/7 border), .nav-glass (ink/60 + blur 18px saturate 140% + bottom hairline), .stage-card (dual radial tints over dark linear gradient + layered shadow), .stage-glow (radial aqua/magenta glow at blur 60px), .ghost-card (dark glass gradient + heavy shadow), .quote-mark (Space Grotesk serif-ish, line-height 0.7), .dot (all .35s cubic-bezier transition), .grain (inline fractal-noise SVG data URI), and @keyframes floaty + .floaty/.floaty-2 (7s/9s). Icons are inline Phosphor SVG paths (sparkle, list/x hamburger, quotes, star-fill, arrow-left, arrow-right) using fill=currentColor, not an icon library import. The carousel is driven by vanilla JS: a data[] array, buildDots()/paint()/render()/go() with wraparound, prev/next + dot click handlers, an on-load paint() to avoid a flash/mismatch, and a mobile-menu setMenu() toggle. The signature moves are the aurora-gradient headline + accents, the glass stage-card with its glow halo and floating rotated ghost peek cards, the animated aqua->magenta pagination pill, and the two-tone (glass / solid-white) arrow controls over a grain + ambient-glob dark ground. Keep the palette strictly aqua + magenta (+ sky midpoint) over the ink/slate dark scale, never introduce a third hue.