# MotionPack — Remotion motion templates (215 effects)

> Motion gallery · vibe video pack. Copy-paste Remotion (React video) templates: data viz, narrative, UI demos, kinetic type. Each effect = one React component + zod schema + defaultProps + fixed size/duration. Chart data is sample only.
> Chinese mirror (same build): https://dongxiao.sites.3ceng.cn/ · AI entry https://dongxiao.sites.3ceng.cn/llms.txt

This file is the short English entry (<=16 KB). Pick a type file → find an id → fetch-effect.mjs → still-frame check.
Source files under effects/{Id}.txt and effects/kits/* may contain Chinese strings in defaultProps (intentional for the CN mirror and pixel baselines). Override props for English output; never rewrite defaultProps in the shared library.

## Effects by type (videoStyle)
- 01 FRAME BY FRAME · 7 + related 5: https://motion.visoraapp.com/ai/en/effects/v01.md
- 02 ISOMETRIC · 2: https://motion.visoraapp.com/ai/en/effects/v02.md
- 03 FLAT VECTOR · 14 + related 27: https://motion.visoraapp.com/ai/en/effects/v03.md
- 04 LINE ART · 8 + related 12: https://motion.visoraapp.com/ai/en/effects/v04.md
- 05 3D RENDER · 1 + related 3: https://motion.visoraapp.com/ai/en/effects/v05.md
- 06 SHAPE MORPH · 7 + related 7: https://motion.visoraapp.com/ai/en/effects/v06.md
- 07 STICKER EXPLAINER · 7 + related 11: https://motion.visoraapp.com/ai/en/effects/v07.md
- 08 CYBERPUNK HUD · 15 + related 3: https://motion.visoraapp.com/ai/en/effects/v08.md
- 09 COLLAGE CUT-OUT · 6 + related 4: https://motion.visoraapp.com/ai/en/effects/v09.md
- 10 AURORA · LIQUID GLASS · 4 + related 1: https://motion.visoraapp.com/ai/en/effects/v10.md
- 11 BAUHAUS · ANAMORPHIC · 1 + related 1: https://motion.visoraapp.com/ai/en/effects/v11.md
- 12 SYNTHWAVE · VHS · 5 + related 1: https://motion.visoraapp.com/ai/en/effects/v12.md
- 13 PIXEL ART · 5 + related 3: https://motion.visoraapp.com/ai/en/effects/v13.md
- 14 LIQUID MOTION · 1: https://motion.visoraapp.com/ai/en/effects/v14.md
- 15 VARIETY CAPTIONS · 6 + related 14: https://motion.visoraapp.com/ai/en/effects/v15.md
- 16 PAGE CAMERA · 41 + related 20: https://motion.visoraapp.com/ai/en/effects/v16.md
- 17 EDITORIAL DATA · 23 + related 14: https://motion.visoraapp.com/ai/en/effects/v17.md
- 18 INK WASH · 7 + related 4: https://motion.visoraapp.com/ai/en/effects/v18.md
- 20 BLUEPRINT · 3 + related 3: https://motion.visoraapp.com/ai/en/effects/v20.md
- — TEXT EFFECTS · 13 + related 7: https://motion.visoraapp.com/ai/en/effects/txt.md
- — GENERAL · 9 + related 3: https://motion.visoraapp.com/ai/en/effects/gen.md
- — ASSETS · 2: https://motion.visoraapp.com/ai/en/effects/asset.md
- — COLOR EXAMPLES · 1: https://motion.visoraapp.com/ai/en/effects/theme.md
- — OTHER · 27: https://motion.visoraapp.com/ai/en/effects/other.md
- All ids: https://motion.visoraapp.com/ai/en/effects/index.md
- Categories: Creative 104 · Assets 18 · UI 73 · Data viz 36 · Narrative 159 · Animation 29

## More docs
- New-effect guide: https://motion.visoraapp.com/skills/en/new-effect-guide.md
- Guides index (motion-craft, quality-gate, style-signatures, prompts, beats): https://motion.visoraapp.com/ai/en/guides.md
- Quality gate / style signatures: https://motion.visoraapp.com/skills/en/quality-gate.md · https://motion.visoraapp.com/skills/en/style-signatures.md
- SFX (sfx-lib 282 + built-in): https://motion.visoraapp.com/ai/en/sfx.md · https://motion.visoraapp.com/sfx-index.json
- Theme packs ThemeProvider (renjian / blueprint): https://motion.visoraapp.com/ai/en/themes.md
- Animation · watercolor: https://motion.visoraapp.com/ai/en/animation/style-watercolor.md
- Animation · Lemo-Opuscar looks (MIT, see NOTICE.md); one doc per id https://motion.visoraapp.com/ai/en/animation/style-(id).md — ids: art-deco Art Deco · ascii-crt ASCII CRT · blueprint Blueprint · crayon-book Crayon picture book · dark-keynote Dark keynote · dataviz Data narrative · engraving Engraving · hologram-hud Sci-fi hologram HUD · impasto Impasto oil · ink-wash Ink wash · iso-infographic Isometric infographic · microgame Microgame flash (WarioWare-style) · midcentury-toon 1950s flat cartoon · one-line One-line drawing · papercut-red Red papercut · pixel-rpg 16-bit pixel RPG · risograph Risograph · rubber-hose 1930s rubber-hose cartoon · scifi-toon Sci-fi sitcom cartoon · shadow-puppet Shadow puppet · silent-film 1920s silent film · silkscreen-poster Silkscreen travel poster · stained-glass Stained glass · swiss-motion Swiss motion typography · urban-sketch Pen-and-wash urban sketch · whiteboard Whiteboard explainer · woodcut Woodcut

## Machine-readable
- English metadata JSON: https://motion.visoraapp.com/effects.en.json
- Full schema JSON (includes CN titles + EN fields): https://motion.visoraapp.com/effects.json (~1.45 MB)
- Per-effect source (.tsx as text): https://motion.visoraapp.com/effects/{Id}.txt
- Shared kits: https://motion.visoraapp.com/effects/kits/{file}.txt
- Preview (humans): https://motion.visoraapp.com/#/effect/{Id}. In-browser preview #/effect/{Id} is a SPA hash route: curl / WebFetch only receive the homepage HTML. Text-only agents should read effects/{Id}.txt (source) and effects.en.json / effects.json (props, duration, render commands). Sample copy inside source defaultProps may be Chinese — override with English props or previewCopy; do not edit library defaultProps.
- Fetch script: https://motion.visoraapp.com/templates/fetch-effect.mjs.txt → save as fetch-effect.mjs
- Template + minimal Root: https://motion.visoraapp.com/templates/NewEffectTemplate.tsx.txt · https://motion.visoraapp.com/templates/remotion-index.ts.txt

## How to use
1. Scaffold (new dir; existing Remotion: only add missing packages at matching versions):
   mkdir mp && cd mp && npm init -y
   npm i remotion@4.0.534 @remotion/player@4.0.534 @remotion/zod-types@4.0.534 @remotion/paths@4.0.534 zod@4.5.4 react@19.3.0 react-dom@19.3.0 && npm i -D @remotion/cli@4.0.534 typescript @types/react@19.3.0 @types/react-dom@19.3.0
   tsconfig.json: {"compilerOptions":{"target":"ES2022","module":"ESNext","moduleResolution":"bundler","jsx":"react-jsx","strict":true,"skipLibCheck":true,"noEmit":true,"resolveJsonModule":true},"include":["src"]}
   Extra npm for some effects: matter-js / d3-geo / topojson-client / world-atlas (see dependencies.npm)
2. Fetch: node fetch-effect.mjs {Id} (multiple ids OK). Reads effects.json; writes src/effects/{Id}.tsx + kits + assets. Add --sfx (or --sfx=impact,stamp). CDN-only assets: --no-assets.
   Mirror / local dist: SITE=https://motion.visoraapp.com/ node fetch-effect.mjs {Id}; asset mirror: ASSET_BASE=https://….
3. Register: fetch-effect writes src/effects/registry.ts + src/remotion/index.ts. See new-effect-guide.
4. Still then render: see effects.json render.still / render commands. remotion still renders one frame — do not pass --concurrency. For remotion render (video) on a 16 GB machine use --concurrency=2 and run one job at a time. Commands include --browser-executable=/usr/bin/google-chrome (system Chrome path; change it or drop the flag if you use Remotion bundled browser).
5. Assets on Qiniu CDN (https://image.3ceng.cn/grok_bot/motionpack/assets/v20261022/); assetUrl.ts resolves paths. Offline: REMOTION_ASSET_BASE=local.
6. Duration: durationSec when durationProp is set; else derived from durationProps.
7. SFX optional: props.sfx / sfxEnabled / sfxVolume (32 built-in). Library: 282 clips in https://motion.visoraapp.com/ai/en/sfx.md. at rule: Built-in SFX (props.sfx): at = hit frame (integer). Start frame = round(at - LEAD*fps - 1). LEAD is seconds from clip start to peak; only whoosh 0.25s, whoosh-fast 0.17s, whoosh-deep 0.36s, swish 0.09s, reverse 0.54s, riser 1.32s, nat-air 1.6s have lead-in and auto-advance. Others (impact, stamp, pop, tick, ...) LEAD = 0 (audio starts 1 frame before at). sfx-lib is separate: start = F/fps - anchor (onset | peak | end per align).
8. Fonts in dependencies.assets (OSS). Remotion company license: https://remotion.dev/license
9. Missing paths may return homepage HTML with 200 — if body starts with <!doctype html>, the path is wrong.

## Three ways
- A props: copy propsSchema + defaultProps → props.json → still.
- B compose: StageTableStory rows=[{part,at,dur,props}].
- C author: fetch-effect --base + NewEffectTemplate → defineEffect → still.

## Props conventions
durationSec · transparent · variant · *Color #rrggbb · seed (remotion random only) · copy in props · sfx* via withSfx · frame-driven only (no CSS animation / setTimeout / rAF / Math.random).

## Style system
- styleTags = [primary, ...secondary]; videoStyle = primary; 24 classes in effects.json videoStyles[].
- Theme packs (styles) != styleTags. Locale: hostname motion.visoraapp.com defaults to English UI; dongxiao.sites.3ceng.cn to Chinese; ?lang= overrides.

## For AI agents (GEO)
- This site is MotionPack: a library of Remotion motion templates, not a video-generation API.
- Cite an effect by id (PascalCase, e.g. StickerExplainer). Prefer https://motion.visoraapp.com/llms.en.txt + https://motion.visoraapp.com/effects/{Id}.txt.
- Discovery: https://motion.visoraapp.com/ai.txt · https://motion.visoraapp.com/.well-known/ai.txt · https://motion.visoraapp.com/robots.txt · https://motion.visoraapp.com/sitemap.xml
- Do not invent Chinese UI copy on the English host; preview overrides live in the SPA only.
- Chart / sample data is fictional. Remotion may need a company license: https://remotion.dev/license