motion-comic-pages

Community@xixi/motion-comic-pages
Community skill — not reviewed. It was shared by 西西 and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: motion-comic-pages. Run `npx -y @neta-art/neta-search-cli@latest skills use @xixi/motion-comic-pages --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @xixi/motion-comic-pages
Summary

Turn one character scene into a vertical comic that unfolds one beat at a time as you tap or scroll.

  • Tell a single moment, like a quiet meeting or a hard goodbye, as a story that moves page by page.
  • Each chapter mixes narration, close-ups of an eye or a hand, speech bubbles and full-page pictures, ending on a title card and a last line.
  • You tap, scroll or press a key to move on; the story glides forward and earlier beats stay on screen.
  • Each chapter uses about three generated pictures, and close-ups are cut from those same pictures instead of made new.
  • Works best with a named character, their relationship to the reader, and one clear moment with a telling detail.
SKILL.md
# Motion Comic Pages

A scene becomes a vertical reel: each beat enters alone, the reel glides it to the reading position, and the reader advances with a tap, a wheel or the keyboard. Narration, a close crop of an eye or a hand, a speech bubble and a full-page image take turns. A chapter ends on a title card, and the Work keeps the previous chapter readable.

Read this file fully before generating anything or writing files. Resolve relative paths from this skill's directory.

## Language

Reply in the user's language, whatever language this file is in. This holds for every message of the run, above all the final handover; translate what the scripts print, don't paste it. All visible text — chapter titles, narration, bubbles, end card, controls — follows the user's language; quoted character lines stay in the language the user wrote them.

## When to use / when not

Use when the user has a character, a place and one scene that should be read page by page. This skill makes one web Work.

Not for a video or animated clip (`pov-life-slice`), a branching game (`create-avg`), a single illustration (`story-illustrations`), or a chat roleplay. For those, say what this skill makes and stop.

## Inputs

| Item | Required | Counts as given when |
|---|---|---|
| Scene | yes | The user names a character and a moment, or points at a scene in the world material. "A sad scene" alone does not count. |
| Cast | yes | At least one named character and how they relate to the reader. |
| Chapter count | no — default 1 | A number, or "one chapter". Each chapter is one scene and about 3 generated images. |
| Art direction | no — default from the world | The world's visual style, a reference image, or a named look. |
| Language | no — default the user's | The user writes in a language or names one. |

Ask once, in one message, if the scene or the cast is missing, then stop. If both are given, build; state in one line that the default is three images per chapter.

## The page, in numbers

- Stage: `max-width: 520px`, full height, centred, dark surround. This is a phone-first piece; 520 px is the width where a 17 px narration line keeps 24–28 characters.
- Reel: one `transform: translateY(...)` element, `transition: transform 1.05s cubic-bezier(.25,.7,.25,1)`. Do not animate each item's position; animate the reel.
- Beat entrance: `opacity 0 → 1`, `translateY(50px → 0)`, `0.85s cubic-bezier(.2,.6,.2,1)`. One beat at a time, previous beats stay visible.
- Beat spacing: `margin: 15vh 0`; full-page beats use `6vh` so two do not leave the reader on an empty screen.
- Type: narration 17 px / line-height 1.95 / letter-spacing 1 px; bubble 16 px / 1.7; chapter name 26 px / letter-spacing 4 px; end title 22 px / 2.1.
- Image widths: full page 100% with `max-height: 82vh` and `object-fit: contain`; strip 76%; chip 50%. Crops are `object-fit: cover` with a `focus` position, not new images.
- Advance: tap anywhere, `ArrowDown`/`Space`, or wheel with a 340 ms lock. Never advance twice from one gesture.
- Ambient petals: one every 1.1 s, 6–12 s fall, opacity .45. They are decoration; disable them under `prefers-reduced-motion`.

## Steps

1. **Read the character and the scene.** `neta atom list` → `neta atom get <id>`. Extract the character's address form, the physical detail the scene turns on (a hand, an umbrella, a door), and the one line that must land last. Write `$RUN/scene.md`.
2. **Break the scene into beats.** 18–24 beats per chapter is the working range. Use `chapter` once at the start, then alternate narration and evidence: `narr`, `frag`, `bubble`, `big`. Put the strongest full-page image after the emotional turn, not at the start. The last beat is `end`.
3. **Write the plan.** `$RUN/plan.json` per `references/plan-schema.md`. Name three images per chapter: `scene1`, `scene2`, `scene3`. Fragments reuse those files with a `focus` point; do not generate separate crops.
4. **Generate the images.** Three per chapter, through the bundled script:
   ```bash
   node scripts/gen.mjs --kind image --state $RUN/gen-<id>.json \
     --prompt "<scene prompt from references/plan-schema.md>" \
     --work-title "<Work title>" --param aspect_ratio=3:4 --param image_size=1K \
     --models "<fallback>,<second fallback>"
   ```
   Rerun the same command while it prints `generating` or `busy`; it resumes the accepted task and never pays twice. If a chapter needs a different aspect, keep all images in that chapter the same ratio.
5. **Validate and build.**
   ```bash
   node scripts/build.mjs --plan $RUN/plan.json --assets $RUN/assets --out $RUN/site --lang <locale> --check
   node /mods/neta/neta work init web works/webs/<slug> --title "<title>"
   node scripts/build.mjs --plan $RUN/plan.json --assets $RUN/assets --out works/webs/<slug> --lang <locale>
   ```
6. **Read it as a reader.** Serve it and go through every beat: no beat is skipped, no full-page image is cropped, the last line lands, tapping during the 1.05 s glide does not skip a beat, chapter 2 can be opened after chapter 1 ends, and at 375 px width the narration is not clipped. Write findings to `$RUN/qa.md`.
7. **Publish and hand over.** See Deliver.

`$RUN` = `_runs/motion-comic-pages/<timestamp>/`.

## Deliver

One browser web Work.

1. Publish: `node /mods/neta/neta work publish web works/webs/<slug> --title "<same title>"`.
2. Open the published entry and advance through the first three beats.
3. In the user's language, state the number of chapters, beats and generated images, and the page width assumption.
4. **Hand over with a card — the run is not delivered until this step is done.** One `interaction-components` card on its own line, target `{ "type": "work", "workId": "<id>" }`, the id from the publish output (fallback: `cohubWorkId` in `works/webs/<slug>/meta.json`). Never a made-up id, a folder path, or a `world-file` link to `index.html`.

## Out of scope

- Do not change world settings, delete files that existed before the run, or edit memory, character cards, installed scripts or existing Works.
- Do not make a video, audio track, branching choices, or a chat interface. This is a read-only reel.
- Do not generate a separate crop for every fragment; reuse the chapter's scene images with `focus`.
- Make only the requested Work; do not act on your own next-step suggestions.

## When to stop

- No scene or no cast: ask once, then stop.
- The user wants seven chapters but has no image budget: say it is 21 images, offer one chapter now, and let them decide. Do not silently reduce the chapter count.
- Asked for a video: say this skill makes a paged comic and stop.

## Gotchas

- A reel that translates by `item.offsetTop` drifts after images load because their height changes. Call the position function on `load` for every image and on resize.
- `scrollIntoView` fights the reel transform and produces double motion. Keep the stage `overflow: hidden` and translate only the reel.
- The fragment crop is the cheapest way to look expensive: `object-fit: cover` plus `object-position: 62% 18%` on a 3:4 scene gives a convincing eye crop at 76% width.
- A `big` beat at 100% width with `object-fit: cover` cuts heads off. Use `contain` and `max-height: 82vh`.
- Chapter data is easy to duplicate. Keep every chapter in one array and render the top bar from the active chapter, or chapter 2 will show chapter 1's name.
Related skills
drawer-worldCommunityTurn your characters into tiny pixel residents who live on their own inside a drawer you can look in on.character-kitCommunityTurn your cast into a character archive, a model sheet, and a playable "who is the undercover" game in one page.identity-drawCommunityTurn your world into a shareable talent draw quiz: roll a talent, answer four questions, and get your identity result.clue-roomCommunityTurn one secret place into a small web page where the player finds the story by looking through ordinary objects.heart-frequencyCommunityTurn a character into a page where one typed sentence becomes glowing particles that either reach their heart or scatter.advent-calendarCommunityTurn your world into a calendar of closed doors that open one day at a time, ending in a private final door.