Live demo | Run locally | Architecture
Warpod Studio is a cinematic React and Three.js website for a high-end digital studio. It combines WebGL scenes, GSAP scroll choreography, oval video curtain transitions, ambient audio and portfolio-style storytelling into a polished production deployment.
Note
This repository is built as a frontend experience case study. The best way to evaluate it is to open the live deployment and scroll through the full sequence.
- Cinematic landing sequence with large-format typography and atmospheric 3D visuals.
- Smooth scroll storytelling powered by Lenis, GSAP and ScrollTrigger.
- Oval video curtain transitions for the Creative Vision and Digital Mastery sections.
- Horizontal project showcase with image and video-led panels.
- Interactive 3D Kinetic Core scene built with React Three Fiber and Drei.
- Production deployment on Vercel with strict security headers and optimized runtime video assets.
| Layer | Tools |
|---|---|
| App | React 19, Vite |
| 3D | Three.js, React Three Fiber, Drei |
| Motion | GSAP, ScrollTrigger, Framer Motion |
| Scroll | Lenis |
| Styling | CSS variables, custom typography, responsive layouts |
| Deployment | Vercel |
flowchart LR
User["Visitor"] --> Vercel["Vercel Edge"]
Vercel --> Vite["Vite Static Build"]
Vite --> React["React App"]
React --> Motion["GSAP + Lenis Scroll System"]
React --> WebGL["React Three Fiber Scenes"]
React --> Media["Optimized Images, Audio and Video"]
git clone https://github.com/ikerperez12/warpod.git
cd warpod
npm install
npm run devBuild and validate before publishing:
npm run lint
npm run build
npm run preview- Live deployment: warpod.vercel.app
- Runtime videos are provided as optimized 1080p assets for smoother scroll playback.
- Security headers are configured in
vercel.json, including CSP, frame protection, content type protection and referrer policy. - Presentation assets for this README live in
.github/assets/, separate from the website runtime assets.
The public repository is intentionally focused on the production website. It excludes local environment files, deployment state, dependencies, generated build output and internal cleanup artifacts.