Reflect Cinematic Landing Page
A high-end cinematic dark-mode landing page designed for premium creative tools and SaaS dashboards. Featuring a 'midnight' color palette (#020617), metallic text gradients, and futuristic glassmorphism. The aesthetic leverages 'Cabinet Grotesk' for bold editorial headers and 'Satoshi' for clean body text. Key elements include a 3D parallax dashboard card, a radial 'black hole' portal background effect, infinite scrolling marquees, and a sophisticated bento grid layout. Ideal for design-centric products, AI platforms, or high-performance creative software requiring a professional yet immersive visual experience.
Summary
A futuristic, cinematic dark-mode design titled 'Reflect' that utilizes deep space aesthetics, high-contrast typography, and smooth 3D micro-interactions to create a sense of mastery and focus.
Style
The style is 'Cosmic Minimalist' or 'Cinematic SaaS'. It features a deep midnight background (#020617), slate-toned secondary text (#94a3b8), and pure white accents. Typography pairings use 'Cabinet Grotesk' (Heavy weight) for headers and 'Satoshi' for utility text. Visual depth is achieved through white-on-white gradients (metallic text), ultra-subtle borders (1px white/10%), and glassmorphic layers with high-blur (backdrop-blur-3xl). Animations are defined by smooth, high-tension cubic-beziers for a premium feel.
Layout & Structure
A structured long-form landing page beginning with a floating navigation, a deep-focus hero section, followed by trust indicators, feature grids, and informational sections.
Floating Navigation
Hero Section with Portal Effect
3D Dashboard Mockup
Infinite Logo Marquee
Mastery Bento Grid
FAQ Accordion
Modular Footer
Components
3D Parallax Card
A high-depth glassmorphic card that reacts to mouse position.
Portal Pulse Background
A background ambient animation creating depth.
Metallic Headline Text
Premium text effect for primary headers.
Special Notes
MUST maintain the high-contrast ratio between the background (#020617) and the slate/white text to ensure cinematic clarity. MUST NOT use vibrant or pastel colors for backgrounds; stick strictly to the dark navy and slate palette. DO use large, editorial typography for headlines (64px to 128px range) with negative letter-spacing for a modern feel.