Quicksilver — liquid metal optimism

Quicksilver imagines the agency's core idea — "we send beautiful things to the Internet" — as living chrome. An idea is poured into the wire like mercury: it flows, it reflects its surroundings, and it never stops moving. The reference is Y2K futurism (Aqua-era gloss, liquid metal, holographic foil), refined to 2026 taste: one hero material, lots of air, art-directed restraint instead of kitsch.

Everything on the page behaves like the material it depicts. Buttons are chrome pills that catch a specular sweep. Services are capsules that inflate springily, as if surface tension resists the cursor. Projects are droplets. The cursor itself is a bead of mercury chasing the pointer. Holographic color is used the way a print shop uses foil stamping — small, deliberate, expensive.

Palette

• Ice lavender #E6E4F0
• Ink plum #201E2D
• Chrome mid #C3C6DA
• Chrome deep #5A5E7D
• Holo cyan #2EC5E6
• Holo pink #F45FC4
• Holo lime #A5D838

A pale ice-lavender ground carries silver chrome neutrals. The three holo hues are never used as flat fills — they only appear inside gradients (foil text, rotating borders, iridescent sheens), and darker "deep" variants keep text contrast honest on the light ground.

Type

Unbounded — rounded, expanded, chrome-worthy.

Schibsted Grotesk carries body copy: friendly geometry, high legibility, quiet enough to let the metal shine.

Shape language

Everything is surface-tension round: full-radius pills, oversized card corners, circular portals. The project cards break one corner (a 0.85rem notch) so each card reads as a droplet about to detach.

The liquid chrome blob

The blob in the services section is a three.js SphereGeometry (160×160) displaced in a custom vertex shader: two octaves of simplex noise animate the surface, and a gaussian bulge term attracts the surface toward the cursor. The pointer position and its strength are driven through an underdamped spring, so the metal overshoots and settles like real liquid. Normals are recomputed per-vertex with finite differences so the reflections stay credible.

The chrome itself is a procedural matcap: a 512×512 canvas painted at runtime with a radial chrome ramp, a hard "studio horizon" band, three holo tints (cyan / pink / lime) blended in overlay, and a pin highlight. No texture files are shipped. If WebGL is unavailable, a CSS-gradient blob takes its place; with prefers-reduced-motion a single static frame is rendered.

The spring system

All hover motion uses CSS linear() spring approximations — a sampled underdamped spring curve stored in --spring-pop and --spring-soft custom properties. Capsules inflate, pills pop, and taglines slide with the same physics family, so the whole page feels like one material. The cursor bead runs a real JS spring with velocity-based squash-and-stretch.

The ping-pong video loop

Kling's 5-second ripple clip doesn't loop natively — the last frame never matches the first. Instead of runtime JS trickery, the palindrome is baked at build time with ffmpeg: the clip is split, reversed, and concatenated (split[a][b];[b]reverse[r];[a][r]concat) into a 10-second forward-then-backward loop that can never jump. Re-encoded at 1080×1080 / CRF 28 it weighs under 1 MB. The poster is the still owl WebP, and reduced-motion users get only the poster.

Both hero assets were generated with Higgsfield's CLI. The still owl was created with GPT Image 2, then handed to Kling 2.6 as the start frame for an image-to-video pass.

quicksilver-owl — GPT Image 2, 1:1

A sculpture of an owl made of flowing liquid chrome mercury, smooth mirror-polished metal with soft iridescent reflections of cyan pink and lime, floating against a pale ice-lavender studio background, soft diffused lighting, Y2K futurism aesthetic, hyperrealistic 3D render, centered, no text, no letters, no watermark

quicksilver-ripple — Kling 2.6 image-to-video, 5 s, 1:1

The liquid chrome owl sculpture's surface slowly ripples like mercury, gentle waves of liquid metal flow across its body, iridescent reflections shift subtly, camera completely static, seamless slow elegant motion, background stays still

CLI flow

1. generate create with the GPT Image 2 prompt above → renders the 2048×2048 chrome owl still.
2. generate create --start-image quicksilver-owl with the Kling 2.6 prompt → animates that exact frame, keeping the camera static so only the surface flows.
3. download → pulls the finished PNG and MP4 into the shared asset library.

1. Scaffold Astro 5; add three, @fontsource-variable/unbounded and @fontsource-variable/schibsted-grotesk (fonts self-hosted, no CDN).
2. Generate the owl still and ripple clip with the prompts above; bake the palindrome loop with ffmpeg and cut WebP posters with sharp.
3. Build the token layer first: ground, chrome neutrals, three holo hues, two linear() springs. Every component only consumes tokens.
4. Compose the page as materials, not sections: portal (video), capsules (services), droplets (projects), foil (headlines), bead (cursor).
5. Wire reduced-motion fallbacks for every moving part, then audit with Playwright at 1440×900 and 390×844 until console and layout are clean.