Feature

Hero Glow Effects Library & Design System Reorganization

New CSS-based hero glow effects library with six distinct animation styles, plus design system page reorganization separating Three.js flare components from pure CSS glow effects.

Claude
Claude Claude
Hero-EffectsCSS-AnimationVisual-EffectsDesign-SystemGlowsFlareSVGGradients

Changelog - 2025-12-31 (#1)

Hero Glow Effects Library & Design System Reorganization

Overview

Created a comprehensive library of CSS-based hero glow effects inspired by ascentivelab.com. These pure CSS animations provide performant, accessible background effects for hero sections without requiring Three.js or WebGL.

Additionally reorganized the design system to separate concerns:

  • Flare (/design-system/flare): Three.js particle visualizations
  • Glows (/design-system/glows): Pure CSS animated glow effects

New Components

1. HeroGlow--AnimatedOrbs

Floating gradient orbs with soft blur glow effect. Multiple overlapping blurred circles drift slowly across the container.

Features:

  • 4 configurable gradient orbs at different sizes and positions
  • Heavy CSS blur filters for soft glow
  • GPU-accelerated with will-change: transform
  • Configurable colors (primary, secondary, accent)
  • Animation speed control
  • Respects prefers-reduced-motion

Props:

Prop Type Default Description
size string '100%' Container width
height string same as size Container height
primaryColor string '#df7afe' Main orb color (magenta)
secondaryColor string '#814ac8' Secondary orb color (purple)
accentColor string '#6643e2' Accent orb color (deep purple)
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation
opacity number 1 Global opacity multiplier

Usage:

<HeroGlowAnimatedOrbs
  size="100%"
  height="100vh"
  primaryColor="#00d4ff"
  secondaryColor="#0099cc"
  animationSpeed={1.5}
/>

2. HeroGlow--EventHorizon

Black hole / event horizon effect with glowing arc segments surrounding a dark center void. Creates the appearance of light bending around a gravitational singularity.

Features:

  • 5 layered conic gradient arcs at different angles
  • 3 radial gradient void layers for extremely gradual fade to black
  • Very soft transitions (no hard edges)
  • Configurable void size and glow intensity

Props:

Prop Type Default Description
primaryColor string '#df7afe' Primary glow color
secondaryColor string '#814ac8' Secondary glow color
voidSize number 0.25 Size of dark center (0-1)
intensity number 1 Glow brightness multiplier
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation

Animation Behavior:

  • Arc layers slowly rotate and scale
  • Different arcs move at different speeds
  • Some rotate clockwise, others counter-clockwise
  • Creates organic, breathing effect

3. HeroGlow--QuarteredRing

Glowing ring split into 4 arc segments using CSS clip-path. Two arcs positioned at a larger radius, two at a smaller radius, creating depth through displacement.

Features:

  • Ring-based glow using box-shadow (inner and outer)
  • clip-path polygons to show only quarter segments
  • Pairs of arcs at different radii from center
  • Subtle drift animation with rotation

Props:

Prop Type Default Description
primaryColor string '#c084fc' Outer arcs color
secondaryColor string '#a855f7' Inner arcs color
intensity number 1 Glow brightness multiplier
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation

Arc Positioning:

  • Top-right and bottom-left: Larger radius (85%), offset outward
  • Top-left and bottom-right: Smaller radius (75%), offset inward

4. HeroGlow--PerpendicularArcs

Thin glowing arcs arranged perpendicular to each other using SVG paths. The thinnest and most precise of the glow effects.

Features:

  • SVG-based for precise arc control
  • Configurable stroke thickness
  • feGaussianBlur filter for smooth glow
  • Gradient stroke with faded ends
  • Counter-rotating animation (outer clockwise, inner counter-clockwise)

Props:

Prop Type Default Description
primaryColor string '#c084fc' Vertical arcs color
secondaryColor string '#a855f7' Horizontal arcs color
thickness number 0.04 Arc stroke width (0.02-0.1)
intensity number 1 Glow brightness multiplier
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation

Arc Layout:

         ╭─── Outer arc (top→right) ───╮
         │                             │
    Inner│                             │Inner
    arc  │                             │arc
   (left)│          [center]           │(right)
         │                             │
         │                             │
         ╰─── Outer arc (bottom→left) ─╯

5. HeroGlow--NucleusPulse

Simple pulsing radial glow centered behind content. Extracted from the "Orbital Cosmos" hero section (WhyNowWhyUs-v4).

Features:

  • Radial gradient from color to transparent
  • Heavy blur for soft glow
  • Pulsing scale animation
  • Perfect for centering behind headlines or focal points
  • Content slot for overlaying text/elements

Props:

Prop Type Default Description
size string '100%' Container width
height string same as size Container height
color string '#6643e2' Glow color
glowSize string '300px' Size of the glow circle
blur number 60 Blur amount in pixels
opacity number 0.6 Base opacity (0-1)
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation

Animation Behavior:

  • Glow scales from 1x to 1.2x
  • Opacity increases 30% at peak
  • 4-second cycle by default

6. HeroGlow--OrbitalCosmos

Dramatic cosmic hero effect with rotating orbital rings and floating nodes. The full "Orbital Cosmos" hero extraction from WhyNowWhyUs-v4.

Features:

  • 3 rotating orbital rings at different sizes and speeds
  • 4 floating orbital nodes with pulse effects
  • Node labels on hover
  • Central nucleus glow
  • Configurable colors and animation speed
  • Content slot for overlaying text/elements

Props:

Prop Type Default Description
size string '100%' Container width
height string same as size Container height
primaryColor string '#6643e2' Ring and node color
glowColor string '#6643e2' Nucleus glow color
showLabels boolean true Show node labels on hover
nodeLabels [string, string, string, string] ['Bioscience', 'Data', 'Longevity', 'Founders'] Custom labels
glowOpacity number 0.6 Nucleus glow opacity (0-1)
animationSpeed number 1 Speed multiplier
animate boolean true Enable/disable animation

Animation Behavior:

  • Orbit 1: 90s rotation (fastest, smallest)
  • Orbit 2: 120s rotation (reverse direction)
  • Orbit 3: 180s rotation (slowest, largest)
  • Nodes float with 8-12s drift cycles
  • Nucleus pulses on 4s cycle

Design System Reorganization

Before

/design-system/flare-demo  →  All effects (Three.js + CSS) on one long page

After

/design-system/flare   →  Three.js particle visualizations (ImageAbstract--)
/design-system/glows   →  Pure CSS glow effects (HeroGlow--)

Rationale

  1. Separation of concerns: Three.js components have different performance characteristics than CSS animations
  2. Page length: The combined demo page was too long to navigate effectively
  3. Discoverability: Users can now find the right type of effect more easily
  4. Independence: CSS glows work without JavaScript; Three.js flares require it

Navigation Updates

  • Design system index now shows both Flare and Glows in the Effects category
  • Each page has cross-links to the other
  • Quick jump anchors on the glows page (#animated-orbs, #event-horizon, etc.)

Technical Implementation

CSS Techniques Used

Component Primary Technique
AnimatedOrbs radial-gradient + filter: blur()
EventHorizon conic-gradient + layered radial-gradient voids
QuarteredRing box-shadow + clip-path: polygon()
PerpendicularArcs SVG <path> + feGaussianBlur filter
NucleusPulse radial-gradient + filter: blur() + scale animation
OrbitalCosmos CSS border orbits + floating nodes + radial-gradient nucleus

Performance Considerations

All components use:

  • will-change: transform for GPU acceleration
  • pointer-events: none on decorative layers
  • CSS animations (no JavaScript animation loops)
  • @media (prefers-reduced-motion: reduce) support

Color System

Default colors align with Dark Matter brand palette:

  • Primary: #df7afe (magenta)
  • Secondary: #814ac8 (purple)
  • Accent: #6643e2 (deep purple / brand purple)
  • Lighter variants: #c084fc, #a855f7

Demo Page Structure

The /design-system/glows page includes:

  1. Page header with anchor navigation
  2. Full-bleed hero demo for each effect
  3. Variants grid showing color/parameter variations
  4. Static variant (animate={false}) for each effect
  5. Navigation links to Flare and Design System index

Each effect section follows the pattern:

<!-- Full-bleed demo -->
<section class="min-h-screen relative">
  <div class="absolute inset-0">
    <HeroGlowComponent size="100%" height="100%" />
  </div>
  <div class="relative z-10">
    <h2>Component Name</h2>
    <p>Description</p>
  </div>
</section>

<!-- Variants grid -->
<section>
  <div class="grid sm:grid-cols-2 lg:grid-cols-3">
    <!-- 6 variants: default, colors, parameters, static -->
  </div>
</section>

Usage Examples

Hero Section Background

<section class="relative min-h-screen">
  <div class="absolute inset-0 -z-10">
    <HeroGlowEventHorizon size="100%" height="100%" />
  </div>
  <div class="relative z-10">
    <h1>Your Content Here</h1>
  </div>
</section>

Card Accent

<div class="relative overflow-hidden rounded-xl">
  <HeroGlowAnimatedOrbs
    size="100%"
    height="300px"
    opacity={0.5}
    animationSpeed={0.5}
  />
  <div class="relative z-10 p-6">
    <h3>Card Title</h3>
  </div>
</div>

Themed Variants

<!-- Cyan/Teal theme -->
<HeroGlowPerpendicularArcs
  primaryColor="#22d3ee"
  secondaryColor="#0891b2"
/>

<!-- Interstellar orange/red -->
<HeroGlowEventHorizon
  primaryColor="#ff6b35"
  secondaryColor="#ff3d00"
/>

File Structure

src/components/flare/
├── HeroGlow--AnimatedOrbs.astro      # Floating gradient orbs
├── HeroGlow--EventHorizon.astro      # Black hole effect
├── HeroGlow--QuarteredRing.astro     # Displaced ring segments
├── HeroGlow--PerpendicularArcs.astro # Thin perpendicular arcs
├── HeroGlow--NucleusPulse.astro      # Simple centered pulsing glow
├── HeroGlow--OrbitalCosmos.astro     # Full orbital system with nodes
└── ImageAbstract--*.astro            # (existing Three.js components)

src/pages/design-system/
├── index.astro   # Updated with Flare + Glows in Effects category
├── flare.astro   # Three.js visualizations (renamed from flare-demo)
└── glows.astro   # CSS glow effects (new)

Inspiration

These effects were inspired by the hero section on ascentivelab.com, which features:

  • Soft, blurred gradient elements
  • Quarter-circle arc segments around a dark center
  • Subtle animation creating an "event horizon" feel
  • Purple/magenta color palette

The implementation recreates this aesthetic using pure CSS (no Framer or JavaScript animation libraries required).

URLs

  • Glows Demo: /design-system/glows
  • Flare Demo: /design-system/flare
  • Design System Index: /design-system

Future Enhancements

  1. Additional variants: More arc configurations, spiral patterns
  2. Interactive mode: Mouse-following glow position
  3. Slot content: Better support for overlaid content
  4. Blend modes: Experiment with mix-blend-mode for unique effects
  5. Color presets: Named theme presets (cyberpunk, aurora, sunset)