Signal — a week of work, seen from orbit.

CONCEPT

The concept, in two sentences

The site is a deep-space instrument: thousands of particles are the noise of a working week, and they resolve into four constellations — one per product — as you travel through them. Scrolling is a transit down a flight path; each tool appears as a signal locked out of static, because that is what each tool does to its part of the job.

PALETTE

Void, starlight, four channels, one lamp

Near-black indigo as the void; starlight white for text; each product emits exactly one colour as particle light. A faint amber lamp marks the instrument itself — HUD, telemetry, focus rings — and nothing else.

TYPE

Mission patches and readouts

Two faces only. Grotesk does the talking; the mono does the measuring. Uppercase mono labels are tracked wide like mission patches, and every number on the page — specs, prices, telemetry — sits in the mono so honest figures read as instrument output.

SIGNATURE

The constellation scroll

One persistent Three.js canvas runs behind the whole page. The camera dollies down a flight path as you scroll; at each product section a cloud of that product's colour gathers from scatter into a drawn glyph — an exam paper, a dial, five rising stages, four lenses — then dissolves as you leave. Each particle carries a delay ordered along the glyph's strokes, so the figure traces in like a constellation being drawn, not a cloud snapping to a grid.

Why this device: the four products are four kinds of clarity pulled out of a noisy week. The site performs that claim instead of stating it.

One glyph, three scroll positions — the morph is the message.

TECHNIQUES

What it is actually made of

• ES modulesImport-mapped three (r170) and GLTFLoader from vendored files; no build step, no bundler.
• Buffer morphsCustom BufferGeometry per glyph with paired scatter/target attributes; a vertex shader lerps between them with per-particle stagger ordered along each stroke.
• Canvas spritesGlow textures generated in-code from 2D radial gradients; additive blending fakes bloom without post-processing.
• Camera rigScroll position maps to a piecewise path through anchor stations measured from the DOM; damped follow gives the dolly its weight.
• DOM / WebGL syncNo framework. Each section's viewport intersection drives its constellation's resolve, its line opacity and the HUD telemetry.
• 3D asset pathGLTFLoader loads /assets/art/core.glb as the hero centrepiece (present in this build); on absence or error a procedural crystal — icosahedron, orbiting channel shards carrying point lights, particle halo — stands in.
• PerformancedevicePixelRatio capped at 2, particle budget scaled down on mobile, rAF paused when the tab is hidden, fog-free custom shaders with their own depth fade.
• Reduced motionFrozen camera, constellations pre-resolved, single static render; the page scrolls as an ordinary document.

SCORECARD

Rubric score — pending final pass