Components•Scene states
Components•Scene states
Scene states
Sections declare camera poses with data attributes and scroll blends between them. A small engine with no three.js inside: it returns a pose and params, and a rig damps toward them frame-rate independently.
Dependencies
three
Copy below cli
npx shadcn add https://ui.isaiahbjork.com/scene-states.jsonHow to use
import { createSceneRig, poseToPosition, useSceneStates } from "@/components/bjork-ui/_core/scene-states";const defs = { intro: { pose: { target: [0, 1, 0], radius: 10, phi: 1.1, theta: 0.6 }, params: { glow: 0 } }, detail: { pose: { target: [0, 1, 0], radius: 3, phi: 1.3, theta: null }, params: { glow: 1 } },};const rig = createSceneRig(defs.intro);export function Scene() { const states = useSceneStates(defs, { fadeKeys: ["glow"] }); // In your render loop: // const s = states.current?.sample(); // const { pose, params } = rig.update(s, dt); // camera.position.set(...poseToPosition(pose)); camera.lookAt(...pose.target); return ( <> <section data-scene-state="intro" /> <section data-scene-state="detail" data-scene-lead="0.4" /> </> );}