# Time and seek > The renderer never plays a page. It seeks the page to a time t and paints one frame, so every frame must come from t alone. Canonical: https://vawe.dev/docs/time-and-seek To seek is to set the page to a time `t` in seconds and paint the frame for that time. The renderer never plays the page. For each frame it seeks, takes a picture and moves on. Your page code must be a pure function of `t`. ## Why it exists A film must come out the same on every render, in any order, on any number of workers. A page that plays in real time cannot do this, because the wall clock differs on every run. A seek has no wall clock: frame 400 needs only the number 6.667, not frame 399. This is also why vawe can render slices of a film in parallel, and render again only the seconds that you changed. See [Determinism](https://vawe.dev/docs/determinism). ## How it works The function `seekTo` in `core/engine/page-seek.js` does one seek, in this order: 1. It waits for the page to start (image decodes, `fetch` and the fonts) and for `document.fonts`. 2. It sets the virtual clock to `t`. 3. It calls `window.seek(t)` when your page defines it. It waits only for a native `Promise`. 4. It pauses every CSS animation and Web Animation and sets its `currentTime` to `t * 1000` milliseconds. 5. It seeks every SVG animation with `setCurrentTime(t)`. 6. It calls every hook that you registered with `vawe.onFrame`. After the seek, the renderer waits for fonts, for image decodes and for two real paints. Then it takes the screenshot. ### Two ways to move You can use either way, or both in one page. | way | you write | the renderer does | | ---------------------- | ---------------------------------------- | ---------------------------------------- | | CSS and Web Animations | `@keyframes` or `element.animate()` | It sets `currentTime` on each animation. | | `window.seek(t)` | A function that paints the frame for `t` | It calls the function on every seek. | Use `window.seek(t)` for canvas, three.js and anything else that CSS cannot move. A CSS `linear()` string cannot run in `window.seek` or `onFrame` code. There, use `easeFn(name)` from `core/motion/presets.js` for a named ease. ### The virtual clock Before any page script runs, `core/engine/page-clock.js` replaces these APIs. They follow the seek time. | API | What the page sees | | --------------------------- | -------------------------------------------------------------------------------------------------- | | `Date`, `performance.now` | The film time in milliseconds. | | `requestAnimationFrame` | Callbacks run once for each seek, with the film time. | | `setTimeout`, `setInterval` | They fire when the seek passes their due time, in due order. | | `Math.random` | A seeded generator. It starts again from `t` on each seek, so the same `t` gives the same numbers. | A page that reads the clock still gets the seek time. Do not rely on this. Write each value as a function of `t`. For a value that must look random but stay the same, use `rng(seed)` from `core/motion/springs.js`. See seeded random. ## Frames and rates The render rate is not part of the page. A draft renders at 30 fps and a final at 60 fps. The script `harness/media/render-page.mjs` takes `--fps N` for another rate. The number of frames is `round(duration x fps)`, and frame `i` shows the time `from + i / fps`, where `from` is the `--from` second of a draft window. At 60 fps, 1.2 s is frame 72. `` is a different thing. It is the rate of your own frame tables, and the page reads it as `window.vawe.fps`. A page can seek at a time that is not a whole frame. Motion blur does this: it blends up to 32 subframes for each frame of a final. Write a table in seconds or in your own frame rate. Never assume that `t` is a multiple of `1 / 60`.