--- name: pixel-story version: 2.1.2 description: Create editable pixel-art product films with JavaScript Canvas scenes, a GSAP timeline, HyperFrames browser rendering and a ChatCut sound pass. Derive each film's subject and causal story from its brief. category: video delivery: download-only --- # Pixel Story Deliver an editable HTML/JavaScript film project, a verified HyperFrames picture lock, an audiovisual review render, and a ChatCut music/SFX export when connected. The downloaded Skill contains reusable code, not product screenshots, example films or prerecorded music. Film content defaults to English. ## Preserve the visual baseline When replacing a runtime or adapting a reviewed Skill, first reproduce one accepted film with the same subject, timings and available soundtrack. Compare foreground/midground/background detail, independent object animation, recognizable UI state changes, camera paths, transitions, typography, rhythm and audio. Do not replace an established film with a minimal technical demo and call that a quality upgrade. Keep this comparison project outside the generic Skill. ## Create the story Read [direction.md](references/direction.md) before writing a beat sheet. Extract the product's real action, what changes for its user, and an identifiable subject that carries across scenes. Each new brief gets a different story and appropriate authored detail; reuse generic scene behaviors where they fit, and write custom scene code for its hero moments. Keep the stepped pixel art, kinetic editing and readable typography consistent across films. Example brief: a tool that turns a handwritten recipe into a shared cooking session. Possible chain: marked ingredient → editable recipe → invitation travelling to a friend → both cooking the same dish. This is a writing example, not a mandatory plot or bundled preset. Write `DESIGN.md`, `story.json`, and custom `scenes.js` outside this Skill. Document palette, visual identity, each shot's action, carried object, framing, transition, reading hold, and sound palette. Resolve routine creative choices from the brief; ask only for missing essentials. ## Build the editable film Read [modules.md](references/modules.md) to select implemented scene, sprite, layer and theme capabilities, [camera.md](references/camera.md) for camera/transition choices, and [architecture.md](references/architecture.md) for the scene API and [story-contract.md](references/story-contract.md) for the data schema. Use the required stack: **JavaScript + Canvas → GSAP paused timeline → HTML browser composition → HyperFrames preview/render → ChatCut music and SFX timeline**. Do not substitute Python/Pillow frame generation, a generated-video model, or a renamed fixed scene template. ```sh node /scripts/validate-story.mjs story.json node /scripts/new-project.mjs --story story.json --scenes scenes.js --out my-film cd my-film npm install npm run setup npm run preview ``` Edit `scenes.js` to change drawing and motion. Edit `story.json` to change timings, captions, camera and sound cues, then rerun the scaffold with `--force`; it preserves project-local scenes when `--scenes` is omitted and preserves DESIGN.md, custom files and renders. Never overwrite another project's directory without checking its contents. Author real details and visible transformations for this brief. The 28 scene behaviors and neutral sprites are building blocks, not finished director-quality films. No fixed brand, product screenshots, baked-in promo, or universal journey belongs in the Skill. Real user-provided assets may live in this film's `assets/` folder. ## Text clarity Keep ordinary headings, labels and UI text out of the low-resolution pixel buffer. The current `g.text` routes to a full-output-resolution SVG DOM layer and preserves object transforms. Use explicit pixel glyphs only when that is the intended artwork. Inspect 1:1 output crops of small labels as well as the full frame. `imageSmoothingEnabled=false` does not disable font or shape antialiasing. Do not treat a small contact sheet or an upscale as evidence of clear 1080p text. ## Inspect and render ```sh npm run check npx hyperframes snapshot --at 1,4,8 --describe false npm run render node /scripts/cue-sheet.mjs story.json --json audio-cues.json --md audio-cues.md node /scripts/report.mjs . picture-lock.mp4 ``` Choose snapshot times from the actual story, including both sides of joins, reading holds and the ending. Scrub backwards and forwards in HyperFrames; the same time must produce the same frame. Watch the full rendered movie. Fix illegible text, empty frames, unmatched subject continuity, accidental flashing, blur, clipping and repeated compositions before calling the picture locked. ## Local review sound The event timeline derives cues from declarative typing, buttons, progress, prop arrivals, transitions and explicit actions. For an authorized local review, `node /scripts/review-sfx.mjs story.json audio/review-sfx.wav` synthesizes a separate effects track from that schedule. Attach it with a sourced music bed using `audioTracks`. Label this procedural review mix honestly; it is not professional sound design or a ChatCut export. ## Finish audio Follow [audio-chatcut.md](references/audio-chatcut.md). Import the locked video into ChatCut, create one original instrumental bed, place action-specific library or generated effects using the exact cue sheet, preview joins and export the final MP4. Report the real ChatCut project link and verify the audio stream. For an explicitly requested local comparison, an existing licensed or previously generated soundtrack may be attached through `audioTracks`; retain its source and mark it as an existing mix, not a new ChatCut export. Keep all media in the project, outside the Skill. If ChatCut is not connected and no usable soundtrack is available, deliver `picture-lock.mp4` and the cue sheet labeled **silent / audio pending**, never a pretend finished mix or an undisclosed alternative service. ## Delivery and limits Return editable project files, dependency lockfile, picture lock, cue sheets, final audio export if completed, and `report.json` plus `report.en.html` / `report.zh-CN.html`. HTML reports are written to a sibling `-reports/` directory so HyperFrames does not mistake them for compositions. Record versions, source/render hashes, duration, dimensions, actual checks, sound status and remaining issues. The generic Skill ZIP must not include those per-film deliverables. Known authored projects may be previewed locally; untrusted scene code should run in an isolated Sandbox with resource/time limits. Never persist account credentials in the project or Skill. HyperFrames handles browser capture and encoding; ChatCut requires an authenticated account and generation may spend credits. Tool success is not proof of reference-quality art or music. FAQ: Can the subject change? Yes, both story and scenes are brief-derived. Can it be edited? Yes, HTML, JS and JSON remain the input. Is audio automatic without login? No; use the explicit pending-audio delivery. Does this runtime reuse the old Python runtime? No; v1 is an archived implementation, not the v2 render path. See [runtime.md](references/runtime.md) for installation and runtime requirements.