LiveMotion Design

HeroLab

A robot that's built, tuned and launched in hand-coded 3D.

Role: Motion & UI design
Date: Nov 2026
Tags: 3D, React Three Fiber, Scroll story

HeroLab: a caped robot flying past a full moon over the city, beside the line That one's flying

The idea

A library of art-directed 3D hero sections. Experience 001, The Workshop, tells one small story: a robot is drawn, built by hand, tuned by you and launched through an arch as you scroll.

The process

Every object is generated in code with React Three Fiber; there are no model files. Scroll beats and camera shots live in data, and a schema-driven studio panel tunes colours, copy and motion without touching the scene.

Motion techniques

Scroll-driven camera shots in React Three Fiber
Per-frame state outside React, so scrolling never re-renders
Live colour changes through shared 3D materials
Motion for the DOM layers, GSAP for the story
A calm version with a play button for reduced motion

The outcome

A hero that feels hand-made and stays fast. The 3D scene loads on demand, a static poster covers loading and devices without WebGL, and the story still reads without animation.

The HeroLab workshop: the robot on its launch pad beside the headline Heroes aren't born. They're built. — The workshop, generated entirely in code.

A robotic arm finishing the robot, beside the line Then every seam, by hand — Build: the camera moves in as the robot is finished.