Kino

About This Template

Kino is a creative studio template for motion, 3D and digital design shops. Thirteen pages cover home, a filterable work index, per-project case studies, studio, services, process, team, a Lab page of experiments, journal, article, careers, contact and 404. The hero renders a live Three.js particle field through React Three Fiber — 1,500 additively blended mint points drifting on sine displacement while the camera lerps toward the pointer — with three vertical image strips scrolling behind it at different speeds, accelerated by Lenis scroll velocity. GSAP SplitText flips the wordmark characters in on a 3D axis and ScrambleTextPlugin types the tagline. Four Zod-typed collections, a persisted dark/light toggle and three CSS colour skins ship with it.

Signature

The hero is a live Three.js scene, not a video: 1,500 mint points sit in a 12-unit cube, each one displaced every frame by sine and cosine offsets while the whole cloud rotates slowly and the camera lerps toward your pointer. Behind it, three vertical strips of project thumbnails scroll at different speeds and directions, accelerating in proportion to Lenis scroll velocity. On top, SplitText flips the KINO characters in on a -80° X axis and ScrambleTextPlugin resolves the tagline out of noise.

Features

• 13 pages — Home, Work index, Case study, Studio, Services, Process, Team, Lab, Journal, Journal post, Careers, Contact, 404
• Three.js particle hero via React Three Fiber — 1,500 additive-blended mint points on per-frame sine displacement, camera lerping toward the pointer, desktop-only behind a Suspense fallback
• Three vertical image strips running at 1.0×, 1.4× and 0.7× in alternating directions, sped up in real time by Lenis scroll velocity
• GSAP SplitText wordmark entrance — characters cascade from 120% y and -80° rotationX with a 0.07s stagger on expo.out
• ScrambleTextPlugin tagline reveal plus a scramble preloader that runs only once per session (sessionStorage)
• Work index with tag filters and a ghost preview image tracking the cursor via gsap.quickTo on left/top (0.35s)
• Clip-path inset reveal on the three home selected-work cards — unmasked from the bottom edge over 1.1s expo.out, plus scrubbed image parallax
• 4 Zod-typed content collections — work (6 case studies), team (6 members), journal (4 articles), careers (3 openings)
• Lab page — 6 experiment cards (WebGL, shaders, kinetic type, generative data) with blur-to-sharp reveals and image parallax
• Dark/light theme toggle in the nav, persisted to localStorage and re-applied after every ClientRouter swap
• 3 colour skins in CSS — Void Mint (#00FFB3 default), Ice Lab (#0052FF on #F5F7FA) and Darkroom (#FF8C42 on #0A0806)
• Custom cursor with quickTo tracking that hands the native cursor back on touch devices via @media (hover: none)
• Auto-hiding nav that slides away past 200px of scroll down, returns on scroll up, blurs on scroll, and opens a full-screen menu overlay below the lg breakpoint
• Home sections: studio intro, selected work, animated stats bar, services marquee, awards strip and CTA
• AVIF + WebP <picture> sources generated at build time with getImage, from 25 bundled source images
• prefers-reduced-motion guards in 17 of the 23 React components, covering every animated page section; Lenis smooth scroll + Astro View Transitions; TypeScript strict

Deployment