landing

---
name: landing
description: Use when the user wants a premium single-page HTML landing page with GSAP scroll animations and mouse parallax built from a product pitch.
category: Marketing
version: 1.0.0
tools: []
---

# Landing — Premium HTML Landing Page Generator

Generate a polished, self-contained `.html` landing page from a text prompt or brief and return it as a single code block/artifact. The output is ONE HTML file: all CSS inline in `<style>`, all JS inline in `<script>`, with only Google Fonts and GSAP loaded via CDN. The page must be visually distinctive, animated, and production-quality — not generic boilerplate.

## Phase 0: Forcing Intake (4 questions, one at a time)

Ask in dependency order; stop after question 4 and generate — no further questions during generation.

**Q1 (root) — Product/Service.** "What's the product or service? Give me the name plus a 1–2 sentence elevator pitch — what does it do, who's it for?" This drives the headline, subtext, and feature copy: "app for productivity" produces generic boilerplate, "async standup tool for remote engineering teams who hate Zoom" produces a page that converts. If the user gives just a name with no pitch, push back once for what it does and who it's for; if still nothing, deliver with an explicit "generic positioning" caveat.

**Q2 (depends on Q1) — Audience Register.** Pick one: technical buyers (engineers, ops, security), business buyers (PMs, execs, ops leaders), consumers (general public, hobbyists), or internal (employees/partners, not for public sale). This dictates copy register, jargon level, social-proof choices, and CTA framing — technical buyers want specifics, consumers want benefits, internal pages can skip persuasion entirely. Force a choice.

**Q3 (always) — Brand Overrides.** Ask for brand colors/fonts to override the default dark-navy-plus-teal-plus-Inter look — primary HEX, accent HEX, optional background HEX — or "default." A brand-matched page feels native to the existing site even with just a primary-color override.

**Q4 (depends on Q1) — Tone.** Pick one: Professional (confident, restrained, B2B-friendly), Playful (warm, light, occasional humor), Authoritative (expert, data-forward, trust-building), or Minimal (terse, design-led, low copy density). Tone affects every sentence — headlines, microcopy, button text, closing copy — so lock it before writing. Recommended default: professional for technical/business audiences, playful for consumers, minimal for design-led products.

## Content Extraction

