Feature

Hero Section Variants and Three.js Orb Animation

Major creative sprint with 7 hero variants and signature WebGL particle Orb component.

Claude
Claude Claude
Hero-SectionThree.jsWebGLAnimationDesign-Exploration

Changelog - 2025-12-04 (#2)

Dark Matter Site: Hero Section Variants, Three.js Orb Animation, and Design System Refinements

Overview

Major creative sprint on the hero section with 7 distinct "Why Now, Why Dark Matter?" variants exploring different design approaches. Added Three.js for WebGL particle animations and created the signature Orb component based on brand design assets.

Changes by Area

1. Hero Section Variants (7 Total)

Created a comprehensive exploration of hero designs in src/layouts/sections/narratives/:

GPT-Generated Variants (v1-v3) — Card-Based Layouts

  • WhyNowWhyUs.astro — Original: two-column grid with "Why Now" and "Why Dark Matter" cards
  • WhyNowWhyUs-v1.astro — Timeline variant with vertical accent line and sequential story points
  • WhyNowWhyUs-v2.astro — Before/After comparison split layout
  • WhyNowWhyUs-v3.astro — Three-column band with stat pills in header

Claude-Generated Variants (v4-v7) — Creative/Outside-the-Box Designs

  • WhyNowWhyUs-v4.astro — "Orbital Cosmos": Full-bleed immersive experience with animated orbital rings, floating data points (Bioscience, Data, Longevity, Founders), giant gradient typography as central nucleus
  • WhyNowWhyUs-v5.astro — "The Reveal": Editorial/magazine-style asymmetric split with massive typography, numbered reveal points (01, 02, 03), 20vw decorative background text
  • WhyNowWhyUs-v6.astro — "The Manifesto": Scroll-based typographic storytelling with sticky section, progressive color reveals ("It is continuous." → "It is compounding." → "It is now."), floating thesis keywords
  • WhyNowWhyUs-v7.astro — "Orbital Narrative": Scroll-driven storytelling integrating the Orb component, staggered card reveals from alternating sides, clear section badges, mini Orb divider

2. Three.js Particle Orb Component

Added Three.js dependency and created a WebGL particle sphere based on brand design assets:

  • Package: Added three@0.181.2 as a dependency
  • Component: src/components/flare/ImageAbstract--Orb--Half.astro

Features:

  • ~8000 particles distributed using golden spiral algorithm for even coverage
  • Central void/eye cutout (almond-shaped hole through center)
  • Higher density at poles matching the brand asset's brighter caps
  • Custom WebGL shaders for soft circular particles with depth-based alpha
  • Additive blending for glowing effect
  • Configurable props: size, color, animate, rotationSpeed
  • Intersection Observer for lifecycle management
  • ResizeObserver for responsive sizing
  • Astro view transitions support

Usage:

<ImageAbstractOrb
  size="min(70vw, 400px)"
  color="#9C85DF"
  rotationSpeed={0.15}
/>

3. Sticky Header Implementation

  • Updated src/components/basics/Header.astro with sticky top-0 z-50 positioning
  • Header now stays fixed at top while scrolling through hero variants
  • Maintains backdrop blur and theme-aware styling

4. CSS/Tailwind Fixes

Tailwind v4 Syntax Migration

Updated CSS variable syntax from bg-[var(--color-void)] to bg-(--color-void) per Tailwind v4 conventions across:

  • WhyNowWhyUs-v5.astro
  • WhyNowWhyUs-v6.astro
  • WhyNowWhyUs-v7.astro
  • flare-demo.astro

Media Query Fix

Fixed invalid CSS in src/styles/global.css — media queries cannot use CSS variables (var()). Replaced:

/* Before (invalid) */
@media (min-width: var(--breakpoint-monitor)) { ... }

/* After (valid) */
@media (min-width: 1536px) { ... }

5. Demo Page

  • Created src/pages/flare-demo.astro for testing the Orb component
  • Shows main orb plus color variants (lilac, purple, static)

6. Content Collections Architecture

Set up a modular content collections system with separated config files:

Main Config

  • src/content.config.ts — Central registry that imports individual collection configs

Narratives Collection

  • src/content/narratives/narratives.config.ts — Passthrough schema for narrative content
  • Uses z.object({}).passthrough() to accept any frontmatter without validation

Changelog Collection (External Directory)

  • src/content/changelog/changelog.config.ts — Points to git submodule outside src/
  • Uses Astro's glob loader to reference ../../changelog (the project root changelog directory)
  • Enables the changelog to be managed as a separate git repository while still being queryable as a content collection
// Example: External directory loader
loader: glob({
  pattern: '**/*.md',
  base: '../../changelog',
}),

Files Changed Summary

New Files

  • src/layouts/sections/narratives/WhyNowWhyUs-v4.astro — Orbital Cosmos hero
  • src/layouts/sections/narratives/WhyNowWhyUs-v5.astro — The Reveal hero
  • src/layouts/sections/narratives/WhyNowWhyUs-v6.astro — The Manifesto hero
  • src/layouts/sections/narratives/WhyNowWhyUs-v7.astro — Orbital Narrative hero
  • src/components/flare/ImageAbstract--Orb--Half.astro — Three.js particle orb
  • src/pages/flare-demo.astro — Orb component demo page
  • src/content.config.ts — Main content collections registry
  • src/content/narratives/narratives.config.ts — Narratives collection config
  • src/content/changelog/changelog.config.ts — Changelog collection config (external dir)

Modified Files

  • package.json — Added three dependency
  • src/components/basics/Header.astro — Added sticky positioning
  • src/components/basics/heros/DarkMatterHero--Default.astro — Imports all 7 variants
  • src/styles/global.css — Fixed media query CSS variable issue
  • Various .astro files — Tailwind v4 syntax updates

Design Philosophy Notes

Why 7 Variants?

The original GPT-generated variants (v1-v3) all followed the same formula:

  • Same header pattern (eyebrow → title → subtitle)
  • Same hero-panel rounded card containers
  • Same content-dense approach with lists

The Claude-generated variants (v4-v7) break this pattern with:

  • V4: Animation-first, brand-as-visual, cosmic immersion
  • V5: Editorial asymmetry, typography-as-design, numbered progression
  • V6: Scroll storytelling, manifesto format, words-ARE-the-design
  • V7: Orb integration, scroll reveals, same copy with better hierarchy

The Orb

The Three.js orb recreates a brand design asset featuring:

  • A sphere made of thousands of white dots
  • Varying density (denser at poles)
  • A central void/eye shape cutting through
  • Cosmic, mysterious, data-driven aesthetic

This component can be reused across the site as a signature visual element.

Follow-Ups

  • Choose final hero variant for production
  • Consider additional Orb variants (full sphere, different void shapes)
  • Explore GSAP integration for more complex scroll animations
  • Performance audit of Three.js on mobile devices