We built an interactive ribbon sculpture for our own website at EmberGrids. The idea was to give the visual identity a physical presence while keeping the site’s reading and navigation independent of the canvas.
The scene uses Three.js r186, WebGPURenderer and TSL. The ribbon is generated along a closed curve with twisted, elliptical cross-sections. A physical node material provides the metallic surface, and a TSL position node displaces vertices along their local normals. A small canvas-generated environment supplies the studio reflections without a separate HDR download.
Visitors can switch between Orbit, Flow and Signal. The compositions respond to pointer movement and scrolling, with a visible pause control. We spent time testing the paused state with image comparisons because stopping the main animation loop alone did not catch every unwanted visual transition.
The renderer can fall back from WebGPU to WebGL2. A separate static composition remains available when the live scene cannot initialize. Reduced-motion preferences stop animation; the loop also pauses when the scene is outside the observed viewport area or the page is hidden. Where the browser exposes data-saving or low-memory hints, the loader keeps the static version.
The headings, service information, links and contact journey are ordinary HTML. The sculpture is decorative, and visitors can use the site without interacting with it.
Our build note covers the implementation and release checks, including WebGPU in Chrome, fallback testing, real control hit-testing and the limits of our local performance measurements.
We would appreciate feedback on the ribbon’s material response and the transitions between the three compositions, especially from people testing different browsers and GPUs.