From the elevator pitch, derive: a hero headline (punchy version of "what it does," 8–12 words), hero subtext (who it's for plus the payoff, 1–2 sentences), 3–6 feature bullets distilled from pitch + audience + tone, action-oriented CTA text, and short emotive closing copy. When input is sparse, invent compelling content from the product-name semantics and audience register rather than stalling — flag inferred content with an inline `<!-- inferred: ... -->` comment in the HTML.

## Brand System

**Default palette (dark navy + teal):** navy `#0A1628`, navy-mid `#0D1F38`, teal `#00D4AA`, teal-glow `rgba(0,212,170,0.12)`, amber `#F5A623`, off-white `#F7F7F2`, text-muted `rgba(247,247,242,0.68)`, card-bg `rgba(0,212,170,0.06)`, card-border `rgba(0,212,170,0.15)`.

**Overrides:** substitute the user's primary/accent/bg/text HEX values into the `:root` block. If only a primary color is given, derive the rest algorithmically — lighten ~15% for the accent, darken ~8% for navy-mid, convert to rgba at 0.12 alpha for the glow — and check WCAG AA contrast on the result.

**Typography:** Inter via Google Fonts. Weight scale 400 body / 500 eyebrow / 600 links / 700 subtitle / 800 headings. Size scale: hero H1 68–82px, section H2 52–62px, card titles 22px, body 17–19px, eyebrow 13px uppercase letter-spaced, CTA button 18px at 500 weight.

**Required components:** `.btn-primary` (CTA with hover lift + brightness), `.feature-card` (hover lift `translateY(-6px)` + border brighten), `.eyebrow` (0.2em letter-spaced uppercase label).

## Section 1: Hero

Full viewport height (`min-height: 100vh`), flex-centered content: optional eyebrow label, H1 (68–82px/800), subtitle (17–19px, 1–2 sentences), CTA button, and an animated scroll-down chevron. Build three depth layers for mouse parallax: `.hero-shapes-back` (large blurred low-opacity circles), `.hero-shapes-mid` (smaller, sharper, higher-opacity shapes), and the content layer, which moves subtly in the same direction as the mouse.

## Section 2: Features

3-column grid by default, collapsing to 2 columns at 900px and 1 column at 580px. Each card: a 28px SVG icon stroked in the teal accent (no fill), a 22px/700 title, and 15–16px muted-color description. On hover: `translateY(-6px)`, border brightens to the teal accent, 0.3s ease transition.

## Section 3: Closing CTA

Full-width band on `navy-mid`, `padding: 120px 24px`, centered text: a large closing headline (52–62px/800), short muted subtext, and a CTA button sitting on a radial-gradient teal-glow behind it.

## Animation Patterns (5 required)

**1. Hero entrance (GSAP timeline).** Set every animated hero element's initial state with `gsap.set()` first — opacity 0, y 30 — to prevent a flash of unstyled content, then build a `gsap.timeline()` with `power3.out` easing that staggers the eyebrow, H1, subtitle, CTA, and scroll indicator in with overlapping offsets (e.g. `"-=0.3"`).

**2. Mouse parallax.** On `mousemove` over the hero, compute normalized x/y from cursor position relative to viewport center, then `gsap.to()` the back shapes at the largest offset multiplier, the mid shapes at roughly half that, and the content container at a much smaller multiplier — all with a short duration (~0.8s) for smoothness.

**3. Scroll-triggered feature cards.** Set initial state (`opacity: 0, y: 55, rotateX: 18`), then use `ScrollTrigger.batch()` on `.feature-card` with `start: "top 80%"` to animate each batch in with `opacity: 1, y: 0, rotateX: 0`, staggered ~0.11s apart, `power2.out` easing.

**4. Floating decorative shapes — CSS keyframes, not GSAP** (smoother and cheaper for indefinite ambient motion): several `@keyframes` variants translating and rotating slightly, each applied to a shape with a different duration so they don't sync.

**5. Scroll indicator** — a simple CSS `bounce` keyframe (translateY 0 → 8px → 0) on a 2s infinite loop.

## Dependencies and Constraints

Only external resources allowed: the Google Fonts Inter stylesheet, and GSAP core plus ScrollTrigger via CDN script tags. No other external CSS or JS files — everything else inline in the same HTML file.

**Layout rules:** container max-width 1200px centered; section padding `120px 24px`, scaling down on mobile; breakpoints at 900px (features 3-col → 2-col) and 580px (all grids → 1-col, H1 scales to ~52px); include the standard responsive viewport meta tag.

## Validation Checklist (apply before delivering)

All three required sections present (hero, features, closing CTA); Inter + GSAP + ScrollTrigger CDN tags present; every `gsap.set()` initial state precedes its corresponding timeline/animation (FOUC prevention); responsive breakpoints at 900px and 580px are implemented; no external stylesheet beyond Google Fonts; no external script beyond GSAP; viewport meta tag present; every animated element has an initial-state declaration.

## Error Handling

Sparse input (just a name) → invent content from semantics + audience register, flagged inline as inferred. Large or PDF source material → read it fully, don't truncate. Only one brand HEX given → use it as primary, derive the rest algorithmically. Feature count unspecified → default to 4. If validation fails on delivery → regenerate only the failing sections in a targeted pass, don't discard the whole page.

## Anti-Patterns to Reject

Hardcoded absolute file paths; a single brand palette applied without documenting the override; outlining extensively before writing (write in one pass); external CSS/JS files beyond the two permitted CDN dependencies; skipping `gsap.set()` initial states (causes FOUC); more than 6 features in the default grid (becomes unscannable); brand-specific content baked into the generation logic itself.

## Related Work

This produces a single self-contained HTML page optimized for visual impact with GSAP animation — distinct from a conversion-optimized, framework-componentized landing page. For lead-gen-first, framework-native landing pages, hand off to a dedicated landing-page-generator skill instead.