NOVA
3D / MOTION / CREATIVE DEVELOPMENT
BUILD NOTES ↘
LOADING ORIGINAL GLTF
OBJECT / 01 INTERACTIVE PRODUCT STUDY

Scroll-controlled product film.
No pre-rendered video.

An animated product asset, rebuilt for the browser.

NOVA

01 / FORM

Give the
object the page.

The interface does less so the model can do more. Framing follows the headphone body, not the oversized cable bounds, and the product remains readable while the camera moves.

FRAME

Readable from open form to folded pose without forcing the object into a generic product-card layout.

CAMERA CHOREOGRAPHY AND SOURCE ANIMATION ARE CONTROLLED INDEPENDENTLY.
02 / MECHANISM

The source
animation
becomes the timeline.

The original 27.71-second skeletal clip is scrubbed directly by this chapter. No fake explode animation and no video baked over the canvas.

36skin joints
14skinned meshes
3source clips
42main clip channels
03 / CHOREOGRAPHY

Scroll is
the director.

Model pose, camera arc, key light and typography run on separate curves. It reads like a product film, but the visitor owns the playhead.

01  SOURCE POSE02  CAMERA03  LIGHT04  TYPE
04 / LIVE INPUT

Light follows
your movement.

Pointer movement shifts the key light and restrained parallax. Dragging is intentionally unnecessary: the product stays art-directed instead of turning into a toy.

MOVE POINTER
LIVE INPUT

Interaction changes emphasis, not orientation.

05 / BUILD

Built as
a system.

The model is not a background decoration. Source animation, scroll state, camera, light and responsive framing are composed as separate systems and synchronized at runtime.

THREE.JSGLTF RUNTIMESKINNED ANIMATIONSCROLL CHOREOGRAPHYPOINTER LIGHTINGRESPONSIVE 3D