Station Spectrum

Animated N-station progress diagram with a hairline rail that draws on scroll-entry and dots that illuminate sequentially via CSS transition delays.

Preview

DiscoveryGoals, audience, constraints, what success looks like.
BrandName, identity, voice, and a design system that scales.
Product designWireframes, screens, interactions, prototypes you can hold.
EngineeringApps, websites, APIs. Built, shipped, and live in production.
InfrastructureLogs, metrics, deploys, on-call. The boring parts.

Compact Density

The compact density reduces dot size and hides descriptions — useful for tight horizontal spaces or secondary diagrams.

PlanScope, timeline, and constraints.
BuildEngineering and design in lockstep.
ShipDeploy, monitor, iterate.

7-Station Layout

Verifies even distribution when station count is large. Rail endpoints align with the first and last dot centers regardless of N.

Plan
Research
Brand
Design
Build
Test
Ship

By default, StationSpectrum auto-wires an IntersectionObserver to animate when it enters the viewport (autoTrigger={true}). To control the trigger manually — for example, when you want to coordinate the animation with other elements — set autoTrigger={false} and pass your own inView state.

Discovery
Brand
Engineering
Launch

Animation not triggered — pass inView={true} to activate.

Animation Strategy

The animation is driven entirely by CSS — no JavaScript animation loop is needed.

Rail: transform: scaleX(0) → scaleX(1) with transform-origin: left center, transitioned via --motion-duration-slow and --motion-easing-enter. Applied when the .inView class is present on the root element.

Dots: Each dot transitions its background-color from transparent to --interactive-primary-bg with a staggered transition-delay:

transition-delay: calc(var(--idx) * 80ms + 200ms);

The --idx CSS custom property is set per-station via inline style, creating a sequential left-to-right illumination effect.

Reduced Motion

When prefers-reduced-motion: reduce is active, all transitions are suppressed. The rail appears at full width and all dots appear illuminated instantly — the diagram remains readable with no animation.

Trigger Mechanism

The animation is controlled by the inView CSS module class on the root. From the component API perspective:

`autoTrigger`	`inView`	Behavior
`true` (default)	(ignored)	IntersectionObserver fires at 30% threshold; animation triggers once
`false`	`true`	Rail draws and dots illuminate
`false`	`false`	No animation — pre-trigger state

Installation

npx visor add station-spectrum

Usage

import { StationSpectrum } from '@/components/ui/station-spectrum/station-spectrum';

<StationSpectrum
  stations={[
    { num: '01', title: 'Discovery', description: 'Goals, audience, constraints.' },
    { num: '02', title: 'Brand',     description: 'Identity and design system.' },
    { num: '03', title: 'Engineering', description: 'Built and shipped.' },
  ]}
/>

Prop	Type	Required	Description
`num`	`string`	Yes	Numeric label displayed above the dot, e.g. `"01"`.
`title`	`string`	Yes	Station title displayed beneath the dot.
`description`	`string`	No	Optional description text shown beneath the title. Hidden in `compact` density.

Accessibility

The stations are rendered as a semantic <ol> (ordered list) with aria-label="Process stages".
Decorative elements (the rail, dot rows) are marked aria-hidden="true" — the station titles and descriptions are the accessible content.
prefers-reduced-motion is respected: animation is suppressed and the diagram renders in its final illuminated state instantly.
Do not rely solely on color to convey stage completion — pair with text labels (always required in this component).

When to Use

Illustrating a multi-step process, pipeline, or phased journey on a marketing or landing page
Showing the stages of an engagement model (discovery → brand → engineering → infrastructure)
Animating a sequential workflow diagram that reveals on scroll

When Not to Use

When the user needs to navigate between steps — use stepper instead
When stations need icons or custom rendering per dot
In compact admin layouts where a horizontal rail cannot breathe (use a text list or timeline instead)
For vertical orientation — StationSpectrum is horizontal-only in v1