Silhouette Shifter

A silhouette emerging from a halftone-like grid of small copper-red cylinders on black, lit in patches while the rest fades into shadow.

Scroll to explore Swipe to explore

Use your scroll wheel to navigate the scene Swipe up and down to navigate the scene

/* No JS → no scene can ever mount, so keep the pixel skeleton looping as a perpetual loader (Bram 2026-07-28). The shimmer is pure CSS animation, so it runs without JS on its own; we only ensure the skeleton stays the visible layer and the cover image stays hidden beneath it. The hint card needs no rule here — it only shows at data-scene-state="ready", which is unreachable without JS. */ [data-scene-container] .scene-skeleton { opacity: 1 !important; visibility: visible !important; } [data-scene-container] .card-image { opacity: 0 !important; }

Shapes made of cylinders

Thousands of small cylinders, all the same, standing in a grid. Together they make a silhouette. Scroll and they rearrange into the next one.

Techstack

To nerd out a bit: Three.js instancing, so thousands of cylinders cost about the same as one. Custom GLSL shaders handle the morph. Frame buffer objects hold the silhouette data for all three states.

Credits

Inspired by the morphing silhouettes of Arqitel. Technical guidance from @akella_.