# timeline **Repository Path**: mirrors_pmndrs/timeline ## Basic Information - **Project Name**: timeline - **Description**: → Write composable declarative 3D behaviors like a story. - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-17 - **Last Updated**: 2026-02-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

@react-three/timeline

Write composable
3D behaviors like a story.


NPM NPM Twitter Discord

```bash npm install three @react-three/fiber @react-three/timeline ``` ### What does it look like? | A simple timeline with 2 actions (look at red pill and look at blue pill) with an infinite loop | ![render of the above code](./docs/getting-started/basic-example.gif) | | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ```tsx const camera = useThree((s) => s.camera) const redPill = useRef(null) const bluePill = useRef(null) useRunTimeline(async function* () { while (true) { //transition to look at the red pill yield* action({ update: lookAt(camera, redPill.current!, spring()) }) //transition to look at the blue pill yield* action({ update: lookAt(camera, bluePill.current!, spring()) }) } }, []) return ( <> Remember: all I'm offering is the truth. Nothing more. ) ``` ## Documentation - [What is a timeline?](https://pmndrs.github.io/timeline/getting-started/1-what-is-a-timeline) - [Building your First Timeline](https://pmndrs.github.io/timeline/getting-started/2-first-timeline) - [Overview over All Functions](https://pmndrs.github.io/timeline/getting-started/3-overview) - [Tutorial: Building Complex Timelines using Parallel](https://pmndrs.github.io/timeline/tutorials/5-parallel) - [Tutorial: Building Graph Timelines](https://pmndrs.github.io/timeline/tutorials/6-graph) - [Tutorial: Use pmndrs/timeline in vanilla three.js](https://pmndrs.github.io/timeline/tutorials/7-vanilla) ## Sponsors This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out! ![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png) ## Roadmap [ ] record, useRecordedTimeline, ... => allows to bind the timeline progress to any controls (e.g. scrolling); allowing using markers to attach scroll positions (e.g. button center screen) to the time of the timeline