falling-text-poster

Name: falling-text-poster
Author: 落嵛

Community@sunset1896/falling-text-poster

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: falling-text-poster. Run `npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/falling-text-poster --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 @sunset1896/falling-text-poster

Summary

Make a poster where neat typewriter text breaks apart, letters tumble down and pile into a mountain of type.

You get a finished poster: a solid block of text with a Y-shaped gap where letters scatter, flow downward and heap up at the bottom.
Send a tutorial link, video or screenshots and it studies the steps, then recreates the look and compares it with the original while tuning.
Change the wording, font, title, subtitle and page size. Swap the Y for an S-curve, waterfall or tree shape, or go dark.
Chinese vertical text, or several text blocks that each fall their own way, are also possible.
You receive the poster image, a clean vector copy and an editable version, and the poster card is placed on your board.

SKILL.md

# Falling Text Poster — the reproduce-and-reuse workflow

The effect is really **several areas of text inside one artwork**: body copy fills a field, the gap holds "the same
text that will scatter", and finally the letters are broken into independent objects, scattered, thinned out and
stacked. No plugins or scripts are needed.

## 0. Prerequisite: does this world have a web Illustrator? (check first)

The effect is made in a browser vector editor. **Before doing anything, check whether this space has one**:

```bash
SK=<this skill's folder>
bash $SK/tools/check-editor.sh /workspace
```

- **exit 0 (`EDITOR=<path>`)**: one exists. Note the path, go straight to §2 and start the server on it.
  Candidates include `works/webs/*` works made in this world, or the template of an installed `illustrator-web-builder` skill.
- **exit 2 (`BUNDLED=<path>`)**: none exists. **Build the web editor first**, then come back to the poster — the skill
  bundles a complete creation walkthrough in `builder/` (with the verified template and test tools):
  1. Read `builder/SKILL.md` and start the project per its §2: `neta work init web works/web/<slug>`,
     then `cp -r $SK/builder/template/* works/webs/<slug>/`.
  2. The template already has everything the poster needs (area type, fill with placeholder, create outlines,
     transform each with random, font import), so you usually do not need to change code; if you do, verify one
     feature at a time following the loop in `builder/SKILL.md` §3.
  3. Publish: `node /mods/neta/neta work publish web works/webs/<slug>`, then drop the card on the board with
     `place.mjs` from board-ops.
  4. Afterwards set `EDITOR=works/webs/<slug>` and continue with §2.
- **exit 1**: the package is incomplete (no `builder/`); ask the user to unpack the skill again.

> The point is to **leave this world with a reusable web Illustrator**, not to copy a template for one poster and
> never publish it. Building the web editor is itself a deliverable (publish + board card); do the poster after that.
> On first use the web editor asks the user to "use Claude Opus 5.5 for the best results" per `builder/SKILL.md` §0.

## 0.1 Preparation

- Requires: `ffmpeg` (read reference videos / crop for comparison), `agent-browser` (drive the editor), python3 (local servers).
- User-supplied fonts: when no licence is stated, **import them locally only** and never bundle them into a published
  work; export outlined SVG/PNG for the final artwork.

## 1. Look at the reference first, then start

1. **Share link** (Xiaohongshu/Weibo etc.): fetch the note title, body, video URL and cover (the `window.__INITIAL_STATE__`
   object on a Xiaohongshu page holds all of it), then download the video.
2. **Extract frames to read the steps**: one frame every 5 s tiled into an overview, then enlarge key frames to read the
   bottom captions, and write the author's operations down step by step. Commands are in `references/technique.md` §1.
3. **Only a screenshot or a few images**: read the structure directly — where the shape notch is, where the letters flow,
   how the pile at the bottom is shaped.
4. Translate "what the author did" into equivalent commands in the editor (the mapping table in §2). If a technical
   detail in the source differs from what this skill records, trust the reference and add the difference to
   `references/technique.md`.

## 2. Start the servers and run (the default parameters reproduce the original)

```bash
SK=<this skill's folder>
EDITOR=$($SK/tools/check-editor.sh /workspace | sed -n 's/^EDITOR=//p')   # the conclusion from §0
python3 $SK/tools/srv.py "$EDITOR" 8790 &                  # the editor (the copy in this world)
python3 $SK/tools/srv.py <font folder> 8792 &              # fonts
python3 $SK/tools/upsrv.py <output folder> 8793 &          # receives exported png/svg/json
agent-browser --session ai open "http://localhost:8790/?fresh=1" --args "--no-sandbox,--disable-dev-shm-usage"
agent-browser --session ai set viewport 1440 960
$SK/tools/ab.sh "window.FONT_URL='http://localhost:8792/<font file>'; window.FONT_NAME='<font file>'; 1"
$SK/tools/ab.sh "$(cat $SK/tools/poster.js)"
```

The script runs the original's steps in order and screenshots after each one:
cut the V notch → fill with text → draw the Y shape and fill it with text → create outlines and ungroup → thin out →
transform each (random) → gravity nudge → title/subtitle → export.

**All parameters live in `CONFIG` at the top of `poster.js`**: artboard size, font, title and subtitle, body size/leading,
geometry points (notch, both arms, stem, falling stream, pile), scatter strength and thinning ratio per area, random seed,
output file names. To change the copy or the font, edit only `CONFIG`; the flow stays the same.

Mapping table (what the author did → this editor):

| In Illustrator | In the script |
|---|---|
| Rectangle + Pencil V + Pathfinder "Minus Front" | `pen()` → `pathfinder('minusFront')` |
| Click the shape with the Type tool → area type | `app.tools.type.pathToArea(id)` |
| Pour in placeholder text | `C.run('fillPlaceholder')` |
| Justify, tracking, leading | text object properties `align:'justify'`, `leading`, `tracking` |
| Select the Y area and paste the same text | draw V again and subtract → `pathToArea` → the same text |
| Shift+Ctrl+O create outlines + ungroup | `createOutlines` → `run('ungroup')` |
| Ctrl+Shift+Alt+D Transform Each + Random | `run('transformEach')` + fill the real dialog (including the Random checkbox) |
| Manually delete and drag letters | probabilistically select `run('clear')` + a small `transformObject` (gravity) |

## 3. Compare against the original and tune

After exporting the PNG, **crop the same region from both and view them side by side** (`ffmpeg -i poster.png -vf crop=...`,
crop the reference the same way, then `hstack`). Judge by these points and change one thing per round in `CONFIG`:

| What you see | What to change |
|---|---|
| Arms too thin / letters too big to fit | Lower `loose.size`, widen `geo.vOuter/vInner` |
| Hollowed out below the notch | Do not subtract the stem from the body: keep `geo.block` intact and use the stem only as an overlay area |
| The notch bottom is too pointy | Add horizontal handles to the V tip node (`[x,y,ix,iy,ox,oy]`) to make it U-shaped |
| Falling stream too sparse/dense | `scatter.fall.thin` (around 0.6), `taper:true` makes it denser further down |
| The top of the pile is too even | With `scatter.pile.edge` on, delete another 35% within 14 pt of the top |
| The pile is too loose | Make `pile.leading` smaller than `pile.size` (stacking), or raise `pile.thin` |
| The whole thing looks too regular | Raise `scatter.*.rotate`, or increase the coefficient in the gravity step |

Once tuned, add this round's judgement to the table in `references/technique.md` so the next run can reuse it.

## 4. Publish

```bash
node /mods/neta/neta work import image --file <output folder>/poster.png \
  --prompt "<one sentence: text arranged as a block, letters in the middle scatter and fall into a mountain of type>" --work-title "<title>"
```
Then place the card on the board with `place.mjs` from `board-ops`; hand the outlined SVG and the `.aiw.json` source file
to the user as well.

## 5. Common variants

- **S-shape / waterfall / tree shape**: change only the points in `geo.fall` (and `geo.stem` if needed); leave the scatter
  parameters alone.
- **Dark version**: fill the artboard with a black rectangle as the base, switch body and letters to a light colour;
  change `title.color` too.
- **Vertical Chinese text**: swap the body font for a CJK font, increase the size, set leading around 1.0; keep
  `loose.charWrap` on.
- **Several blocks of text each falling on their own**: repeat the "area → fill text → create outlines" trio from §3,
  give each block its own colour/font, and group them at the end.

## 6. Deliver

At the end the user has an image Work (the poster) in Studio plus the outlined SVG and the `.aiw.json` source file.
`neta work import image` prints the Work id; hand it over with an interaction-components card whose target is that
Work, and place the card on the board. If the web editor was built in this run, publish it as its own Web Work and
hand that over too.

## 7. Out of scope

- No changes to world settings, world files or existing Works, and no deleting anything the user did not ask about.
- No audio/video output (a moving poster belongs to the video generation flow).
- No bundling of unlicensed fonts, and no other skills' folders or mods beyond `/mods/neta` and `/mods/cohub_base`.

## 8. Notes

- The artboard is 600×800 pt by default. If you enlarge it, scale every geometry point proportionally, otherwise the
  notch drifts.
- A 3x PNG at 600×800 is about 800 KB; if the long edge exceeds 4,000 px, drop to 2x first.
- `/tmp` may be wiped between sandbox sessions — keep scripts and fonts in the working directory, not only in /tmp.
- The web Illustrator is a long-term asset for this world: when §0 says "none", **publish the finished web editor and put
  it on the board**, then reuse it for every later poster/layout instead of copying a new template each time.
- Exporting SVG also outlines the title (no font dependency); `.aiw.json` keeps live text, so the copy remains editable
  in the editor.
- Reply in the user's language; any text the user sees inside the poster or the deliverable follows the user's language.

Skills

Skills Leaderboard

Built-in

falling-text-poster