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:

Prop	Type	Default	Description
bgColor	string	#0f172a	Background color
dotColor	string	#ffffff	Dot/particle color
height	string	100vh	Container height
parallax	boolean	true	Enable mouse parallax
lightDirection	string	top-left	Light source position
density	number	1	Dot count multiplier

---

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:

Prop	Type	Default	Description
bgColor	string	#2563eb	Background color (vivid blue)
dotColor	string	#ffffff	Dot/particle color
height	string	100vh	Container height
parallax	boolean	true	Enable mouse parallax

---

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:

Prop	Type	Default	Description
bgColor	string	transparent	Background color
lineColor	string	#ffffff	Line color
height	string	600px	Container height
thickness	number	0.08	Line thickness (scene units)
scale	number	3	Scale multiplier

---

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:

Route	Description
/design-system/flare	Gallery index with effect cards
/design-system/flare/planet-rising	PlanetRising demo & props
/design-system/flare/eclipse-ending	EclipseEnding demo & props
/design-system/flare/banner-flag	BannerFlag demo & props

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