Modern Frontend Cinematic Scroll

Cinematic Scroll

The router opens this file when the brief calls for the product or brand to be the story of the page. If the brief is closer to "show me what the product does in working surfaces", the router routes to motion-bento instead.

Brief — when this direction fires

This direction handles work where:

• The page is a film translated to scroll. Scenes build in sequence.
• The product, the place, or the artisan is the named protagonist.
• The brand wants to be felt, not described.
• Conversion is a secondary outcome of falling in love with the brand.

Typical briefs: a hardware launch (camera, watch, audio interface), an agency case study, a heritage brand site, a launch campaign for a single artifact, a product story for a brand that values making over selling.

If the brief is closer to "show feature X with cards and metrics", go to motion-bento. If the brief is closer to "publication with image sequencing", go to publication.

Calibration

User overrides any dial inline. Defaults assume an Awwwards-grade landing brief.

Three signature moves

The three moves that make a page recognizably cinematic-scroll. Use all three. If you cannot, the brief probably belongs in another direction.

1. The asymmetric masthead

Open with a 12-column grid where the title occupies tracks 3–11 in oversized italic display, and a smaller anchor element (year, number, brand mark) sits in tracks 1–2 as counterweight. A short editorial deck lands in tracks 8–11 below the title. A structured meta row (dates, locations, specs) sits along the bottom hairline of the hero.

The hero must read as one composed scene at first glance — the user should know within 0.5 seconds what kind of page this is.

2. Three-act narrative pacing

Every scroll has a structure:

Section comments in the source code should name the act each section belongs to. If a section's motion contradicts its act, rework or cut.

3. The image-mask reveal

Cinematic comes from how images arrive. Use clip-path inset wipes paired with slow inner-image scale (1.15 → 1.0) over 1.4–1.8s. Trigger at 80–85% viewport. The result reads as cinema settling into the page.

See ../components/gsap-patterns.md § image-mask-on-scroll for the canonical recipe.

Materials

Typography

• Display family: an italic serif (Fraunces, Instrument Serif, Cormorant Garamond) for romantic / heritage / craft brands; OR a bold display sans (Syne, Clash Display, Cabinet Grotesk) for harder / contemporary edges.
• Body family: Geist, Satoshi, DM Sans, Manrope. Pair with the display deliberately — never by reflex.
• Mono: Geist Mono / JetBrains Mono for metadata, build numbers, specs.
• Hero size: clamp(3rem, 12vw, 14rem), leading 0.88, tracking -0.035em to -0.04em.
• Body measure: 58–66ch.
• Tabular numerals on any structured numeric field.
• Banned: Inter, Roboto, system sans as identity.

Color

• One palette per project. Hold to it.
• Backgrounds: warm noir, cream editorial, deep ocean, paper-and-ink, warm twilight.
• One accent only, saturation < 80%. Used structurally — links, primary CTA, focus rings, italic emphasis.
• Pure #000000 is banned. Tuned off-black only.

Layout

• Default asymmetric 12-column grid. Centered hero is banned at this calibration.
• Sticky margin rails for section indices (i., ii., iii.).
• Section padding clamp(6rem, 12vh, 12rem) — the page breathes between scenes.
• No card spam. Use image plates, framed media, split bands, structured negative space.

Surface

• Cards only when elevation communicates real hierarchy (e.g. the inventory bento).
• Shadows tinted to the page mood — warm palettes get warm shadows, never harsh black.
• Grain overlay on a fixed pointer-events-none pseudo-element, opacity 0.04–0.06.

Mandatory states

Loading skeletal (match section silhouette). Empty composed (suggests action). Error inline (next to source). Tactile on every button (active:scale-[0.97] + transition: transform 160ms var(--ease-out)).

Choreography

Motion is the heaviest in the pack here. Every animation passes through the decision framework in ../references/animation.md § 1 before being added.

Required choreography

• Hero entrance: split-char or split-line reveal, 25–40ms stagger, power4.out, completes in 1.2–1.4s.
• Section reveals: opacity + 40–60px translate-y, power3.out, 0.9–1.2s, triggered at 80–85% viewport.
• Image masks: see Three signature moves § 3.
• Marquee: scroll-velocity-aware (Lenis), linear easing for constant motion, large italic display, color-shifted accent words.
• Magnetic CTA: Framer useMotionValue or GSAP — never useState. Gated to (hover: hover) and (pointer: fine).

Smooth scroll

Lenis is appropriate for this direction. The exception is when the brief explicitly says conversion-critical or e-commerce — drop Lenis there and stay on native scroll.

Tooling separation

In single-file HTML output, GSAP-led. In React output, Framer Motion-led. Never GSAP + Framer Motion in the same component tree.

Accessibility

prefers-reduced-motion strips directional translates, scale changes, parallax. Keep color and opacity transitions. Custom cursor (if used at all) disables entirely on reduced motion.

Wrong-direction tells (slop specific to cinematic-scroll)

Beyond the pack-wide forbidden list at ../references/forbidden.md, avoid:

• Hero parallax over a flat gradient. Use real photography or rendered product.
• "Scrolltelling" with no actual story arc — the page must have something to say across the three acts.
• A bento grid in the hero position. Bento belongs to Act 2 showcase here.
• Three-equal product cards as a feature row. Use asymmetric arrangements (1 wide + 1 tall + 2 small).
• Generic dark-startup gradient hero with neon accent. This is the most-shipped slop hero.
• Tiny product screenshots the user cannot read.
• Custom cursor justified by "it feels cool" — only for editorial brands that genuinely call for it.
• Filler verbs in copy ("Elevate", "Seamless", "Unleash", "Revolutionize", "Next-Gen").
• Fake-round metrics ("99.99% uptime", "10,000+ customers"). Use organic values.
• Generic CTA copy ("Get Started", "Learn More"). The CTA must name what literally happens next.

What to push toward

• One named, specific protagonist in the hero — a person, a place, a year. "Maris & Co., Newport, since 1947" beats "Premium handcrafted goods".
• Real provenance in copy ("The cotton comes from a mill in Tewkesbury we have bought from since 1962").
• Mixed-precision data ("412 sq ft", "$4,239.71", "+1 (401) 847-2831"). Round numbers read as AI.
• A "house rule" or a quote from the founder somewhere on the page.
• An Act-3 CTA that names the specific next action ("Send a photograph and the rig dimensions if you have them. We will write back within two weeks.").

Reference artifact

../examples/cinematic-landing.html — Maris & Co., Newport sailmakers since 1947. Exercises this direction:

• Cream editorial palette with deep navy + faded crimson accents.
• Fraunces italic + Geist + Geist Mono.
• 12-column asymmetric masthead with offset oversized "47".
• Sticky letter from the third-generation principal (word-by-word reveal).
• Five-card asymmetric inventory bento with cloth-spec captions.
• Process ledger with sticky photograph and numbered rows.
• Deep-navy editorial quote section (line-by-line reveal).
• Magnetic commission CTA.
• Newspaper-style colophon footer.
• Three-act pacing baked into section comments.

Read for tone calibration. Each cinematic-scroll page should invent its own protagonist and its own world. Maris is one example, not a template.

Pack layers applied on every output in this direction:

• Universal craft: ../references/animation.md (Emil Kowalski canon), ../references/forbidden.md (slop filter + pre-flight).
• Component recipes: ../components/style-recipes.md § Cinematic Scroll → opens the matching GSAP, Framer Motion, Aceternity, and 21st.dev patterns.