or run

npx @tessl/cli init
Log in

Version

Files

evals

scenario-3

rubric.jsontask.md
tile.json

task.mdevals/scenario-3/

Animated Frame Timeline

An animated timeline controller that plays named data snapshots on an interactive chart using frame-based transitions.

Capabilities

Initializes animated chart

  • Creates the chart in the provided container using the base figure, applies the first frame if supplied, and exposes playback controls tied to that chart. @test

Plays, pauses, and loops through frames

  • play() renders frames in order using per-frame durations and easing options, pause() halts progress while keeping the current frame visible, and looped playback returns to the first frame after the last frame. @test

Seek between frames

  • seek(name) jumps directly to the matching frame and updates the visible chart without restarting the entire sequence; subsequent play continues from that frame's successor. @test

Append frames mid-playback

  • appendFrames() accepts new frames during playback and continues the animation queue with the appended frames after the existing ones. @test

Implementation

@generates

API

/**
 * @typedef {Object} Frame
 * @property {string} name - Unique frame identifier.
 * @property {Array<Object>} data - Trace-level overrides for the frame.
 * @property {Object} [layout] - Layout overrides for the frame.
 * @property {number} [duration] - Duration in milliseconds for this frame; falls back to the default when omitted.
 */

/**
 * @typedef {Object} AnimationOptions
 * @property {number} [defaultDuration] - Default per-frame duration in milliseconds.
 * @property {string} [easing] - Easing mode supported by the charting library.
 * @property {boolean} [loop] - Whether playback loops to the first frame after the last frame.
 */

/**
 * @typedef {Object} TimelineController
 * @property {() => Promise<void>} play - Plays from the current frame through the queued frames.
 * @property {() => void} pause - Pauses playback without clearing the current frame.
 * @property {(frameName: string) => Promise<void>} seek - Jumps to a frame by name and makes it visible.
 * @property {(frames: Frame[]) => Promise<void>} appendFrames - Queues additional frames in order.
 */

/**
 * Creates an animated timeline chart within the target container using the provided base figure and frame set.
 * Must render the base figure immediately and prepare frames for animation.
 * @param {HTMLElement} container
 * @param {{ data: Array<Object>, layout?: Object, config?: Object }} baseFigure
 * @param {Frame[]} frames
 * @param {AnimationOptions} [options]
 * @returns {Promise<TimelineController>}
 */
export function createAnimatedTimeline(container, baseFigure, frames, options = {});

Dependencies { .dependencies }

Plotting library { .dependency }

Interactive charting library capable of rendering and animating named frames on a figure. @satisfied-by