Visor

Overview

Visor is a VR product marketing hero by SonoJS (demo brand: Visor / Visor Vision X1). Built with Vite 6, React 19, TypeScript, Tailwind CSS 4, Motion, and Lucide. A 16:9 cinematic frame plays dual-synced hero.mp4 with oversized FUTURE VISION type, play/pause chrome, and hover hotspots. Below: a Buy Now $600 pill and three feature cards (empowering businesses, Discover Advanced VR Innovation, reviews) that open buy / get-started / learn-more / reviews modals. Navbar Explore–About. Demo product chrome only - no checkout backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Synced cinematic video

   Dual-layer hero.mp4 stays frame-locked with FUTURE VISION type and play controls.

2. 02

   Floating product cards

   Buy Now $600 pill plus three angled cards for VR pitch, innovation, and reviews.

3. 03

   Modal flows

   Buy, get started, learn more, and reviews dialogs - demo alerts only.

4. 04

   Vite and fork-ready

   Vite 6 + React 19 + Tailwind 4 + Motion + Lucide - npm run build to dist/.

You get

• Full Vite + React 19 + TypeScript source (Visor)
• CinematicHeroVideo, HeroCardsBanner, InteractiveModals, Navbar
• public/hero.mp4
• Tailwind CSS 4 via @tailwindcss/vite + motion + lucide-react