Marketing Pages

Marketing Pages

A marketing page is read once by someone who did not ask to be there, which inverts most product-UI defaults: the animation budget goes up, the information density goes down, and the page proves one claim instead of exposing every capability. Default to a short page — one claim, one primary CTA repeated verbatim, evidence beside each promise rather than pooled at the bottom. The larger motion budget is an allowance, not a licence: anything that moves without the visitor causing it reads as the page performing at them while they are trying to decide. This skill builds one page inside a system it does not own — if the open question is which accent, typeface, illustration voice, or tone the page speaks in, that is brand-identity; here those are already decided and only arranged.

Detect the stack before writing a line. Read how the project already builds pages — framework and rendering mode (static export, ISR, server components), styling system (Tailwind, CSS Modules, custom properties, CSS-in-JS), the existing section and container components, and the animation library if one is present. Write the page in that system. A landing page is the most common place a parallel styling layer or a second animation library gets bolted on, and it is never justified: if the project ships CSS transitions, the hero does not import a motion library for one fade.

Quick Reference

Core Principles

1. Motion still has to map to user input. No scroll-triggered fade-ups, no scroll hijacking, no auto-advancing carousel, no parallax that is not 1:1 with scroll position. Motion the visitor did not cause reads as a performance, and a self-advancing carousel moves the thing being read. Exception: a reveal scrubbed by scroll position — reversible, running backwards when you scroll up — is direct manipulation, not a trigger, and is allowed.
2. Spend the extra animation budget on one sequence, not on every section. Product UI stays under 300ms (Emil Kowalski's duration table, whose only "can be longer" row is marketing/explanatory). One hero or explanatory sequence may run out to Benji Taylor's published --duration-swift: 800ms / cubic-bezier(.175,.885,.32,1.275). Note the live disagreement: Benji's snappy and swift curves overshoot past 1, Emil's three all settle — pick one family for the project and never mix them (see motion/references/techniques.md). Exception: anything clickable stays under the product ceiling. A CTA that takes 800ms to acknowledge a press is broken on any page type.
3. The intro animation plays once per session. Gate it on sessionStorage, not localStorage — a genuinely new visit should see it, an internal navigation should not. The page animates in once and then stops moving. Exception: under prefers-reduced-motion: reduce, skip the intro entirely, first visit included; reduced motion means gentler, not delayed.
4. The hero says what it is, who it is for, and shows it working. One claim sentence, one qualifying sentence, one primary CTA, one secondary escape hatch (docs, demo, pricing), and one piece of evidence that is the actual product — not an abstract gradient blob. Cropping, framing, and loading of that evidence belong to imagery. Exception: a pre-launch or waitlist page with nothing to show — there the email field is the hero.
5. One primary CTA, same verb every time it appears. "Get started" in the nav and "Try it free" in the footer read as two different offers. Ship 1 visually primary action per viewport, repeats identical in wording and destination. CTAs also read auth state: logged out gets Get Started, logged in gets Go to Dashboard — telling a signed-in user to sign up is a dead end. Exception: the pricing page, where each tier card carries its own primary and the hierarchy moves to the highlighted tier.
6. Proof goes next to the claim it proves. A "trusted by" band at the bottom proves nothing about a feature described three screens above it. Attach the logo, quote, or number to the section making the claim. Exception: a first-viewport logo wall earns its place only when the logos are recognizable to this specific reader; otherwise it reads as filler and belongs below the first feature section.
7. Ship 5-7 sections and cut the eighth (house default). Each extra section dilutes the one claim and pushes the closing CTA further away. A capability that cannot earn a section belongs in docs. Exception: developer tools, where a code block plus its output often needs one section per concept.
8. Everything a crawler or screen reader needs is in the DOM at rest. Hover-revealed nav submenus are visually hidden with aria-expanded on the trigger, never conditionally mounted — mount-on-hover markup does not exist for a crawler and cannot be reached by a keyboard. Exception: a menu large enough to bloat first paint may lazy-mount, but only behind a real <button>, with its links duplicated in the footer.
9. Pre-render, preload, and lock the space. Content pages are statically generated with revalidation (export const revalidate = 3600), never fetched at request time; fonts and the above-the-fold hero image are preloaded; headings get text-wrap: balance so no title strands a single word. Exception: per-visitor content (the auth-aware CTA, a live counter) hydrates on the client over pre-rendered markup — it does not make the page a request-time render.
10. Decorative illustrations built from DOM elements need a name and no pointer surface. Give them role="img" with an aria-label, plus user-select: none and pointer-events: none, or they get selected mid-drag and announced as a pile of empty divs. Exception: an interactive illustration keeps its pointer events, and then owes a keyboard path too.

Smell / Fix

Output Format

When proposing or reviewing a page, emit a section manifest before any code — one row per section, in scroll order:

A row with no claim is a section to cut. A row whose evidence reads "illustration" is a claim with no proof. Two primary CTAs with different wording is a defect, not a variant.

Checklist

• One claim, stated in the hero in one sentence, with the product visible
• 5-7 sections, each with a claim and its own evidence
• One primary CTA, identical wording and destination everywhere it repeats
• CTA copy and href switch on auth state
• No scroll-triggered reveals, scroll hijacking, non-1:1 parallax, or auto-advancing carousel
• One curve family across the page; no clickable element animates over 300ms
• Intro animation gated on sessionStorage and skipped under prefers-reduced-motion
• Statically generated with revalidation; fonts and hero image preloaded; no layout shift
• Nav submenu markup present in the DOM when closed, aria-expanded on the trigger
• text-wrap: balance on headings; code-built illustrations have aria-label, user-select: none, pointer-events: none
• Pricing, if present, reviewed against pricing-and-conversion.md