Lumière

Sobre Este Template

Lumière es un portfolio de cinematografía y producción audiovisual. Doce páginas cubren home, índice de films filtrable, páginas de detalle por film, director, proceso, servicios, equipo técnico, premios, journal, artículo, contacto y 404, más un endpoint de RSS. El hero es un proyector: un wrapper de 220vh contiene un viewport sticky donde un ScrollTrigger con scrub recorre cinco frames, haciendo cross-fade de cada uno en 0.15s, cambiando el titular y disparando un micro-jitter aleatorio de ±3px y ±0.3° en cada cambio de frame — con tiras de perforación haciendo parallax en ambos bordes, barras letterbox y viñeteado. Un overlay animado de grano fractalNoise cubre todo el sitio al 4% de opacidad, y tres skins de color (Nitrate, Celluloid, Cinéma Vérité) cambian la paleta mediante un atributo data-skin.

Firma

El hero de la home se comporta como la ventanilla de un proyector. Un wrapper de 220vh fija un viewport a pantalla completa mientras un ScrollTrigger con scrub recorre cinco frames: cada transición hace cross-fade de la imagen en 0.15s, cambia el titular y dispara un micro-jitter aleatorio — hasta 3px de deriva en x/y y 0.3° de rotación — para que la imagen nunca quede perfectamente quieta. Las tiras de perforación se desplazan -40px por ambos bordes con el scroll, las barras letterbox recortan el encuadre y el overlay de grano fractalNoise de todo el sitio remata la ilusión de celuloide.

Características

• 12 páginas — Inicio, Índice de Films, Detalle de Film, Director, Proceso, Servicios, Equipo técnico, Premios, Journal, Post, Contacto, 404
• Hero de rollo de película — wrapper de 220vh con viewport sticky de 100vh donde un ScrollTrigger con scrub avanza por 5 frames, con cross-fade de 0.15s y cambio de titular en cada uno
• Micro-jitter de proyector — cada cambio de frame dispara un yoyo aleatorio de ±3px en x/y y ±0.3° de rotación, para que la imagen salte como película real
• Tiras de perforación con parallax de -40px en ambos bordes, más barras letterbox y overlay de viñeteado
• Grano de película animado — fractalNoise SVG al 4% de opacidad en mix-blend-mode overlay, desplazado en un loop de 8s con steps(1)
• Reveal línea a línea con GSAP SplitText en la cita del statement del director
• Grid de films con filtros por categoría — narrative, commercial, music video, documentary y short
• Páginas de detalle con sinopsis, embed de vídeo opcional, galería de stills, créditos completos (director, DP, montaje) y lista de premios por film
• Página de premios — 15 entradas de festivales agrupadas por año (Sundance, Cannes, SXSW, BAFTA, Academy Awards) con estados de premio/nominación y 3 pull-quotes de prensa
• Página de equipo — acordeón de 4 categorías (cámaras, ópticas, soporte, iluminación) con listas reales que incluyen ALEXA 35, Master Primes y SkyPanel
• Página de proceso en 5 pasos y marquee infinito de festivales con GSAP (SXSW, Sundance, Cannes, Venecia, Berlín…)
• 2 colecciones tipadas con Zod — films (6 entradas con créditos, stills y premios) y journal (4 artículos)
• 3 skins de color mediante un atributo data-skin — Nitrate (#090909/#F2B830), Celluloid (#F4EFE6/#C4891A), Cinéma Vérité (#0A0C10/#5B9BD5) — con un script inline sin FOUC que restaura el skin guardado desde localStorage al cargar
• Feed RSS con @astrojs/rss, sitemap con reglas propias de changefreq/priority, JSON-LD en todas las páginas (base WebSite más esquema propio en las páginas de detalle de film y journal) y prerender con speculation rules
• Pensado para performance — WebP en build con getImage (frames del hero a 1920px y calidad 60), content-visibility en secciones fuera de pantalla, carga eager con fetchpriority en el primer frame y lazy en el resto
• Reveals de blur/translate con IntersectionObserver, skip link, fallbacks de prefers-reduced-motion, smooth scroll con Lenis + Astro View Transitions

Despliegue