Page Anatomy — Premium Product Vision Launch (Overlay exemplar)

Scroll evidence: scroll-000.png through scroll-100.png (11 frames, 0%–100% of 8314px total page height). Viewport: 1440×900px.

---

Section 1 — Navigation Bar

Position: Fixed top, full-width
Layout: Three-zone horizontal bar. Left: wordmark "OVERLAY" in Roboto Flex, light weight, small caps tracking. Center: single nav link "CAREERS" in uppercase spaced Roboto Flex. Right: pill CTA "GET IN TOUCH →" — white pill, navy text, small circle icon at right.
Visual: Transparent over the hero gradient on load. No background fill observed. Minimal — only three elements total.
Conversion rationale: Intentionally sparse nav eliminates exit paths. Only two destinations: a career link (secondary) and a "get in touch" CTA. No product pages, no blog links — this is a pre-launch page with nowhere to go except down the scroll funnel.

---

Section 2 — Hero

Position: Viewport-height opening panel (scroll-000.png)
Layout: Centered single column. Headline centered over a large portrait photograph. Email capture form centered below headline.
Visual: Background is a full-bleed gradient wash — lavender fading to dusty rose to near-white — covering the upper two-thirds of the viewport. A high-quality photographic portrait of a woman (eyes closed, neutral expression, perfect skin) bleeds from the gradient into a near-white ground. The face is cropped just above forehead, cutting off mid-neck. The effect is the face emerging from the gradient rather than sitting on it.
Headline: "The Future of / Beauty is Automated" — PP Editorial Old, approximately 96px, two lines, centered. Deep navy color. High-contrast against the light gradient.
Form: Inline email capture: borderless white pill input field + arrow submit button, centered below headline. Label text "Subscribe to our newsletter" in small light sans-serif above or inside the field.
Conversion rationale: Lead capture placed above the fold, immediately after the value statement. No product image — the face IS the product promise (beautiful skin = outcome). The gradient creates visual warmth without requiring any product photography.

---

Section 3 — Feature Icon Grid (Curved Arc Layout)

Position: Immediately below hero, appears as the portrait photograph continues downward (scroll-010.png)
Layout: The portrait continues to grow as the user scrolls — the head/face fills most of the upper half of the frame. Below the chin, four feature callouts are arranged in a horizontal arc following the implied curve of the shoulders/collarbone. Callouts are connected by a fine curved line graphic.
Content: Four items with small icon + all-caps label + one-line body copy:

