Changelog - 2025-12-26 (#1)

Flare Component Refactoring: EventHorizon Spectra & Configurable Orb with Neck

Overview

This update refactors several Three.js particle visualization components for better naming, clearer purpose, and enhanced configurability. The DNA-Figure8 component was renamed to EventHorizon--Spectra to better reflect its visual appearance (dual-ring with acoustic spikes). The HumanBody--BackView component was split into two focused components: a simple Glowing Orb and a highly configurable Orb with Neck.

Key deliverables:

• Renamed: DNA-Figure8 → EventHorizon--Spectra (better semantic naming)

• Simplified: HumanBody--BackView now renders just the glowing orb

• New Component: Orb with Neck featuring configurable neck positions and orientation

• Updated Navigation: Gallery and layout navigation updated for all changes

Component Changes

EventHorizon--Spectra (Renamed from DNA-Figure8)

The dual-ring visualization with acoustic spikes was renamed to better describe its visual effect:

Rationale: The component doesn't actually look like DNA or a figure-8. The dual concentric rings with radiating spikes evoke an event horizon visualization, making "Spectra" a more accurate name.

Glowing Orb (Simplified HumanBody--BackView)

The original HumanBody--BackView component was trying to be both a simple orb and an orb-with-neck via a variant prop. This was refactored into two separate, focused components.

Before:

interface Props {
  variant?: 'orb' | 'orb-neck';
  // ... other props
}

After (HumanBody--BackView):

• Renders only the glowing orb with halo effect

• No variant prop needed

• Orb centered at origin (Y=0)

• Simplified codebase (removed all neck generation logic)

Location: src/components/flare/ImageAbstract--HumanBody--BackView.astro

Orb with Neck (New Component)

A new highly configurable component that supports multiple neck configurations and orientations.

Location: src/components/flare/ImageAbstract--GlowingOrb--WithNeck.astro

New Props

Visual Variants

1. Both necks (vertical): Spindle/dumbbell shape with necks extending up and down

2. Bottom only: Single neck extending downward from orb

3. Top only: Single neck extending upward from orb

4. Horizontal: Rotated 90° with necks extending left and right

Design decision: The original single-neck version looked like "a golf ball on a tee." By supporting dual necks and horizontal orientation, the component becomes much more versatile and visually compelling.

Implementation Details

The neck generation function now accepts a direction parameter:

function generateNeck(direction: number) {
  // direction: 1 for upward (top), -1 for downward (bottom)
  const neckStartY = orbCenterY + direction * orbRadius * 0.85;
  // ... particle generation
}

For horizontal orientation, the entire group is rotated:

if (config.orientation === 'horizontal') {
  group.rotation.z = Math.PI / 2;
}

Navigation Updates

FlarePageLayout.astro

Added new entry for Orb with Neck:

const flareComponents = [
  // ... existing entries
  { slug: 'human-back', name: 'Glowing Orb' },
  { slug: 'orb-neck', name: 'Orb with Neck' },  // NEW
  // ...
];

Gallery Index

Updated /design-system/flare/index.astro with new component entries and descriptions:

Demo Pages

New Demo: /design-system/flare/orb-neck

Showcases all configuration options:

• Main display: Both necks, vertical orientation

• Variant 1: Bottom neck only

• Variant 2: Top neck only

• Variant 3: Horizontal orientation (both necks)

• Variant 4: Purple glow color

Updated: /design-system/flare/human-back

Now shows only the simple glowing orb with color variants (purple, green, pink glow).

Technical Notes

Particle Distribution

Both neck directions use the same particle generation algorithm:

• 5,000 particles per neck

• Tapered cylinder shape (wider near orb, narrower at end)

• Opacity gradient (brighter near orb, fading outward)

• Bias toward the orb end for natural density distribution

Performance

The Orb with Neck component generates up to ~53,000 particles when rendering both necks:

• Orb: 35,000 particles

• Orb glow: 8,000 particles

• Each neck: 5,000 particles

• Each neck glow: 1,200 particles

All flare components continue to use lazy loading via IntersectionObserver to prevent WebGL context exhaustion.

Summary

This refactor improves the flare component library in three ways:

1. Better naming: EventHorizon--Spectra accurately describes the visual

2. Separation of concerns: Simple orb vs. configurable orb-with-neck as distinct components

3. Enhanced configurability: Neck positions (top/bottom/both) and orientation (vertical/horizontal) as props

The component library now has 15 distinct flare visualizations for use across the Dark Matter site.