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:

Before	After
ImageAbstract--DNA-Figure8.astro	ImageAbstract--EventHorizon--Spectra.astro
/design-system/flare/dna-figure8	/design-system/flare/event-horizon-spectra
Title: "DNA Figure-8"	Title: "Spectra for Event Horizon"

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

Prop	Type	Default	Description
necks	'bottom' | 'top' | 'both'	'both'	Which necks to render
orientation	'vertical' | 'horizontal'	'vertical'	Overall orientation

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:

Slug	Name	Description
event-horizon-spectra	Spectra for Event Horizon	Dual-ring visualization with acoustic spikes
human-back	Glowing Orb	Dense particle sphere with ethereal glow halo
orb-neck	Orb with Neck	Glowing orb with elegant neck column

---

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.