Skip to content

Camera

<Camera fov={45} cameraZ={8} trackMouse trackDevice />

<Camera> accepts any part of the camera state. Every prop takes a plain value or a signal.

PropDefaultNotes
fov60Vertical field of view, degrees
zoom1
cameraZ8Rest distance from the origin along Z

The camera always looks at the origin.

cameraMode — how the camera follows the pointer

Section titled “cameraMode — how the camera follows the pointer”
ValueBehaviour
0 (default)Damped parallax. X eases toward sin(pointer.x) · range.x, Y toward pointer.y · range.y, Z toward cameraZ, at rate easing.
1Swing. X toward sin(−pointer.x) · 5, Y toward pointer.y · 3.5, Z toward cameraZ + cos(pointer.x) · zDolly, at a fixed rate. The scene appears to swing toward the cursor.
PropDefaultUsed by
easing5Mode 0 damping rate
range{ x: 5, y: 3 }Mode 0 travel
zDolly10Mode 1 Z swing amplitude; 0 flattens it

When the pointer leaves or tracking is off, the camera eases back to rest and the loop stops once it settles.

The camera only moves while rigMode is 0. Any other rig mode hands the pointer to the particles instead.

rigMode — how the particles respond to the pointer

Section titled “rigMode — how the particles respond to the pointer”

Read by the particle vertex shader per dot.

ValueBehaviour
0 (default)Dots orient to the grid plane. The camera rig is active.
1Pointer-look. Each dot angles toward the pointer’s target point, weakened by pointerFalloff.
2Warp. Dots within warpRadius of the pointer push in Z by warpStrength.
3Radial. Each dot angles toward the screen centre.
PropDefaultUsed by
warpStrength3Mode 2
warpRadius4Mode 2
pointerZ0Depth of the pointer’s target plane — modes 1 and the axes overlay
pointerFalloff0Mode 1; 0 is no falloff
PropDefaultNotes
trackMousetruePointer input on desktop
trackDevicetrueDevice orientation on mobile

On mobile trackDevice governs and trackMouse is ignored; on desktop the reverse. Both also switch graviton’s gyro and mouse handling so a persisted graviton element stays flat when fabric is not tracking.

The camera engages on intentional motion only — the cursor must move about six pixels from where the page first saw it before the camera reacts. That stops a page from flipping toward wherever the cursor happened to be at load. Touch and re-entering the window engage immediately.