The Temper
The story behind The Temper
Inspired by Nickel titanium on Wikipedia
Built with Canvas 2D · Mass-Spring-Damper Physics · Evolving Rest State
Techniques Per-Segment Spring Stiffness · Displacement Clamping · Memory Evolution · Ghost Lines · Radial Tip Glow · Stress-Dependent Color Shift
Direction A material that fights you, then surrenders, then learns you
Result A field of metallic filaments that snap back to shape — until your persistence rewrites their memory
The Story
In 1959, William Buehler was testing nickel-titanium alloys at the Naval Ordnance Laboratory in White Oak, Maryland. He was looking for missile nose cone materials — something that could survive re-entry heat. He found something stranger. A strip of the alloy, bent and crumpled at room temperature, sprang back to its original shape when heated. His colleague David Muzzey demonstrated this at a laboratory meeting by holding a lighter under a folded sample. The strip unfolded itself. They named it Nitinol — Nickel Titanium Naval Ordnance Laboratory.
The physics is a reversible crystal phase transition. At low temperature, the alloy exists as martensite — a soft, easily deformed lattice. Heat it past the transition temperature and it snaps to austenite, a rigid cubic structure that remembers the shape it was trained to hold. Deform it cold, heat it, and it returns. Every time.
But here is the detail that makes it human: you can reprogram the memory. Hold the alloy in a new shape and anneal it — sustained heat, sustained force — and the austenite phase adopts the new configuration. The old shape is forgotten. The metal learns. This is not damage. It is not breaking. It is a material being convinced.
The Take
The experience opens on 280 metallic filaments rising from the bottom of a dark charcoal field with a cool green undertone. They have natural variation — slight differences in hue, brightness, thickness, a gentle lean or curve to each one. They look like a bed of fine copper wire, catching light at their tips with a radial gold glow.
Drag across them and they bend. Release, and they spring back — fast, elastic, insistent. The metal knows its shape. Narrative text appears near your interaction point, first-person from the material: “That’s not my shape.” “I was set at 500 degrees.” The filaments resist you with the confidence of something that has been trained.
But keep dragging. Return to the same strands. Bend them again and again. Gradually, the rest positions shift — the shape the filaments spring back TO starts drifting toward the shape YOU keep imposing. Ghost lines appear, showing where the original rest position used to be, growing fainter as the memory fades. The tip glow shifts from warm gold to cool silver-blue under stress, then settles into something new as the metal accepts its new training. The voice changes too: “I’m starting to forget.” “…almost back.” And finally: “I remember you now.”
The Tech
Mass-Spring-Damper System: Per-Segment Physics
Each filament is a chain of segments, each with independent spring stiffness and velocity damping. The spring force pulls each segment back toward its current rest angle, while damping prevents oscillation from becoming perpetual. The stiffness is tuned high enough that the snap-back feels metallic — not rubbery, not sluggish — with a fast initial return that decelerates into the rest position. Displacement clamping prevents adjacent strands from crossing through each other during aggressive drags, maintaining the physical coherence of the field.
Memory Evolution: Rest State Drift
This is the core mechanic. Each segment maintains a rest position — the angle it springs back to. On every interaction, the rest position drifts a small amount toward the deformed position. The drift rate is proportional to cumulative interaction: first touches produce almost no change, but repeated deformation at the same strand accelerates the shift. This models the annealing process — sustained stress rewrites the crystalline memory.
The drift is irreversible within a session. Once a filament has learned a new rest position, it springs back to THAT shape, not the original. Ghost lines render the original rest configuration as faint traces, so the viewer can see the distance between what the metal was and what it has become.
Per-Strand Visual Variation
No two filaments are identical. Each strand receives randomized hue shift (within a warm gold-to-copper range), brightness variation, and thickness. A subtle natural lean and curve is applied at initialization — slight angular offsets per segment that give each filament a unique at-rest posture. This prevents the field from reading as a uniform grid and creates the impression of a material with grain and character.
Radial Tip Glow and Stress-Dependent Color
Each filament tip renders a radial glow — a soft circle of light that catches the eye and gives the metallic field its luminous quality. The glow color responds to mechanical stress: at rest, it sits in warm gold tones matching the copper palette. Under active deformation, it shifts toward cool silver-blue, visualizing the martensite-to-austenite transition as a temperature metaphor. As the strand’s memory evolves and it settles into a new rest state, the glow color finds a new equilibrium between the two.
Pointer Smoothing and Interaction Radius
Raw pointer input is smoothed over several frames to produce natural drag trajectories — removing the jitter of fast mouse movement and making touch interaction feel deliberate. The interaction radius is tuned so that a single drag affects a cluster of nearby filaments, creating the satisfying visual of a wave of bending propagating outward from the cursor. The force falls off with distance from the pointer, so center strands bend fully while edge strands deflect gently.
Narrative Positioning
Text appears near the point of interaction rather than in a fixed screen position. The first-person voice — the material speaking — is set in Newsreader, an editorial serif that reads as both scientific and intimate. Lines fade in on interaction and fade out on release, timed to the rhythm of bending and recovery. The narrative arc tracks the memory state: early lines express resistance and identity, middle lines show uncertainty, and final lines acknowledge transformation.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.