Pretext Motion Bubble

This skill is for standalone preview demos where text must re-layout around an animated subject, instead of being converted into ASCII art or injected into a live app. Favor a focused preview shell that foregrounds the moving subject and the live text reflow itself.

When to Use

• The user wants a moving person, clip, or silhouette to push paragraph text around in real time.
• The user wants the output presented like a model response bubble, but as a standalone preview page.
• The user wants @chenglou/pretext used as the layout engine, especially prepareWithSegments() and layoutNextLine().
• The user wants something that can be launched locally and shared without adapting a target app first.

First Pass Workflow

1. Put demo-wide knobs in `src/core/demoConfig.ts`.
2. Compute blocked horizontal intervals per line band with `src/core/textFlow.ts`.
3. Extract a per-frame subject mask with `src/core/videoMask.ts`.
4. Feed each remaining slot into layoutNextLine() from `src/app.ts`.
5. Render the positioned lines inside a focused preview shell and start the local preview server.

Extension Rules

• Do not switch to video-to-ASCII unless the user explicitly wants character art.
• Prefer using the actual video subject as the obstacle if the user names a real person, meme, or clip.
• If a user wants richer shapes later, keep the same contract: every frame should resolve to blocked horizontal intervals per line.
• Preserve the chat-bubble presentation unless the user asks for a full-screen editorial layout instead.
• Prefer removing explanatory chrome over adding more panels when the effect itself is the main point of the page.
• Treat real app integration as a separate future adapter layer, not part of the default preview workflow.

Local Run

npm install
npm run dev

Then open the local URL printed by Vite.

For LAN preview:

npm run dev:lan