CreatorMotion · Timeline Node Reveal

Introduce a short chronology with large date labels, small timeline nodes and supporting captions. Each milestone settles in sequence on one horizontal track, then the completed story holds for reading. This 6.6-second shot can include a supplied presenter in a lower corner; it presents your ordered milestones without interpreting their dates or calculating elapsed time.

What you get

  • A local generator, editable HyperFrames timeline and motion/review instructions for a 1920×1080, 30 fps segment. Generate the project from your milestone content, then render the chronological explanation.
  • Up to five milestones with date and caption, plus a presenter toggle. Nodes are evenly spaced by array index; date fields are displayed text rather than parsed temporal values.
  • A track reveal from 0.18 seconds and ordered node/date/caption entrances from 0.55 seconds, with successive milestones 0.70 seconds apart. Optional presenter footage stays in a separate lower corner while all settled milestone labels remain visible.
  • Four styles keep the same data and choreography: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange), and Black & White (midnight-ice). Semantic style overrides are supported; check contrast after changing them. Dark canvases use a fine grid. Local fonts include Inter, IBM Plex Mono for measurements and ordinals, Smiley Sans and Noto Sans SC. Chinese text selects Smiley Sans automatically, including accompanying Latin text; --zh-font noto-sans-sc selects Noto Sans SC, while --font takes precedence for a supplied font.

Before you choose

Treat the timeline as an ordered narrative unless you deliberately calibrate it. Verify dates and order before animating, and make interval differences explicit so equal spacing does not mislead the viewer.

Good fit

  • A creator explaining a few stages in a release, project history or planned progression.
  • A short teaching passage needing chronology itself as the visual sequence, without an active-node detail tree.
  • A series with consistent date/caption typography and optional on-camera context.

Not for

  • Automatically sorting dates, calculating durations or interpreting equal visual gaps as equal real time intervals.
  • A live schedule, dependency planner, completion tracker or a long crowded history through the current input.
  • Automatic full-film editing, generated presenter performances or music, or copying another creator’s identity and source material.

How to use

You say/creatormotion-diagram-timeline-nodes Turn my supplied explanation into a white-yellow B-roll scene using the Timeline Node Reveal effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare one to five milestones with concise date and caption strings, already in the intended order. The implementation shows the first five and does not parse or sort dates. The supplied Week 1/Week 3/Week 6 example is illustrative.

  2. Explain unequal time intervals in the date labels or narration. Nodes use equal spacing regardless of the date text, so distance along the track is ordinal rather than a calibrated duration scale. Keep large date labels short and captions compact enough to avoid neighboring text areas.

  3. Leave presenter false for the vector/text-only timeline. To include a presenter, set it true and supply --media RECORDING.mp4 covering the 6.6-second visible interval. Inspect the small lower frame’s strong crop/zoom against the actual footage; do not loop a short take to imply continuous performance. No raster illustration or matte is required.

  4. From the extracted package, prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json --style white-yellow, substituting another documented palette if wanted. Read the motion specification and image policy before adapting the scene; use semantic --overrides for deliberate style changes.

  5. Inspect the editable project at entry, each motion handoff and final hold, then render with the command printed by the generator. Check the resulting frames for text collisions, correct numbers and readable contrast. Keep at least 1.2 seconds for the final reading when editing, and compare all four palettes with identical content after structural changes. Narration, music and assembly into a longer film remain separate work. Inspect every node/date/caption alignment and the final settled interval in actual MP4 frames. Check presenter overlap with longer captions as well as face framing. Keep supporting text at least 24 px and preserve the ordered timeline rather than adding an unrelated active-stage detail list.

Requirements and costs

You bring
milestones: provide your own content or retain the illustrative default. · presenter: provide your own content or retain the illustrative default.
Dependencies
HyperFrames CLI 0.8.30 or compatible — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs
Not collected yet
Tools used
HyperFrames
Publisher testing
v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT

FAQ

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills