cinematographic-websites

Cinematographic Websites

Treat the page as a directed sequence, not as a set of effects. Every movement must control attention, reveal information or establish atmosphere.

Non-negotiable rules

• Use Lenis as the single smooth scroll layer.
• Use GSAP for all movement and ScrollTrigger for all scroll-linked animation.
• Do not mix Framer Motion, reveal libraries, CSS smooth scroll or any other animation engine.
• Entrances and exits last at least 0.6s. Prefer 0.8–1.4s for important reveals.
• Use only eases from the power3 or expofamilies. The default entrance is power3.out.
• In editorial sequences, use stagger: 0.2.
• Cinematic movement is slow with intention, never slow from lack of response.
• Preserve the existing stack, patterns and architecture. Install only missing dependencies.
• Respect prefers-reduced-motion; accessibility is the only exception to the movement rules.

Before implementing

1. Inspect the existing structure, stack, styles and animations.
2. Define in a few lines:
   • the central idea and the emotion of the experience;
   • the narrative role of each section;
   • a memorable visual signature;
   • the rhythm: tension, revelation, sustain and transition.
3. Choose typography, scale, framing, color and movement from the real subject. Avoid the generic “premium site” aesthetic.
4. Organize the page as scenes. Each scene must have a focal point and a reason to exist.
5. Only then implement.

Movement system

Responsibilities

• Lenis controls the feel and progression of the scroll.
• GSAP controls timelines, transforms, opacity, masks and states.
• ScrollTrigger connects the timelines to the scroll position, including pin, scrub and callbacks.
• Register plugins only once and initialize everything only on the client when the stack has SSR.
• Sync Lenis with the GSAP ticker and notify ScrollTrigger.update on every scroll.
• Recalculate triggers after fonts, media or asynchronous layout change dimensions.
• Clean up timelines, triggers, listeners and the Lenis instance in the appropriate lifecycle.

Rhythm

• Create a perceptible pause before the first important reveal. Tension comes from expectation, not from artificial loaders.
• Use overlap between animations for continuity; avoid a mechanical queue of isolated effects.
• Default entrance: power3.out.
• Broad movement or scene change: expo.inOut or power3.inOut.
• Exit: never below 0.6s.
• Sequence of elements: 0.2s between items, unless the content requires slower reading.
• In scrub mode, make the displacement feel like camera mass and inertia, without jumps.
• Do not use bounce, elastic, back, extravagant eases, or parallax on everything.

Properties

• Animate primarily transform, opacity, clip-path and masks.
• Avoid animating properties that recalculate layout, such as top, left, width and height.
• Use depth with scale, translation, subtle blur, and speed difference; do not rely only on fade-up.
• Apply will-change only during relevant animations, not globally.
• Ensure the final state is correct even if JavaScript fails or the animation is disabled.

Cinematic hero

“Create a fullscreen hero with a looping background video, large text revealed with GSAP, and a scroll indicator that disappears on scroll. Typography must create tension before the first word appears.”

When applying:

• Make the hero occupy the real viewport, accounting for mobile bars.
• Use decorative video with autoplay, muted, loop and playsinline, plus poster and visual fallback.
• Preserve readability with framing and contrast, not with heavy generic overlays.
• Reveal the title by lines or words using masks, without breaking the semantic text for screen readers.
• Hold the first frame long enough to create tension and then reveal it in a coordinated timeline.
• Make the scroll indicator disappear progressively after the user starts scrolling.
• Do not autoplay audio.

Cinematic pin scroll

“Create a section with pin scroll using ScrollTrigger. Elements enter in sequence with 0.2s timing between each one. Use ease power3.out. The scroll must feel camera-controlled.”

When applying:

• Use a main timeline for the scene, with a single ScrollTrigger whenever possible.
• Pin only as long as necessary to present the narrative; excessive pinning makes the page feel stuck.
• Size the scroll distance by the number and duration of narrative beats.
• Use scrub smoothed to create camera weight, without removing user control.
• Animate the elements in sequence with stagger: 0.2 and ease: "power3.out".
• Maintain visual continuity between entrance, sustain, and exit.
• Review on mobile: reduce displacements, adapt or remove the pin when the viewport cannot accommodate the scene.

Art direction

• The hero is the visual thesis of the experience.
• Typography is the protagonist: choose families with personality, expressive scale, and contrast of roles.
• Use real or subject-specific content; lorem ipsum and vague slogans destroy immersion.
• Choose one dominant visual gesture and keep the rest disciplined.
• Use asymmetry, negative space, crop, editorial rhythm, and purposeful overlap.
• Do not automatically turn “cinematic” into a black background, serif font, and grain.
• Do not use cards, pills, gradients or glow as visual fillers unrelated to the concept.
• Preserve navigation, hierarchy, visible focus and comfortable reading at all widths.

Responsiveness and accessibility

• On prefers-reduced-motion: reduce, disable smooth scroll, prolonged pin, scrub and large displacements; keep content visible and navigation immediate.
• Never rely solely on animation to communicate state or meaning.
• Ensure keyboard, visible focus, contrast and coherent reading order.
• Pause video when it is outside the viewport or when the page becomes hidden, if the stack allows it.
• Offer a poster/fallback for data savings, autoplay failure and limited devices.
• Do not apply smooth scroll to internal controls, modals or areas that need native scroll.

Performance

• Compress videos and images, provide appropriate formats and sizes, and avoid aggressive preloading of non-critical media.
• Avoid multiple simultaneous videos, heavy filters over large areas and layers promoted unnecessarily.
• Batch layout reads and writes. Do not query geometry every frame if ScrollTrigger can calculate it.
• Test with reduced CPU and on mobile viewport; a powerful desktop is not a sufficient reference.
• Do not sacrifice LCP, interaction or visual stability for an intro.

Review flow

“Review all animations in the project. Anything that enters or exits in less than 0.6s, increase it. Any ease that is not power3 or expo, replace it. Cinematic sites are slow with intention.”

When reviewing:

1. Catalogue timelines, tweens, CSS transitions and motion libraries.
2. Remove competing engines and concentrate motion in GSAP.
3. Migrate scroll behavior to Lenis + ScrollTrigger.
4. Increase every entry or exit below 0.6s.
5. Replace any ease outside power3 and expo.
6. Normalize editorial sequences to stagger: 0.2.
7. Look for content flashes, duplicate triggers, leaks and missing cleanup.
8. Check reduced motion, keyboard, mobile and no-JavaScript states.
9. Review the complete rhythm of the page, not just each tween in isolation.
10. Visually validate the beginning, middle and end of each scene at different viewports.

Completion criteria

• The experience has a specific visual idea, not a “cinematic” preset.
• Scroll and timelines are synchronized without jitter.
• No entry or exit lasts less than 0.6s.
• All eases belong to power3 or expo.
• Sequences use a range of 0.2s when applicable.
• Hero, pin and transitions work on desktop and mobile.
• Reduced motion presents all content without blockages.
• There are no orphan triggers, duplicate listeners or animations after unmount.
• Video has a poster/fallback and does not compromise readability or loading.
• The result was inspected in motion; correct code without visual review is not enough.