name	pretext-motion-bubble
description	Use when generating or refining a standalone preview page that shows Pretext-driven animated text reflow around a moving video subject inside a chat-style bubble, especially when the effect should be easy to run and share locally.

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

Put demo-wide knobs in src/core/demoConfig.ts.
Compute blocked horizontal intervals per line band with src/core/textFlow.ts.
Extract a per-frame subject mask with src/core/videoMask.ts.
Feed each remaining slot into layoutNextLine() from src/app.ts.
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

Pretext Motion Bubble

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

Put demo-wide knobs in src/core/demoConfig.ts.

Compute blocked horizontal intervals per line band with src/core/textFlow.ts.

Extract a per-frame subject mask with src/core/videoMask.ts.

Feed each remaining slot into layoutNextLine() from src/app.ts.

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

pretext-motion-bubble