Landing Page Style Guide — Replicate & Customize

Tech Stack

• Framework: Next.js 15 (App Router, use client components)
• Styling: Tailwind CSS v4 (with @import "tailwindcss" and @theme block)
• Fonts: Google Fonts via next/font/google — use two fonts:
• A clean sans-serif for body text (e.g. Inter)
• A bold display font for headings (e.g. Outfit)
• No external UI libraries. Everything is custom-built with Tailwind utility classes and inline styles.

Color Palette & Design Tokens

Define CSS custom properties in globals.css under @layer base :root:

Body background: A radial gradient from a slightly lighter dark blue at the bottom to the deep dark base.

Selection colors: Accent background with black text.

Component Architecture

The page is composed of 4 components + a root page:

1. Root Page (page.js)

• Manages a single heroComplete boolean state
• Renders: StarfieldCanvas → Header → main (HeroText → VideoSection)
• Main content has pointer-events-none (individual interactive elements opt back in with pointer-events-auto)
• Includes a spacer div (h-[200vh]) that only appears after hero animation completes, to enable scrolling for the video expansion

2. Starfield Canvas (fullscreen animated background)

• A <canvas> element fixed to fill the viewport
• ~1400 stars with 3D depth simulation (z-buffer approach)
• Three depth layers (based on random depth value 0–1):
• Far (depth < 0.3): tiny size, slow speed, dim
• Mid (0.3–0.7): medium size, medium speed, moderate brightness
• Near (> 0.7): large size, fast speed, bright
• Color tints: Most stars white, some blue-tinted, rare accent-tinted
• Twinkle effect: Sine-wave brightness modulation
• Mouse interaction: Stars near cursor get repelled outward with brightness boost
• Diffraction spikes: Brighter stars get thin cross-hair lines

3. Header (floating glass nav bar)

• Fixed position, centered at top with 24px offset
• Width: 90%, max 1100px, height 72px
• Glassmorphism style with backdrop blur, subtle borders, pill shape
• Logo: Display font with accent color glow
• Nav buttons: Ghost button + Primary CTA with accent glow

4. Hero Text (scroll-to-reveal)

• Centered on screen with display font headline
• Starts blurred and semi-transparent
• Scroll-to-reveal: Accumulates scroll delta, maps to blur and opacity
• Scroll indicator: Animated mouse icon that fades as text sharpens

5. Video Section (expanding video player)

• Starts at 60vw wide, 40vh tall at bottom
• Expands to fullscreen over 600px of scroll with ease-in-out easing
• Video with gradient overlay and mute/unmute button

Animation & Interaction Summary

1. Page load: Stars animate immediately. Hero text is blurry and semi-transparent. Scroll indicator bounces.
2. User scrolls (wheel): Hero text progressively sharpens and becomes opaque. Scroll indicator fades.
3. Hero complete: Spacer div appears, enabling actual page scroll. Video section becomes visible at bottom.
4. User scrolls further: Video expands from 60vw/40vh box to fullscreen with eased animation.
5. Mouse movement: Stars near cursor scatter outward and brighten. Smooth lerp tracking.

Key Implementation Details

• All scroll-based animations use wheel event (hero) or scroll event (video), not scroll-linked CSS animations
• Progress values are clamped and tracked via refs to avoid excessive re-renders
• The pointer-events-none / pointer-events-auto pattern allows the starfield canvas to receive mouse events while keeping buttons clickable
• Video section uses will-change for smooth resizing
• Canvas uses requestAnimationFrame loop with proper cleanup on unmount
• DPR-aware canvas rendering

Customization Points

Replace these with your own brand:

• Brand name in Header
• Subtitle and Headline
• Accent color (update all glow/shadow values accordingly)
• Nav button labels
• Video source (replace with your own VSL/hero video)
• Fonts (swap for your brand fonts)
• Star color tints (update to match your accent color)
• Metadata in layout.js (title, description)