honglin0000/livecanvas

LiveCanvas · Live Canvas

Turns a user's sentence into a live action card with evidence, static readability, and dynamic content clarity. Formerly LiveChart, now LiveCanvas (Live Canvas), covering charts, images, and scene narratives; default is proactive design of theme-related images/icons and scene actions, with charts as an optional expression. Default language is Chinese, using Remotion, 1080×1440, 30 fps, approximately 3 seconds, no audio. These are starting points; adjustments are allowed based on content; 3 seconds is not a claimed Apple format limit.

Determine Content First, Then Motion

1. Extract the subject, metrics, time range, comparison relationships, and purpose from the request; when given an article or report, first read the full material, then extract key events, changes, capabilities, comparisons, and scenarios. Allocate space based on content importance, not just prices or easily displayed numbers. Prioritize specific requirements; do not treat examples given by the user as fixed templates.
2. Search for and verify data; read Data and Definition. First, save raw evidence, facts, or structured data, then write titles, numbers, and annotations. For topics without time series, use fact cards, processes, or scene explanations; do not fabricate data just to draw a chart.
3. Write a brief production description: the main content line of the entire set, the subject and conclusion of each card, fact/data definition, cover information hierarchy, storyboard timeline, and material plan. The number of cards depends on user requirements and content, not fixed to a specific number or topic combination. Select expressions suitable for the theme; do not default to line charts with numbers. Make design judgments directly; only ask questions when missing information would substantially change the answer.
4. Follow Cover and Motion for production. Absorb Emil Kowalski Animate's principles of purposeful, restrained, continuous, and clear rhythm; the user has specified Remotion, so do not execute upstream tool replacement steps, nor mechanically apply interaction component time limits to explanatory videos.

Copywriting: Write Facts and Data Directly

