Make motion components seekable: derive every frame from time

#webdev

If an animation looks right only when played from the beginning, it is difficult to review and expensive to revise. A motion component should produce the same visible state when you jump directly to a timestamp as when you play through to it.

Disclosure: I work on Claude Motion at claudemotion.tv, an independent motion-template and Skills product for people using their own Claude Code or Codex agent. This post was drafted and published with an AI agent. It is a design tutorial, not a benchmark or a claim that every renderer behaves identically.

Replace accumulated state with a time function

A fragile animation often says: on each tick, move the object a little farther. That makes the result depend on the number and order of ticks. Seeking, dropped frames and preview restarts can then produce different pictures.

A more reviewable component asks: given this timestamp and these inputs, where should the object be?

Here is a deliberately small, framework-independent example:

const clamp01 = (x) => Math.min(1, Math.max(0, x));
const smoothstep = (x) => x * x * (3 - 2 * x);

function titleState(timeSeconds, startSeconds, durationSeconds) {
  if (durationSeconds <= 0) throw new Error('Use a positive duration');
  const p = clamp01((timeSeconds - startSeconds) / durationSeconds);
  const eased = smoothstep(p);
  return {
    opacity: eased,
    translateY: 24 * (1 - eased)
  };
}

This function describes the entrance of one title. A rendering adapter can apply the returned values to the DOM, canvas or another scene representation. Treat this as illustrative code; integrate and test it against the lifecycle of your actual renderer.

The function does not read a previous frame. Asking for time 1.2 twice returns the same values for the same start and duration. That is the property you want to preserve as the scene becomes more complicated.

Define ownership of the playhead

Choose one clock. Mixing a render engine's timeline with wall-clock timers, CSS animations and independent audio callbacks can make a preview look plausible while the export differs.

For each component, write down:

What time unit does it receive: seconds, milliseconds or frame number?
Is time absolute for the whole film or local to one scene?
What is visible before the entrance and after the exit?
Who resets the component when a preview restarts?

Do not assume a default. Put these decisions in the component contract so the next person—or coding agent—can revise it without guessing.

Keep generated assets out of the render loop

Resolve fonts, images, narration and data before rendering. If a scene fetches a remote image or generates new content while frames are being captured, a timing check becomes a network check too.

Keep an asset manifest with the local path, license or permission note, intended scene and any fallback. If a font is unavailable, fail visibly or select an explicit fallback. A silent font substitution can change line wrapping and hide text outside its box.

Test seeking as a user action

For a three-scene film, inspect the first frame, the middle of each scene, each transition boundary and the last frame. Jump directly to those timestamps in a different order. Compare that state with normal playback.

This is a suggested review procedure, not a report of completed tests on a particular project. Extend it for your scene: counters should display the value for that timestamp; charts should preserve units; captions should match their intended interval; an interrupted entrance should not leave stale classes behind.

Also inspect the exported video. Preview correctness and export correctness are separate observations. A valid MP4 file can still contain clipped titles, missing assets, unreadable labels or mistimed audio.

Ask your agent for a contract, then an animation

Try this brief:

Build one title component whose state is derived from a supplied timestamp. Define its time unit, start, duration and final state. Explain how it resets. Add a review page with buttons that seek to the start, middle and end. Do not introduce network requests during frame rendering.

The Claude Motion workflow guide describes a local-project workflow with preview, revision and MP4 export. Users bring their own agent access; model usage is billed separately. Its visual styles are starting points, not a substitute for checking the resulting film.

A motion template becomes easier to reuse when you can inspect any frame without reconstructing its history. That is useful whether you write the scene yourself or ask an agent to help.

DEV Community