Take the deck home.

Build me a complete, responsive business website in the SCROLL-STACK style — the pin-and-press card deck popularized by Apple's feature pages and Corey Ginnivan's site: each section is a solid, fully opaque card that pins in the viewport, then the next card slides up from the bottom and presses over it like a hand laying the next card flat on a pile. Scrolling the page feels like dealing a hand of cards, one at a time — not skimming a scroll of paper. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits a confident, sequenced walkthrough — a boutique fitness studio, an indie software product, a specialty coffee roaster, a design agency — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact ACCENT PAIR within the palette, the TYPE pairing, and the overall LAYOUT COMPOSITION of the deck. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • The deck mechanic: below the opening section, every section is ONE flat card that pins in the viewport (position: sticky, or GSAP ScrollTrigger's pin) for a fixed scroll distance, then the next card slides up from the bottom edge and presses over it until it is fully covered. A hard drop-shadow or bright neon-edge seam marks the exact line where the incoming card lands — the change reads as replacement, a clean cut, never a blend or dissolve. • Every post-opening card is FULLY OPAQUE — a single solid surface. No transparency, no blur, no frosted glass, no soft drifting depth gradients. A see-through card isn't a card. • One card, one idea. Each pinned panel carries exactly one claim, feature, or beat — never two features stacked on one panel. • A midnight canvas underneath. The page ground is a deep, dark near-black-with-color (see palette); cards press onto it and glow against it. • Motion is PRESS — lay-down press. Cards may scale down or offset slightly just before they lock, then snap to full size on pin, like being picked up and placed. Nothing drifts, nothing fades into translucency. Honor prefers-reduced-motion by collapsing the pin/press sequence to plainly stacked static panels (no scroll-jacking), and keep ALL content visible without JavaScript. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. Pick the ink from each card's ACTUAL surface — warm off-white text on the dark cards and canvas; near-black text on any bright accent card. A saturated neon accent used as a full card fill is a background too, so re-check the text on it. NEVER low-contrast neon-on-neon or a faint muted grey that dips under 4.5:1. ── VARIABLES (choose one of each that fits my brand, then commit) ── • ACCENT PAIR — the canvas and card surfaces stay a cinematic dark (a midnight base near #0B0A14 with deep plum panels near #15131F, warm off-white text, dusty-lavender muted text). Onto that, bring MY two brand accents — a hotter "active/top card" color and a cooler "waiting underneath" color that read as a pair pressing over each other. Keep them saturated and neon-bright against the dark. If I give no brand colors, choose a pair (examples, not required: neon magenta & neon cyan · electric coral & teal · violet & lime · amber & sky-blue). Whatever the pair, it always sits on the dark midnight ground, never on white. • TYPE — one blocky, card-like display face + one clean body face, via Google Fonts. Display, pick one: Unbounded · Space Grotesk 700 · Clash Display · Archivo Expanded. Body, pick one: Inter · DM Sans · IBM Plex Sans. • LAYOUT COMPOSITION — choose one deck feel and commit: full-bleed cards that each fill the viewport and press edge-to-edge; slightly-inset cards with a visible offset stagger so the deck edge shows beneath the top card; a split card (bold statement one side, supporting media the other) repeated down the stack; or a mixed deck where a few tall statement cards alternate with shorter grid-of-detail cards. Also settle on your own opening composition, seam-shadow depth, and card padding. ── MEDIA MODEL (opaque cards, real content) ── Build most of each card from confident type, solid color blocks, and clear layout on the opaque surface. Where the business genuinely needs a photo (a product, a space, the team), place it INSIDE the card as a solid, fully opaque image that sits flat on the card — never a translucent wash, never bleeding blurrily behind the text. Use a real placeholder <img> where a planned photo goes. Generate imagery appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; walk a first-time visitor through the value one certain beat at a time — each card advancing the argument; reduce risk with real proof (results, credentials, client names, guarantees — whatever is true); and drive one clear next step — an enquiry, a booking, a quote, a call. Let the business and its brief decide which cards serve that goal, deal exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — a deck of cards that each carry one clear job and move a stranger from understanding to trust to action. Include working navigation and a footer. • Don't be lazy with any card: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full press-and-cover treatment. If a card only serves the style, cut it; if a card serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — clear, confident, sequenced so each card lands one idea. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY card. On mobile, keep the pin-and-press deck feel (or the reduced-motion static stack) with the opaque cards and hard seam intact. • Apply the chosen accents, type, and deck composition to EVERY card, not just the opening.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the SCROLL-STACK look — the pin-and-press card deck of Apple's feature pages and Corey Ginnivan's site: each section becomes a solid, fully opaque card that pins in the viewport, then the next section slides up from the bottom and presses over it like a hand laying the next card flat on a pile. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language and the way sections transition. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand hues — carry my existing brand colors into the scheme rather than swapping in new ones. Set them as the two neon accents (a hotter "top card" color and a cooler "underneath" color) glowing against a cinematic dark canvas (a midnight base near #0B0A14, deep plum panels near #15131F, warm off-white text, dusty-lavender muted text). Then make one TYPE choice and COMMIT — a blocky card-like display + a clean body face that suit my brand. ── INVARIANTS (never break these) ── • Turn each of my existing sections into ONE flat card that pins in the viewport (position: sticky, or GSAP ScrollTrigger's pin) for a fixed scroll distance, then let the next section press up over it until fully covered. Mark the exact landing line with a hard drop-shadow or bright neon-edge seam — a clean cut, never a blend or dissolve. • Every card is FULLY OPAQUE — a single solid surface. Strip every transparency, blur, frosted-glass panel, and soft depth gradient; each section stays a solid card that covers the one before it. • One card, one idea — keep my sections one-per-card; don't merge two of my sections onto a single panel or split one across two. • Put everything on the midnight canvas so the accent-colored cards glow against it. Preserve which brand color means what; just set them as the pressing pair on the dark. • Motion becomes PRESS — a lay-down press per section (optionally a small scale/offset that snaps to full size on pin). Remove every soft fade, slow drift, and parallax float. Honor prefers-reduced-motion by collapsing to a plain static stack (no scroll-jacking) and never leave a section stuck invisible; keep content visible without JavaScript. • Never: translucency, blur, frosted glass, soft drifting depth gradients, or a transition that blends/dissolves instead of cutting hard at the seam. ── TYPE (pick one pairing to suit my brand, then commit) ── One blocky card-like display (Unbounded · Space Grotesk 700 · Clash Display · Archivo Expanded) + one clean body (Inter · DM Sans · IBM Plex Sans), loaded via Google Fonts. Place any existing image SOLID and opaque on its card — never a translucent wash, never blurred behind text, never bleeding through the seam. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every card (≥4.5:1 body, ≥3:1 large; pick the ink from each card's ACTUAL surface: warm off-white on the dark cards and canvas, near-black on any bright accent card; NEVER low-contrast neon-on-neon or faint muted grey). Restyle what already exists so every section becomes an opaque card in the press-and-cover deck — same content, new mechanic.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the SCROLL-STACK style — the pin-and-press card deck of Apple's feature pages and Corey Ginnivan's site: a solid, fully opaque card that pins in the viewport as you scroll, ready for the next card to press up over it. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — an opening statement card, a single feature reveal, a pricing tier, a project showcase card, a call-to-action. If I don't name one, build a bold opening statement card for a plausible business you invent that suits a confident, sequenced walkthrough. Whatever the section, build it as one card that carries exactly ONE idea, fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • One flat, FULLY OPAQUE card on a cinematic dark canvas — a single solid surface, no transparency, no blur, no frosted glass, no soft depth gradient. The card pins in the viewport (position: sticky, or GSAP ScrollTrigger's pin) and is built so the next card would press up and cover it with a hard drop-shadow / neon-edge seam — a clean cut, never a blend. One card, one idea. • Motion is PRESS — a lay-down press (optionally a small scale/offset that snaps to full size on pin). No soft fades, no drift, no parallax float; content visible without JavaScript, honoring prefers-reduced-motion (collapse to a static card, no scroll-jacking). • Never: translucency, blur, glassy surfaces, soft drifting depth gradients, or a blend/dissolve transition instead of a hard seam. ── VARIABLES (pick one of each, commit) ── • ACCENT PAIR — the card and canvas stay a cinematic dark (midnight base near #0B0A14, deep plum panel near #15131F, warm off-white text, dusty-lavender muted). Bring my two brand accents if I give them — a hotter "top card" color and a cooler "underneath" color; otherwise choose a pair (examples, not required: neon magenta & neon cyan · electric coral & teal · violet & lime · amber & sky-blue). Keep them saturated and glowing against the dark, never on white. • TYPE — one blocky card-like display (Unbounded / Space Grotesk 700 / Clash Display / Archivo Expanded) + one clean body face (Inter / DM Sans / IBM Plex Sans), via Google Fonts. Build the card from confident type and solid color blocks on the opaque surface. If the section genuinely needs an image, place a real placeholder <img> SOLID and opaque on the card — never a fake colored div standing in for a photo, never a translucent wash, never blurred behind the text. Include a clear primary button where the section's job calls for one. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): pick the ink from the actual surface (warm off-white on the dark card, near-black on a bright accent fill), never low-contrast neon-on-neon or faint grey. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude