https://github.com/pmndrs/timeline
Write composable declarative 3D behaviors like a story.
https://github.com/pmndrs/timeline
Last synced: 6 months ago
JSON representation
Write composable declarative 3D behaviors like a story.
- Host: GitHub
- URL: https://github.com/pmndrs/timeline
- Owner: pmndrs
- License: mit
- Created: 2025-07-15T19:45:56.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-07-16T14:08:56.000Z (6 months ago)
- Last Synced: 2025-07-16T18:36:33.064Z (6 months ago)
- Language: TypeScript
- Size: 50.8 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @react-three/timeline
Write composable declarative 3D behaviors like a story.
```tsx
const camera = useThree((s) => s.camera)
const target1 = useRef(null)
const target2 = useRef(null)
useTimeline(async function* () {
while (true) {
//transition to look at target2
yield* action({ update: lookAt(camera, target1.current!), ease: spring() })
//wait for 2 seconds
yield* action({ until: duration(2, 'seconds') })
//transition to look at target2
yield* action({ update: lookAt(camera, target2.current!), ease: spring() })
//wait for 2 seconds
yield* action({ until: duration(2, 'seconds') })
}
}, [])
return (
<>
>
)
```
## Roadmap before Release
[ ] lookAt, rotateArround, moveTo, ...
[ ] ease configuration
[ ] target distance configuration (allowing to move towards a target with a certain distance)