LiveCanvas · Live Canvas

First define the content, then design the motion

1. Extract the subject, metric, time range, comparison relationship, and intended use from the request. Specific requirements take priority; do not treat examples supplied by the user as fixed templates.
2. Search for and verify the data, and read Data & Methodology. Save the original evidence, facts, or structured data before writing the title, numbers, and annotations. For subjects without a time series, use a fact card, process, or scene-based explanation; do not fabricate data merely to create a chart.
3. Write a brief production plan: a one-sentence conclusion, the fact/data methodology, the cover's information hierarchy, a storyboard timeline, and an asset plan. Choose an expression suited to the subject rather than defaulting to a line chart with numbers. Make design judgments directly; ask a question only when missing information would materially change the answer.
4. Produce it according to Cover & Motion. Apply the animate principles from Emil Kowalski: purposeful, restrained, continuous motion and a clear rhythm. The user has specified Remotion, so do not execute the upstream tool-substitution step or mechanically apply interactive component duration limits to an explanatory video.

Visual expression

• By default, place objects from the subject in the frame: product PNGs, coffee cups, cars, trains, medals, city photos, weather emojis, and so on. Select a cohesive set of assets relevant to the content rather than decorating the corner of a chart.
• Design each object's entrance, movement, arrangement, replacement, or state change to explain the content. For example, a train can move past year markers, a coffee cup can bring out a store card, and a city scene can change with the seasons.
• Combine scenes, image comparisons, icon arrays, timelines, process demonstrations, key text, and necessary charts according to the subject. Use a chart on its own only when it is genuinely the clearest option or the user explicitly requests it.
• When using images or emojis, read Images & Icons, which is responsible for finding assets, checking usability, and adding them to the project; there is no need to ask the user to provide assets before starting.

Search defaults

• “Past 3 years”: a rolling three-year period ending on the latest reliable completed observation date; state the actual start and end dates, and do not default to three year-end values. For monthly charts, use completed month-end observations; note the latest incomplete month separately.
• “Full-year temperature” with no year specified: use the most recent complete calendar year and default to the monthly average temperature; explain this choice at the beginning. If the intent is clearly long-term climate, use climate averages with an explicit baseline period.
• For cross-company comparisons, align observation dates, metrics, and currencies, or explicitly use a same-base index while retaining the original absolute values.
• Allow increases, decreases, flat periods, and seasonal cycles. Do not plot a decline as growth merely because the user asked for a “growth curve.”
• Interpret dates in the user's time zone, and do not hard-code “this year” based on the machine date.

Production and packaging

SKILL_DIR

• Copy

  assets/remotion/

  as the starting point for the rendering project into the current directory, and use the included lockfile with

  npm ci

  . Its line chart is only an example, and the composition should be rewritten according to the storyboard rather than treated as the default finished layout. Do not generate output or install dependencies inside the installed skill.
• The sample

  data.json

  contains synthetic data for testing only. For a production piece, replace the data and copy, and complete fact-checking before removing the sample marker.
• For time series, use

  scripts/validate_data.py

  to check dates, source references, coverage, and ranges. For other content, use a matching factual/comparison structure according to Data & Methodology; do not force it into a date series. Passing validation does not mean the source facts have been verified.
• Drive every animation with

  useCurrentFrame()

  ; CSS animation, wall-clock time, unseeded randomness, and built-in animations from web image libraries are prohibited.
• Integrate images, emojis, text, scenes, and charts into a single storyboard, preserving traceable facts, a static cover, deterministic rendering, and a validation workflow.
• Export

  cover.jpg

  from a complete hold frame of the same composition, and record

  coverFrame / fps

  . The cover image must appear within the animation, and still-image-time must point to the same moment.
• Use

  scripts/pair_live_photo.swift

  to write the silent H.264 video and JPEG cover as paired resources. This is an intermediate step, not completed delivery; transcode other inputs first, and do not silently discard the user's audio track.
• After packaging, do not run a standard transcode on the paired MOV again, because doing so may lose its metadata track.
• Use

  scripts/package_live_photo.py

  to generate a single, clearly named

  .pvt

  package. Label it as a Live Photo resource package; do not promise that the iPhone Files app can preview it directly. Do not automatically open or import it in the Photos app, and do not modify the photo library. Do not stop at a JPG + MOV paired resource.

Verification and completion criteria

1. Data and source verification; machine validation is only one part of it.
2. The cover and MP4 have been rendered, assets and primary motion are visible, and metadata and frame checks have passed.
3. The Live Photo identifier matches, and the timed metadata is positioned correctly.

4. PHLivePhoto.request

   loads successfully on the local machine, or the specific failure is documented.
5. The

   .pvt

   package is complete, and the paired resource hashes match.
6. Gallery import, device playback, third-party platform uploads, and lock-screen compatibility are optional. Perform and document them only when the user explicitly requests them; they are not prerequisites for file delivery.

.pvt

Delivery

Topic Name.pvt

delivery.json

data.json

sources.md

assets.json

cover.jpg

motion.mp4

live/

qa.json

.pvt

.pvt.zip

.pvt

Example triggers

• “Use LiveCanvas to visualize Xiaomi's market capitalization over the past three years.”
• “Turn Apple's and Xiaomi's market capitalizations over the past three years into two Live Photos with a consistent visual style.”
• “Turn last year's full-year temperature in Beijing into a Live Photo, and design the cover as well.”
• “Turn this dataset into an animated infographic and export it as an Apple Live Photo.”
• “Use a coffee cup PNG and store cards to create an expansion story for Luckin Coffee and Starbucks.”
• “Use a train, year markers, and mileage figures to create a Live Photo motion graphic about China's high-speed rail network.”