A compact making-of
Chrome
with a
pulse.
A process note for HALIDE, a fictional trailer-sound studio whose work is about force, surface, and the precise instant a picture changes temperature.
01 / Concept
Sound as a physical
thing.
HALIDE needed to feel less like a post house and more like the material a trailer is trying to make in an audience: unstable, reflective, too heavy to ignore. The site’s hard-left type acts like a title card; the liquid form behind it supplies the pressure.
The acid green is deliberately rare. It is the clip light in a dark room: a tiny signal that something is live, over the edge, or ready to strike.
02 / Signature technique
A raymarched
metal field.
The canvas is a real WebGL fragment shader. Five animated sphere distance fields are blended with a smooth-union operation, so their join stays soft as they merge and peel apart. A ray advances through that signed-distance scene until it reaches the surface; the surface normal is then used to reflect a small, procedural studio environment.
float smoothUnion(float a, float b, float k) {
float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
return mix(b, a, h) - k * h * (1.0 - h);
}
float scene(vec3 p) {
float t = u_time;
vec2 pull = u_mouse * 0.24;
p.xy += vec2(
sin(p.y * 3.7 + t * 0.78 + u_mouse.x * 1.6),
cos(p.x * 4.1 - t * 0.64 + u_mouse.y * 1.6)
) * 0.042;
vec3 a = vec3(-0.97 + 0.15 * sin(t * 0.73),
0.10 + 0.26 * sin(t * 1.11), 0.10 + 0.18 * cos(t * 0.51));
vec3 b = vec3(-0.38 + 0.18 * cos(t * 0.91),
-0.16 + 0.24 * sin(t * 0.66), 0.04 + 0.14 * sin(t * 0.77));
vec3 c = vec3( 0.29 + 0.17 * sin(t * 0.82),
0.18 + 0.20 * cos(t * 0.58), 0.03 + 0.16 * cos(t * 0.63));
vec3 d = vec3( 0.91 + 0.15 * cos(t * 0.69),
-0.08 + 0.26 * sin(t * 0.87), 0.09 + 0.12 * sin(t * 0.97));
vec3 e = vec3( 0.02 + 0.21 * cos(t * 0.62),
0.62 + 0.12 * sin(t * 0.79), 0.00);
a.xy += pull * 0.72;
c.xy += pull * 1.24;
e.xy += pull * 0.52;
float field = smoothUnion(sphere(p - a, 0.72), sphere(p - b, 0.79), 0.48);
field = smoothUnion(field, sphere(p - c, 0.81), 0.48);
field = smoothUnion(field, sphere(p - d, 0.70), 0.48);
return smoothUnion(field, sphere(p - e, 0.57), 0.43);
}Cursor position shifts the camera, pulls selected blobs out of equilibrium, and slightly shears the field so the joins do not merely orbit. A thin acid studio light travels through the reflected environment rather than animating the UI. The render resolution is capped at device-pixel-ratio 1.25 on small screens and 1.5 above them; the loop pauses in hidden tabs and once the hero leaves view. Reduced-motion visitors receive a single still render rather than the moving field.
03 / Palette + type
Cold surface,
hot signal.
04 / Iteration log
Three passes,
kept in view.
- Pass 1 — correctness. Added a visible static chrome fallback for unavailable WebGL, failed shader setup, and lost contexts; the live canvas replaces it only after a successful draw.
- Rebuilt the renderer lifecycle so the field pauses when the page is hidden or the hero is out of view, restarts after a restored WebGL context, and uses a lower capped render scale (1.25 on small screens, 1.5 otherwise) with a 72-step march to avoid unnecessary frame cost.
- Made interactive text links at least 44px tall, prevented the contact address and code sample from forcing horizontal page scroll, and added opaque backdrops where dynamic chrome could weaken text contrast.
- Known limitation: without WebGL the fallback is deliberately still; it preserves the chrome composition but cannot respond to the cursor.
Pass 2 — design depth
- Weak moment: repeated dark panels. The closing contact block read like another safe, left-aligned headline section. It is now an acid-signal end card with an oversized off-edge ring and wordmark, giving the page one decisive inversion instead of a fifth variation on black.
- Weak moment: even typographic pressure. Display headlines were all close in scale and leading, while the work rows marched at one cadence. A named spacing scale now sets the rhythm; the statement is pushed larger and tighter, and the middle project breaks rank with a shifted, acid title.
- Weak moment: chrome as backdrop only. The metaball field now receives a light cursor-driven shear in addition to its mass pull, while a traveling acid line exists only in its reflected environment. The interface still makes hard cuts; the material carries the motion.
Pass 3 — complexify
- New moment: the pressure probe. The work list now opens into a small, scrubbable H-034 signal study. Pointer movement exposes the contour from room tone to blackout tail; keyboard arrows, Home, End, and Escape provide the same control. It gives the visitor a way to feel how HALIDE locates a trailer’s break rather than merely reading about it.
- Edge state made intentional. At zero, the waveform resolves to “Room tone” and names the absence of a transient instead of leaving the console blank. At full pressure it becomes “Blackout tail,” so the interaction has a real ending rather than a dead maximum.
- Finish pass. Added subject-specific Open Graph metadata and a theme color, retained the ready-only WebGL handoff, and kept all state changes short or motion-free for reduced-motion visitors. The final copy removes the generic portfolio tone: each section now names a trailer decision, a material, or a listening action.