Lumina - 30% Triggered Cinematic Portal
Lumina is a cinematic portal-style design system characterized by a dramatic scroll-triggered 'zoom-through' interaction. It features a high-contrast aesthetic with a deep charcoal (#050505) entry screen that reveals a vibrant, animated gradient background. Utilizing 'Cabinet Grotesk' for heavy display typography and 'Satoshi' for refined UI, the design emphasizes depth and motion. Ideal for luxury tech, creative agencies, immersive portfolios, and high-end landing pages, the layout uses glassmorphism, misty blur reveals, and a bento-style grid for internal content.
Summary
An immersive digital portal design that uses scroll-based SVG masking to transition from a minimalist black title screen into a vibrant, glassmorphic hero section with smooth easing and misty blur reveals.
Style
The style is 'Cinematic Minimalist' with a high-energy background. It uses a base of #050505 and white. Typography pairings include Cabinet Grotesk (Extra Bold/900) for punchy impact and Satoshi for clean readability. The primary visual driver is a multi-color gradient animation (#4f46e5, #7c3aed, #f59e0b, #db2777) that flows slowly. Interactions are governed by an ease-in-out cubic timing function for a 'heavy' cinematic feel.
Layout & Structure
A layered architecture: Layer 1 is the hidden internal page; Layer 2 is the 'Curtain' with an SVG mask; Layer 3 is the top-level progress indicator and intro UI.
Portal Curtain
Intro UI
Hero Content Section
Header and Nav
Progress Indicator
Components
Zoom-Through SVG Mask
An SVG-based masking system that allows the background to 'show through' text or shapes.
Misty Reveal Card
A glassmorphism card that appears to emerge from a fog.
Special Notes
Must-do: Implement an 'auto-advance' trigger. When the user scrolls past 30% progress, the transition should automatically proceed to 100% over 3-4 seconds. Must-do: Use 'pointer-events-none' on the hidden content until the portal transition is 90% complete to prevent accidental clicks. Must-not: Use standard linear easing; the transition must feel weighted and cinematic using cubic functions.