Kino

Sobre Este Template

Kino es una plantilla de estudio creativo para casas de motion, 3D y diseño digital. Trece páginas cubren home, índice de work filtrable, case studies por proyecto, studio, servicios, proceso, equipo, una página Lab de experimentos, journal, artículo, careers, contacto y 404. El hero renderiza un campo de partículas Three.js en vivo mediante React Three Fiber — 1.500 puntos mint con blending aditivo desplazándose por seno mientras la cámara hace lerp hacia el puntero — con tres tiras verticales de imágenes desplazándose detrás a distinta velocidad, aceleradas por la velocidad de scroll de Lenis. GSAP SplitText voltea los caracteres del wordmark sobre un eje 3D y ScrambleTextPlugin escribe el tagline. Incluye cuatro colecciones tipadas con Zod, toggle dark/light persistido y tres skins de color en CSS.

Firma

El hero es una escena Three.js en vivo, no un vídeo: 1.500 puntos mint dentro de un cubo de 12 unidades, cada uno desplazado en cada frame por offsets de seno y coseno mientras toda la nube rota lentamente y la cámara hace lerp hacia tu puntero. Detrás, tres tiras verticales de thumbnails se desplazan a distinta velocidad y dirección, acelerando en proporción a la velocidad de scroll de Lenis. Encima, SplitText voltea los caracteres de KINO sobre un eje X de -80° y ScrambleTextPlugin resuelve el tagline desde el ruido.

Características

• 13 páginas — Inicio, Índice de Work, Case study, Studio, Servicios, Proceso, Equipo, Lab, Journal, Post, Careers, Contacto, 404
• Hero de partículas Three.js con React Three Fiber — 1.500 puntos mint con blending aditivo y desplazamiento por seno cada frame, cámara con lerp hacia el puntero, solo desktop y con fallback en Suspense
• Tres tiras verticales de imágenes a 1.0×, 1.4× y 0.7× en direcciones alternas, aceleradas en tiempo real por la velocidad de scroll de Lenis
• Entrada del wordmark con GSAP SplitText — los caracteres caen desde 120% en y y -80° de rotationX con stagger de 0.07s en expo.out
• Reveal del tagline con ScrambleTextPlugin y preloader scramble que corre solo una vez por sesión (sessionStorage)
• Índice de work con filtros por tag y una imagen ghost que sigue al cursor vía gsap.quickTo en left/top (0.35s)
• Reveal con clip-path inset en las tres tarjetas de selected work del home — se desenmascaran desde el borde inferior en 1.1s expo.out, más parallax de imagen con scrub
• 4 colecciones tipadas con Zod — work (6 case studies), team (6 miembros), journal (4 artículos), careers (3 vacantes)
• Página Lab — 6 cards de experimentos (WebGL, shaders, tipografía cinética, datos generativos) con reveals de blur a nítido y parallax de imagen
• Toggle de tema dark/light en la nav, persistido en localStorage y re-aplicado tras cada swap del ClientRouter
• 3 skins de color en CSS — Void Mint (#00FFB3 por defecto), Ice Lab (#0052FF sobre #F5F7FA) y Darkroom (#FF8C42 sobre #0A0806)
• Cursor custom con tracking quickTo que devuelve el cursor nativo en dispositivos táctiles vía @media (hover: none)
• Nav auto-ocultable que se retira al bajar más de 200px, vuelve al subir, se difumina al hacer scroll y abre un overlay de menú a pantalla completa por debajo del breakpoint lg
• Secciones del home: intro del estudio, selected work, barra de stats animada, marquee de servicios, strip de awards y CTA
• Sources AVIF + WebP en <picture> generadas en build con getImage, a partir de 25 imágenes incluidas
• Guardas de prefers-reduced-motion en 17 de los 23 componentes React, cubriendo todas las secciones animadas de página; smooth scroll con Lenis + Astro View Transitions; TypeScript estricto

Despliegue