Changelog - 2026-01-19 (#4)

Flare: Three.js Visual Effects System

Overview

Introduced Flare — a collection of animated Three.js visual effects designed for hero backgrounds, decorative elements, and brand expression. These WebGL-powered components bring depth and motion to the site while maintaining excellent performance.

Components Added

PlanetRising

A dotted sphere visualization with configurable lighting and parallax effects.

Features:

• Spherical dot grid — Points distributed across a sphere surface

• Directional lighting — Configurable light direction with smooth falloff

• Density control — Adjustable dot count multiplier (1-6x)

• Mouse parallax — Subtle camera movement following cursor

• Film grain overlay — Optional SVG-based grain effect

• Breathing animation — Dots pulse subtly over time

Props:

EclipseEnding

A crescent illumination effect — a sun emerging from behind an eclipse with a dense bright edge.

Features:

• Sharp crescent falloff — Exponential intensity curve for dramatic effect

• High density grid — 120×90 point grid for packed illumination

• Variable dot sizing — Larger dots in bright areas, tiny in shadow

• Rim lighting — Subtle edge boost for depth

• Sparse shadow culling — Dim dots randomly removed for cleaner look

• Slow rotation — Barely perceptible movement for calm atmosphere

Props:

BannerFlag

The Banner VC flag icon rendered as animated thick lines with wave motion.

Features:

• Three wavy banner lines — Positioned from top, with middle line thinner

• Thick line rendering — Mesh-based ribbon geometry for proper thickness

• Vertical flagpole — Slightly angled (10% tilt) extending below the flag

• Wave animation — Flowing sine wave motion with phase offsets

• Edge dampening — Waves stronger in middle, subtle at edges

• Scalable — Configurable scale multiplier

Props:

Technical Implementation

Three.js Integration

Added Three.js as a core dependency for WebGL rendering:

pnpm add three @types/three

Rendering Approach

All Flare components follow a consistent pattern:

1. Astro component wrapper — Props passed via data attributes

2. Client-side Three.js class — Initializes on DOM ready

3. Orthographic camera — 2D-like rendering for consistent sizing

4. RequestAnimationFrame loop — Smooth 60fps animation

5. ResizeObserver — Responsive canvas sizing

Thick Line Technique

Standard THREE.Line doesn't support thick lines on most platforms. BannerFlag uses a custom approach:

// Create ribbon mesh from line points
private createThickLine(points: Vector3[], thickness: number): Mesh {
  // Generate two vertices per point (perpendicular to line direction)
  // Create triangle strip connecting vertices
  // Return as Mesh with MeshBasicMaterial
}

Particle Lighting

PlanetRising and EclipseEnding use custom shaders for lighting:

// Vertex shader calculates light intensity
float dotProduct = dot(normal, lightDir);
float lightFacing = max(0.0, (dotProduct + 0.3) / 1.3);
float lightIntensity = pow(lightFacing, 0.6);

Design System Integration

Flare Gallery

Added /design-system/flare as a gallery index with demo pages for each effect:

Each demo page includes:

• Live interactive preview

• Props documentation table

• Usage code example

• Animation/design details

• Color variations

Homepage Integration

Updated the homepage to feature BannerFlag as the hero flare element:

<section class="flare-section">
  <div class="flare-container gradient-hero">
    <BannerFlag
      bgColor="transparent"
      lineColor="#ffffff"
      height="500px"
    />
  </div>
</section>

Gradient Background

Added codified gradient variables to the theme:

:root {
  --gradient-hero: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
  --gradient-hero-reverse: linear-gradient(135deg, #db2777 0%, #7c3aed 50%, #1e40af 100%);
  --gradient-subtle: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

Performance Considerations

• Pixel ratio capping — Limited to 2x to prevent GPU strain on high-DPI displays

• Geometry reuse — Static elements share materials

• Culling — Dim particles removed from scene entirely

• No shadows — Uses fake lighting via shaders for performance

Future Possibilities

• Additional effects — Star field, particle trails, morphing shapes

• Interaction — Click/hover effects on Flare elements

• Composition — Layer multiple Flare effects

• Export — Generate static images/videos from Flare compositions