Fringe

Concept

The subject is a field you cannot feel

Stress lives inside every loaded part, invisible. Photoelasticity is the trick that gives it a body: a transparent birefringent material, viewed between two crossed polarising filters, converts the difference in principal stresses into a visible interference colour. FRINGE is a fictional stress-analysis lab whose single job on this page is to make that erupt — the resting hook already glowing, the fringes crowding where the part will fail first. The audience is engineers and product designers who want to see a stress concentration, not just compute one.

Palette — argued from the subject

Crossed-dark ground, contained spectral fringe

A crossed polariscope has a black field until something is stressed, so the ground is near-black and the interference colour is the only saturation on the page — reserved entirely for the art. The bright cyan is a contained spectral note used for interactive marks and focus, never for small text; body copy runs on a derived light ink for legibility.

The fringe spectrum itself — computed, not painted

Type

A serif for the light, a mono for the numbers

Cormorant Garamond carries the display and body — a high-contrast Garamond whose thin strokes feel optical, like something seen through glass, and whose large italic sets the one moment of typographic bravery in the wordmark. IBM Plex Mono handles every readout, eyebrow and label: fringe order, retardation in nanometres, applied load in kilonewtons — the instrument voice against the lyrical one.

Technique

A GLSL photoelastic fringe shader

The hero is a single full-screen fragment shader, raw WebGL, no library. A signed-distance field builds the hook — a partial arc for the curl, a capsule shank and a ring eye, smooth-unioned. For every fragment inside the part the shader fabricates a physically-motivated stress difference: curved-beam bending that peaks at the inner fibre of the throat, near-uniform axial tension in the shank, and two sharp stress concentrations at the inner throat and under the eye.

That stress difference becomes an optical retardation in nanometres. The transmitted colour is then integrated across the visible spectrum — twenty-four wavelengths, each weighted by an analytic approximation of the CIE colour-matching functions, its intensity the dark-field polariscope term sin²(πR/λ), summed in XYZ and converted to sRGB. Zero stress gives black extinction; as retardation climbs the pixel walks the true Michel-Lévy colour sequence. Raise the load and the retardation rises, so the sin² term cycles faster and the fringes literally multiply and crowd at the concentrations. A faint, slowly rotating isoclinic brush recalls the plane polariscope beneath the colour.

The fringe-order legend in section 02 runs the identical colour model in JavaScript, painting a canvas strip so the chart and the object are guaranteed to agree. GSAP choreographs one load-in sequence and the quiet scroll reveals.

Robustness

What happens when things go wrong

• No WebGL, or a lost context: the canvas is removed and a CSS rosette of nested spectral radials stands in, so the hero never goes blank.
• prefers-reduced-motion: the shader draws a single loaded frame — the hook still glowing with fringes — and no animation loop starts (guarded in CSS and with a matchMedia check before every loop).
• The render loop pauses when the tab is hidden or the hero scrolls out of view; device pixel ratio is capped and the canvas is sized to its container on resize.
• The readouts keep updating even on the fallback path, so the numbers never desync from the slider.

Iteration log

Three passes