• FULL-STACK INNOVATION / Hardware + AI-powered software
• DAILY RITUAL REIMAGINED / Save time, unlock pro-level results
• BEAUTY + TECH / Premium industrial design meets personalization
• SAFE & EFFORTLESS / Designed for the face, built with care
  Visual: Icons are small (16-20px), navy. Label text: Roboto Flex, uppercase, ~11px, wide tracking. Body copy: Roboto Flex, light, ~13px, muted lavender-grey. The arc layout is a signature design choice — it mirrors the circular/curved product form language.
  Conversion rationale: Addresses the four primary objections to a novel consumer hardware product (it works / it fits my life / it looks good / it's safe) in a single visual pass. Positioned while the portrait is still visible, tying claims to the aspirational face.

---

Section 4 — Vision Section: Historical Art Gallery

Position: ~20% scroll (scroll-020.png)
Layout: Full-width on a near-white ground. Five illustrated/painted portrait cards arranged in a shallow arc/fan across the horizontal. Cards are portrait-oriented, soft-rounded corners, each showing a painted or illustrated woman applying makeup across different historical eras. Cards are slightly angled (2-5° rotation) for organic feel. Small section badge "OUR VISION" in pill shape above.
Below cards: Overlay brand icon (4-pointed star/cross) centered. Then the pull-quote headline in PP Editorial Old: "The daily ritual of applying makeup has remained a manual process for centuries, until now" — with "until now" partially obscured/revealed as if by scroll animation (scroll-020 shows it blurred/struck-through, scroll-030 shows it clearly).
Visual: Cards have a painterly, dreamy quality — not photographs. They evoke classical portraiture filtered through a soft, modern aesthetic. Card edges fade into the background.
Conversion rationale: Contextualizes the product category historically before introducing the technology. Creates a "setup" moment — hundreds of years of the same behavior, now changing. The cross-cultural representation (Black, Asian, European subjects) signals inclusivity.

---

Section 5 — Vision Pull-Quote with Iridescent Wave

Position: ~30-40% scroll (scroll-030.png, scroll-040.png)
Layout: Centered single column. The iridescent gradient wave graphic fills the horizontal band — a pixelated/blurred smooth wave in peach-pink-lavender-mint. Below it, quotation mark glyph (") in navy, then the pull-quote: "As AI moves from pixels to atoms, a new era of consumer robotics in personal care begins."
Visual: The wave graphic has a distinct aesthetic — pastel holographic, slightly blurred/pixelated, full-width but not full-height. It suggests a sound wave or fluid surface. The pixelated quality could be intentional (grid overlay) or a compression artifact; the grid pattern is visible at scroll-030 and scroll-040.
Section label: "OUR VISION" pill badge at top.
Conversion rationale: Positions the brand within a larger technological narrative (AI, robotics, consumer hardware). The rhetorical move is from beauty category to technology category — appeals to early adopters and tech-forward audiences.

---

Section 6 — Product Teaser Cards (Three-Panel Reveal)

Position: ~50% scroll (scroll-050.png, scroll-060.png)
Layout: Three panel cards arranged horizontally, centered on the page. Left card: portrait-crop photograph of a face (brown skin, neutral expression, eyes closed — similar treatment to hero). Center card: white grid-paper rectangle — a placeholder or schematic/technical drawing aesthetic. Right card: iridescent gradient blurred rectangle — same holographic palette as the wave above.
Below panels: Overlay brand icon + centered headline: "We are creating a beauty filter and self-expression engine for the real world."
Visual: The three-panel arrangement teases the product without showing it directly — face (user), schematic (engineering), gradient (the "magic"/software layer). The white grid card is notable: it reads as a technical blueprint or empty canvas, reinforcing precision/engineering credibility.
Conversion rationale: Bridges vision/narrative section to the product explanation section below. The phrase "for the real world" contrasts digital beauty filters (AR, Instagram) with the physical product promise.

---

Section 7 — How It Works (Three-Step Process)

Position: ~60-70% scroll (scroll-070.png)
Layout: Full-width section. Section badge "HOW IT WORKS" pill at top. Large display headline "Overlay is an intelligent, personalized makeup experience" in PP Editorial Old ~80-96px, centered. Below the headline, a horizontal three-step process bar: numbered badges (01, 02, 03 in rounded square outlines) connected by a horizontal rule, with step titles in uppercase Roboto Flex and body copy beneath each.
Steps:

• 01 PREVIEW & SELECT — "Browse an infinite marketplace of makeup looks or generate your own"
• 02 PERSONALIZE — "Fine-tune preferences based on your skin tone, occasion, or mood"
• 03 SYNC & APPLY — "Send your selected look directly to the device for automatic, real-time application"
  Below steps: A contained rounded-rectangle card with gradient background (lavender-to-pink), titled "Makeup looks / Select makeup look and try it on" — showing three cropped eye/face photographs arranged as stacked cards within it.
  Visual: Clean three-column layout. Active step (01) has full navy text; inactive steps (02, 03) appear in lighter grey — suggesting an interactive or animated tab behavior. The horizontal rule connecting the three steps uses a dark line for 01→02 and a light line for 02→03.
  Lottie assets (step02.json, step03.json) loaded here: The step illustrations are animated JSON — the Lottie files correspond to steps 02 and 03 of this process diagram.
  Conversion rationale: Reduces complexity to three steps. Step 03 ("SYNC & APPLY") is where the product magic happens — positioned last to build anticipation. The numbered progression creates a sense of completion/simplicity.

---

Section 8 — Makeup Looks Carousel

Position: ~80% scroll (scroll-080.png, scroll-090.png)
Layout: Full-width. Section badge "OVERLAY IN ACTION" pill. Centered body copy: "Each look is calibrated to your unique facial geometry, skin tone, and vibe using cutting-edge computer vision and precision robotics." Below: a horizontal scrolling gallery of close-cropped face/eye photographs — approximately 6-8 cards visible, each showing different skin tones, makeup styles, and moods.
Visual: Gallery cards are equal-width portrait crops showing only the eye/cheek/lip zone of diverse faces. No white space between cards — edge-to-edge horizontal strip. This is the GSAP Draggable + InertiaPlugin element: the gallery is a momentum-drag carousel.
Conversion rationale: Social proof via diversity of output — the product works on all skin tones and produces varied aesthetics. The draggable gallery invites interaction, increasing engagement time before the final CTA.

---

Section 9 — Footer CTA (Dual-Panel)

Position: ~100% scroll (scroll-100.png)
Layout: Two equal-width rounded-rectangle panels side by side, full-width with small gap between them. Both panels have gradient backgrounds (lavender-to-rose-to-peach-to-mint). Left panel: eyebrow "WANT TO FOLLOW OUR JOURNEY?" + large serif headline "Subscribe to our updates" + inline email input with arrow submit + social icons (X/Twitter, Instagram). Right panel: eyebrow "INTERESTED IN WORKING WITH US?" + large serif headline / email address "hello@overlay.com" as a clickable CTA.
Footer bar below panels: "OVERLAY ROBOTS, INC. © 2026" left-aligned; "PRIVACY" center; "TERMS" right-aligned. Minimal.
Visual: The two panels create a visual decision point — follow us (newsletter) vs. contact us (B2B/press/partnerships). Both use the same gradient language as the hero, bookending the page with the same color treatment.
Conversion rationale: The primary CTA (newsletter) is reinforced at the bottom for users who scrolled without converting at the hero. The secondary panel (email contact) captures enterprise/partnership interest without needing a separate page. The gradient panels signal warmth and are visually distinct from the cool-white body of the page.