Lumina

Overview

Lumina is a full-viewport editorial / media marketing hero by SonoJS. Built with Vite, React 19, TypeScript, Tailwind CSS 4, Motion, and Lucide. Fixed looping background.mp4, Clarity for curious minds kicker, See the world with luminous focus headline, Explore Lumina CTA, and a rising liquid-glass LUMINA footer with Discover / The Mission / Concierge columns plus social icons. Demo media chrome only - no CMS backend. Vite build ready for Cloudflare Workers.

Highlights

1. 01

   Fixed video stage

   Looping background.mp4 under Clarity for curious minds and luminous focus type.

2. 02

   Explore Lumina CTA

   Outlined pill that scrolls to the liquid-glass footer explore block.

3. 03

   Glass footer columns

   Motion-animated LUMINA footer with Discover, Mission, Concierge, and socials.

4. 04

   Vite and fork-ready

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

You get

• Full Vite + React 19 + TypeScript source (Lumina)
• App.tsx hero + liquid-glass footer
• Tailwind CSS 4 via @tailwindcss/vite
• public/video/background.mp4 + Helvetica fonts
• motion + lucide-react