Pretext Motion Bubble Demo

Standalone focused preview demo for Cai Xukun video-silhouette driven text reflow inside a model-style chat bubble.

What it does

• Prepares a long body of text once with @chenglou/pretext
• Loads a local Cai Xukun meme clip from public/media/cxk-basketball.mp4
• Extracts the dark subject silhouette from each video frame
• Recomputes available text slots for each line on every frame
• Uses layoutNextLine() to flow text around the moving obstacle in real time
• Wraps the effect in a focused preview shell so the reflow effect is easy to demo and share

Run

npm install
npm run dev

Open the local URL printed by Vite.

LAN Access

npm run dev:lan

Then open http://<your-local-ip>:4173/ from another device on the same network.

Verify

npm test
npm run build

Important Files

• src/core/demoConfig.ts: clip source, crop, mask thresholds, stage geometry, and typography
• src/core/textFlow.ts: obstacle-band intersection and slot carving
• src/core/videoMask.ts: video-frame luminance mask extraction and band interval calculation
• src/app.ts: prepareWithSegments() plus layoutNextLine() driven reflow loop and video silhouette rendering
• SKILL.md: skill entry point

Notes

• The key effect is layout motion, not character art.
• The current obstacle is the extracted silhouette of the vendored Cai Xukun clip, not an abstract orb.
• This repo currently targets standalone preview first. Real assistant-bubble integration is intentionally deferred into the plan documents.

Acknowledgements

• 特别鸣谢：linuxdo社区：学AI，上L站！真诚、友善、团结、专业，共建你我引以为荣之社区。https://linux.do/
• pretext项目：https://github.com/chenglou/pretext
• 特别致歉：AionUi项目，因为想让ta，率先打上篮球🏀~ https://github.com/iOfficeAI/AionUi

Disclaimer

视频素材及文字仅供展示效果 demo，不涉及人身攻击及特殊含义。