Cinematic

Overview

Cinematic is a full-viewport film / streaming marketing hero by SonoJS. Built with Vite, React 19, TypeScript, Tailwind CSS 4, and Lucide. Looping hero-bg.mp4 with bottom blur mask, CINEMATIC mark, Movies / TV Series / Editor's Pick nav with Search and profile glass pills, 8.7/10 IMDB · 132 min · April 2025 meta, Step Through. Work Smarter. headline, Watch Now / Learn More CTAs, and Previous / Next carousel chrome. Demo UI only - no player backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Video stage + bottom blur

   hero-bg.mp4 full-bleed with a masked blur overlay under the title block.

2. 02

   Film meta chrome

   8.7/10 IMDB, runtime, and date chips beside Step Through. Work Smarter.

3. 03

   Liquid-glass controls

   Search, profile, Watch Now / Learn More, and Previous / Next carousel pills.

4. 04

   Vite and fork-ready

   Vite 8 + React 19 + TypeScript + Tailwind 4 + Lucide - npm run build to dist/.

You get

• Full Vite + React 19 + TypeScript source (Cinematic)
• App.tsx hero shell with mobile nav
• Tailwind CSS 4 via @tailwindcss/vite
• public/videos/hero-bg.mp4
• lucide-react