Lumière

About This Template

Lumière is a cinematography and film-production portfolio. Twelve pages cover home, a filterable films index, per-film detail pages, director, process, services, equipment, awards, journal, article, contact and 404, plus an RSS feed endpoint. The hero is a projector: a 220vh wrapper holds a sticky viewport where a scrubbed ScrollTrigger steps through five frames, cross-fading each one in 0.15s, swapping the headline, and firing a random micro-jitter of ±3px and ±0.3° on every frame change — with sprocket perforation strips parallaxing down both edges, letterbox bars and a vignette. An animated fractalNoise grain overlay sits above the whole site at 4% opacity, and three colour skins (Nitrate, Celluloid, Cinéma Vérité) swap the palette through a data-skin attribute.

Signature

The homepage hero behaves like a projector gate. A 220vh wrapper pins a full-screen viewport while a scrubbed ScrollTrigger walks through five frames: each transition cross-fades the image in 0.15s, swaps the headline, and fires a randomised micro-jitter — up to 3px of x/y drift and 0.3° of rotation — so the picture never sits perfectly still. Sprocket perforation strips shift -40px down both edges as you scroll, letterbox bars crop the frame, and the site-wide fractalNoise grain overlay finishes the celluloid illusion.

Features

• 12 pages — Home, Films index, Film detail, Director, Process, Services, Equipment, Awards, Journal, Journal post, Contact, 404
• Film-reel hero — a 220vh wrapper with a sticky 100vh viewport where a scrubbed ScrollTrigger advances through 5 frames, cross-fading each in 0.15s and swapping the headline with it
• Projector micro-jitter — every frame change fires a randomised ±3px x/y and ±0.3° rotation yoyo, so the image gates like real film
• Sprocket perforation strips parallaxing -40px down both edges, plus letterbox bars and a vignette overlay
• Animated film grain — SVG fractalNoise at 4% opacity in mix-blend-mode overlay, shifted on an 8s steps(1) loop
• GSAP SplitText line-by-line reveal on the director's statement quote
• Films grid with category filters — narrative, commercial, music video, documentary and short
• Film detail pages with synopsis, optional video embed, still gallery, full credits (director, DP, editor) and per-film award list
• Awards page — 15 festival entries grouped by year (Sundance, Cannes, SXSW, BAFTA, Academy Awards) with win/nomination states and 3 press pull-quotes
• Equipment page — accordion of 4 categories (cameras, lenses, support, lighting) with real gear lists including ALEXA 35, Master Primes and SkyPanel
• 5-step process page and an infinite GSAP festival marquee (SXSW, Sundance, Cannes, Venice, Berlin…)
• 2 Zod-typed content collections — films (6 entries with credits, stills and awards) and journal (4 articles)
• 3 colour skins driven by a data-skin attribute — Nitrate (#090909/#F2B830), Celluloid (#F4EFE6/#C4891A), Cinéma Vérité (#0A0C10/#5B9BD5) — with an inline no-FOUC script that restores the saved skin from localStorage on load
• RSS feed via @astrojs/rss, sitemap with custom changefreq/priority rules, JSON-LD on every page (WebSite base plus per-entry schema on film and journal detail pages) and speculation-rules prerendering
• Performance-minded — build-time WebP via getImage (hero frames at 1920px / quality 60), content-visibility on off-screen sections, eager + fetchpriority on the first frame and lazy loading on the rest
• IntersectionObserver blur/translate reveals, skip link, prefers-reduced-motion fallbacks, Lenis smooth scroll + Astro View Transitions

Deployment