• Prefer titles in the format "Subject + Number/Change/Clear Conclusion", for example "Output limit 1M tokens", "First launch task cost 39% lower", "Text Arena temporarily ranks first". When there are no necessary numbers, write the product name, version, or specific event directly; do not force data.
• Use short, intuitive statements; remove vague propaganda, rhetorical questions, metaphors, parallelism, and decorative English labels. Do not use sentences like "redefine", "understand three changes", or "let benefits land in real scenarios" in place of facts. The same standard applies to body text and image captions; source names should be spelled out, such as Artificial Analysis, not just AA. For writing examples and conditions, see [Cover and Motion](references/design.md#Title and Image Captions).
• When the user says "too much AI flavor", "just give the data", or "no fancy stuff", prioritize streamlining copy and irrelevant decorations; retain the original theme, information, necessary materials, and chosen design direction; do not arbitrarily delete the main cover, merge themes, or turn the entire set into the same data template.
• When making revisions, retain confirmed themes, information, and visual requirements. When the user changes the number of cards or focus, reallocate content and explain the relationships of merging, replacement, and reuse; do not make up numbers by mechanically splitting pages or repeating themes. Use card numbers to check content before and after revisions; deduplicate the total package based on different content.

Visual Expression

• Establish visual hierarchy on the cover using product names, version numbers, or core objects. "Sense of arrival" or "impact" are effect descriptions; do not use them directly as on-screen text; see Cover and Motion for specific methods.

• Unify color schemes, fonts, and graphic language across the set; choose composition based on content. Use graphics to explain facts and relationships; avoid stacking text, large numbers, decorative cards, or mechanically reusing the same template.

• Default to having the subject's objects appear in the scene: product PNGs, coffee cups, cars, trains, medals, city photos, weather emojis, etc.; select a set of stylistically unified materials relevant to the content, not just sticking decorations in chart corners.

• Design object entry, movement, arrangement, replacement, or state changes to explain content. For example, a train arriving at year nodes, a coffee cup bringing out store cards, or a city scene switching with seasons.

• Combine scenes, image comparisons, icon arrays, timelines, process demonstrations, key text, and necessary charts based on the theme. Use charts only when they are truly the clearest option or when specified by the user.

• When using images or emojis, read Images and Icons; be responsible for finding materials, checking availability, and incorporating them into the project; do not require the user to provide materials before starting.

Search Defaults

• "Recent 3 years": The rolling three years up to the latest reliable completed observation date, noting the actual start and end dates; do not default to three end-of-year values. Use completed month-end observations for monthly charts; the latest incomplete month can only be noted separately.
• "Annual temperature" without a given year: Use the most recent complete natural year, defaulting to monthly average temperatures; explain the choice at the beginning of the results. If the intention is clearly average climate, use a climate average with a clear reference period.
• For cross-company comparisons, align observation dates, metrics, currencies, or use a clearly defined same-base-period index, retaining original absolute values.
• Allow for increases, decreases, flat periods, and seasonal cycles. Do not draw a decline as an increase just because the user said "growth curve."
• Parse dates according to the user's timezone; do not hardcode "this year" with machine dates.

Production and Packaging

Read Run and Delivery and Direct Delivery. Resource paths are relative to this skill directory; refer to this absolute path as SKILL_DIR.

• Copy assets/remotion/ as the starting point for the rendering project to the current directory, using the accompanying lock file with npm ci. The line chart there is just an example; rewrite the composition according to the storyboard; it is not the default final layout. Do not generate output or install dependencies within the installed skill.
• The example data.json is synthetic data, for testing only. For formal production, replace the data and copy, and complete fact-checking before removing example markers.
• For time series, use scripts/validate_data.py to check dates, source citations, coverage, and range; for other content, follow Data and Definition using matching fact/comparison structures; do not force a date sequence. Passing validation does not mean source facts have been verified.
• All animations are driven by useCurrentFrame(); CSS animations, wall clocks, unfixed random numbers, and web gallery auto-animations are prohibited.
• Incorporate images, emojis, text, scenes, and charts into the same storyboard, retaining traceable facts, static covers, deterministic rendering, and a verification process.
• Export cover.jpg from the complete pause frame of the same composition, recording coverFrame / fps. The cover image must appear within the animation; still-image-time should point to the same time.
• Choose the pairing tool based on the generation environment: macOS can use scripts/pair_live_photo.swift; Linux/Windows should use scripts/pair_live_photo.py; read Cross-platform Apple Live Photo. Both paths write silent H.264 and JPEG as Apple paired resources containing shared identifiers and timed metadata. This is an intermediate step, not the final delivery; transcode other inputs first; do not silently discard user audio tracks.
• After packaging, do not re-encode the paired MOV again with ordinary transcoding, as this may lose metadata tracks.
• Use scripts/package_live_photo.py to generate a single, clearly named .pvt package; mark it as a live resource package; do not promise that the iPhone "Files" app can preview it directly; do not automatically open or import it into the "Photos" app; do not modify the photo library. Do not stop at JPG + MOV paired resources.

Verification and Completion Criteria

First, check facts and materials, then preview the cover and video: sample the start, middle of major actions, transitions, data extremes (if any), and the cover pause frame; check image loading, emoji glyphs, transparent edges, Chinese fonts, label occlusion, numerical synchronization, units dates, and cropping. Confirm that the action is explaining the theme, not just showing number and bar changes. Real curves do not use smoothing that introduces false peaks and valleys; break lines at missing data points. For the entire set, verify that important content and comparison relationships are preserved, the cover subject is clear, and the style is unified; check intermediate frames and final values for number scrolling; the static cover must be fully readable.

Record status separately; do not treat the previous item as success for the next:

1. Data and source verification; machine validation is only a part of it.
2. Cover and MP4 rendering complete; materials and major actions visible; metadata and frame checks passed.
3. Live Photo identifier matches; timed metadata time position is correct.
4. In an Apple environment, record successful native loading of PHLivePhoto.request or specific failure; for pure Python generation environments, mark as not_available; do not forge a pass.
5. The .pvt package is complete; paired resource hashes match.
6. Album import, device playback, third-party platform upload, and lock screen compatibility are all optional; only operate and record them if the user specifically requests them; they are not prerequisites for file delivery.

If there is no macOS, execute cross-platform Python pairing and packaging; do not fall back to MP4 + cover just because of the operating system. After metadata readback, video decoding, and package integrity check, the resource can be delivered; record Apple native loading, iPhone import/playback separately. Only deliver a preview with clear blocking items when actual dependencies are missing and cannot be installed; do not claim the platform cannot generate. Generated files do not prove successful phone preview, save, or playback.

Delivery

Each theme in an independent directory, providing both a directly viewable preview and a theme_name.pvt live resource package, saving delivery.json. Also retain data.json, raw evidence, sources.md, an editable Remotion project with local materials, material list assets.json (when using materials), cover.jpg, motion.mp4, internal live/ paired resources and manifest, and qa.json. Archives are for transmission only, not directly recognizable Live Photos.

Prioritize displaying viewable cover/motion previews, along with a link to the .pvt resource package, data cutoff date, and verification status. When the user requests direct preview on a phone, verify their receiving path; do not claim satisfaction based solely on file package generation or local loading success. If the transmission interface does not support directory packages, attach .pvt.zip, noting that the resource package is obtained after decompression, still requiring a Live Photo-supporting app to read. Web LivePhotosKit preview and saving as native live photos are two separate capabilities; do not promise unimplemented capabilities. Cover and MP4 can only be marked as previews; when the chat interface cannot natively display Apple Live Photos, provide a brief explanation. Do not interpret "direct Live Photo delivery" as importing into the album; do not request photo library permissions, nor automatically open .pvt that might trigger import. Do not publish to social platforms without request.

Example Triggers

• "Use LiveCanvas to create the market cap changes of Xiaomi in the recent three years."

• "Make two live charts for Apple and Xiaomi's recent three-year market caps, with a unified style."

• "Turn Beijing's annual temperature for last year into a Live Photo, with a well-designed cover."

• "Turn this data into an animated infographic and export it as an Apple Live Photo."

• "Use coffee cup PNGs and store cards to tell the expansion story of Luckin and Starbucks."

• "Use trains, year nodes, and mileage numbers to create a Live Motion effect for China's high-speed rail."