[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81251":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":12,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":9,"rankLanguage":9,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":9,"pushedAt":9,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},81251,"react-bits-video","GordenSun\u002Freact-bits-video","GordenSun","结合react-bits、remotion、hyperframe整合的Skill，可以生成华丽的视频。",null,"JavaScript",22,1,21,0,0.9,"Other",false,"main",true,[],"2026-06-12 02:04:12","# motion-video-maker\n\n> Build polished, fluid, cinematic animated videos as a single standalone\n> HTML file — and render them deterministically to MP4.\n>\n> Distilled from [`react-bits`](https:\u002F\u002Freactbits.dev) (animation library),\n> [`Remotion`](https:\u002F\u002Fwww.remotion.dev) (deterministic video rendering),\n> and [`Hyperframes`](https:\u002F\u002Fhyperframes.com) (HTML-native composition).\n\nThis repository is a **Cursor \u002F Codex \u002F Claude Code Skill**. Drop the\nfolder into your `~\u002F.cursor\u002Fskills\u002F` (or `~\u002F.claude\u002Fskills\u002F`) and any\nagent will know how to author a composition, render it to MP4, and ship\na finished short video.\n\n![v3 → v4 visual side-by-side](examples\u002Fraycast-deep-dive-v4\u002Fv3-vs-v4-comparison.jpg)\n\n---\n\n## What you get\n\n- **17 text-animation components**: split \u002F blur \u002F shiny \u002F gradient \u002F glitch \u002F decrypted \u002F typewriter \u002F rotating \u002F count-up (with mechanical-odometer flip) \u002F shuffle \u002F mask \u002F wave \u002F scramble\n- **11 Canvas backgrounds**: particles, starfield, aurora, threads, letter-glitch, waves, hyperspeed, dot-grid, noise, magnet-lines, ribbons\n- **7 WebGL fragment-shader backgrounds**: liquid-ether, iridescence, prismatic-burst, lightning, plasma, beams, meta-balls\n- **24 outer-animation presets** across 6 visual groups (fade \u002F scale \u002F mask reveal \u002F 3D flip \u002F physics \u002F glitch). Highlights: `unmaskUp\u002FDown\u002FLeft\u002FRight`, `flipInX\u002FY`, `cubeIn`, `magneticIn`, `glitchIn`, `skewIn`, `kenBurnsIn`, `slideBlurIn`, `dropIn`, `irisIn`\n- **3 element-level effects**: `electric-border`, `star-border`, `image-trail`\n- **8 scene-to-scene transitions**: wipe \u002F iris \u002F pixel-dissolve \u002F shape-morph \u002F flash \u002F glitch\n- **Spring physics easing**: 7 presets from `springGentle` to `springStiff`\n- **Text-readability stack** for shader-heavy backgrounds: `.scene-scrim`, `.text-plate`, `.text-card`, `data-scrim` runtime backdrop, `.text-readable`, `.text-stroke-dark`\n- **Layout stability**: hidden clips keep their layout slot (`data-hide-mode` defaults to `visibility`) — already-visible siblings never jump when a later element fades in\n- **12 open-source Chinese fonts**: Noto Sans SC, Noto Serif SC (思源宋体), LXGW WenKai (霞鹜文楷), ZCOOL series, Ma Shan Zheng, Long Cang, Liu Jian Mao Cao — with elegant typography helpers `.cn-serif` \u002F `.cn-wenkai` \u002F `.cn-sans` \u002F `.cn-poster` \u002F `.cn-brush` \u002F `.cn-running`\n- **Puppeteer-driven, frame-accurate MP4 renderer** with FFmpeg encoding\n\n---\n\n## Quick start (for humans)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FGordenSun\u002Freact-bits-video.git\ncd react-bits-video\nnpm install                          # ~30s – installs puppeteer\nnode scripts\u002Finstall-fonts.mjs       # ~30s – downloads 12 Chinese fonts\n\n# scaffold a new video\nnode scripts\u002Fnew-video.mjs my-video --duration 12 --fps 30 --bg aurora\n\n# preview live in a browser\nnode scripts\u002Fpreview.mjs examples\u002Fmy-video\u002Findex.html\n#  → http:\u002F\u002Flocalhost:5173\u002Fexamples\u002Fmy-video\u002Findex.html\n\n# render to MP4 (deterministic, frame-accurate)\nnode scripts\u002Frender.mjs examples\u002Fmy-video\u002Findex.html examples\u002Fmy-video\u002Foutput.mp4 \\\n     fps=30 crf=18 preset=medium\n```\n\n`ffmpeg` must be in `$PATH` (any modern build with `libx264` works).\n\n---\n\n## Quick start (for AI agents)\n\n```bash\n# Install once into your skills directory\ncd ~\u002F.cursor\u002Fskills   # or ~\u002F.claude\u002Fskills\ngit clone https:\u002F\u002Fgithub.com\u002FGordenSun\u002Freact-bits-video.git\ncd react-bits-video\nnpm install && node scripts\u002Finstall-fonts.mjs\n```\n\nThen, in any agent conversation, ask:\n\n> \"Use the motion-video-maker skill to make a 30-second video about ___\"\n\nThe agent will read `SKILL.md`, scaffold an `index.html`, render it,\nand hand you back the MP4.\n\nThe contract is dead-simple — **one HTML file per video**, driven by\n`data-*` attributes the runtime understands:\n\n```html\n\u003Cdiv id=\"stage\" data-width=\"1920\" data-height=\"1080\"\n     data-fps=\"30\" data-duration=\"10\">\n\n  \u003C!-- Background (Canvas or WebGL shader) -->\n  \u003Cdiv data-background=\"liquid-ether\"\n       data-colors=\"#06061a,#1a1240,#2a2070,#0a3055\">\u003C\u002Fdiv>\n\n  \u003C!-- Scene wrapper with readability scrim + layout-stable hide -->\n  \u003Cdiv class=\"scene-scrim\"\n       data-clip data-hide-mode=\"visibility\"\n       data-start=\"0\" data-duration=\"10\"\n       style=\"position: absolute; inset: 0; z-index: 10;\">\n\n    \u003Ch1 class=\"title\"                                \u003C!-- elegant 思源宋体 by default -->\n        data-clip data-start=\"0.3\" data-duration=\"9.4\"\n        data-text-animation=\"split-text\"\n        data-stagger=\"0.08\" data-easing=\"springBouncy\">岁月静好\u003C\u002Fh1>\n\n    \u003Cp class=\"cn-wenkai\" style=\"font-size:60px;\"\n       data-clip data-start=\"1.5\" data-duration=\"8\"\n       data-animation=\"unmaskUp\" data-easing=\"easeInOutQuart\">「春水初生，春林初盛」\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n\u003Cscript src=\"runtime\u002Fspring.js\">\u003C\u002Fscript>\n\u003Cscript src=\"runtime\u002Ftimeline.js\">\u003C\u002Fscript>\n\u003Cscript src=\"runtime\u002Fcomponents.js\">\u003C\u002Fscript>\n\u003Cscript src=\"runtime\u002Fshaders.js\">\u003C\u002Fscript>\n\u003Cscript src=\"runtime\u002Ftransitions.js\">\u003C\u002Fscript>\n\u003Cscript src=\"runtime\u002Feffects.js\">\u003C\u002Fscript>\n```\n\nThat's the whole file. The runtime registers a seekable timeline,\n`render.mjs` opens the page in headless Chromium, calls\n`window.__mvm.seek(i \u002F fps)` for every frame `i`, screenshots the\nviewport, and pipes the PNG sequence into FFmpeg.\n\n---\n\n## Folder layout\n\n```\nreact-bits-video\u002F\n├── SKILL.md            # full agent-facing spec (read this!)\n├── runtime\u002F            # the entire client-side runtime\n│   ├── timeline.js     # seekable frame-accurate timeline\n│   ├── components.js   # 17 text anims + 11 canvas bg\n│   ├── spring.js       # damped-harmonic-oscillator easing\n│   ├── shaders.js      # 7 WebGL fragment-shader backgrounds\n│   ├── transitions.js  # 8 inter-scene canvas overlays\n│   ├── effects.js      # electric-border \u002F star-border \u002F image-trail \u002F scrim\n│   └── styles.css      # elegant defaults + readability stack + 8 .cn-* classes\n├── scripts\u002F\n│   ├── render.mjs            # the renderer (puppeteer + ffmpeg)\n│   ├── preview.mjs           # local web server for live preview\n│   ├── install-fonts.mjs     # one-shot font downloader\n│   ├── new-video.mjs         # scaffold a new composition\n│   ├── debug.mjs             # inspect DOM state at any timestamp\n│   └── snap.mjs              # single-frame high-res screenshot\n├── templates\u002F\n│   ├── base.html             # composition starter template\n│   ├── effects-showcase.html # 6-cell sampler for signature effects\n│   └── readable-showcase.html# 12-cell sampler for readability stack\n├── examples\u002F\n│   ├── time-flies-v2\u002F        # 42s reflective piece — full feature tour\n│   │   ├── index.html\n│   │   ├── output.mp4\n│   │   └── contact-sheet.jpg\n│   └── raycast-deep-dive-v4\u002F # 40s technical-article retelling\n│       ├── index.html\n│       ├── output.mp4\n│       └── v3-vs-v4-comparison.jpg\n├── reference\u002F\n│   ├── components.md   # per-component prop tables + gotchas\n│   └── workflow.md     # step-by-step recipes (data video \u002F ad bumper \u002F hook)\n└── assets\u002Ffonts\u002F       # downloaded by install-fonts.mjs (gitignored)\n    └── fonts.css       # auto-generated @font-face stylesheet\n```\n\n---\n\n## Showcase reels\n\n| Reel | Length | What's in it |\n|---|---|---|\n| **[time-flies-v2](examples\u002Ftime-flies-v2\u002F)** | 42 s | All-in tour: meta-balls \u002F aurora \u002F liquid-ether \u002F prismatic-burst \u002F magnet-lines \u002F lightning \u002F ribbons backgrounds; odometer chain (463 → 70 → 3,600 → 86,400 → 525,600); electric-border \u002F image-trail \u002F clock effects; 思源宋体 + 霞鹜文楷 typography |\n| **[raycast-deep-dive-v4](examples\u002Fraycast-deep-dive-v4\u002F)** | 40 s | Tech-article retelling — 7 scenes × different entrance animation, electric-border on Hybrid card, magnet-lines architecture, image-trail rows, odometer memory counters, scene-scrim everywhere |\n\n![time-flies-v2 contact sheet](examples\u002Ftime-flies-v2\u002Fcontact-sheet.jpg)\n\n---\n\n## How a composition runs\n\n```\n┌──────────────┐                          ┌──────────────────┐\n│  index.html  │ ─── puppeteer page ───▶ │ Headless Chromium │\n└──────────────┘                          └─────────┬────────┘\n                                                    │\n                       window.__mvm.seek(i\u002Ffps)     │  every frame:\n                       ◀───────────────────────────┘  screenshot viewport\n                                                    │\n                       PNG sequence  ───────────────┴──▶  FFmpeg  ──▶  output.mp4\n```\n\nCompositions are **fully deterministic** — `seek(t)` always renders the\nsame pixels for the same `t`. No reliance on wall-clock or `requestAnimationFrame`\nduring render. That's how a 40-second composition reliably produces 1200\nidentical frames at 30 fps.\n\n---\n\n## Authoring tips (the short list)\n\n1. **Pick one font path:** stick to either elegant serif (`Noto Serif SC` \u002F\n   `LXGW WenKai` — the new default) or modern bold (add `.cn-sans` to flip)\n   for a unified mood.\n2. **Always wrap a scene in `.scene-scrim`** when the background is a\n   shader\u002Faurora\u002Fletter-glitch — without it, text disappears on bright\n   spots.\n3. **Use `data-hide-mode=\"visibility\"` (now the default)** so already-\n   visible elements don't jump when a new sibling animates in.\n4. **Cycle entrance presets across siblings.** Five cards in a row should\n   use five different animations from at least two of: mask \u002F 3D \u002F physics\n   \u002F blur \u002F glitch.  See `examples\u002Fraycast-deep-dive-v4\u002Findex.html`.\n5. **3D entrance + gradient text doesn't work** in Chromium (the gradient\n   `-webkit-text-fill-color: transparent` is killed by 3D `transform`).\n   Use solid color + `text-shadow` halo instead.\n6. **Preview at 15 fps first** (`fps=15 preset=ultrafast crf=24`) for\n   iteration, then re-render the final at 30 fps with `preset=medium crf=18`.\n\nThe full spec is in [`SKILL.md`](SKILL.md) (read by AI agents).\n\n## Common pitfall — invisible text on light\u002Fdark backgrounds\n\nThe single most common agent mistake is forgetting that **`#stage`\ndefaults to white text on a dark backdrop**.  If you add an element\nwith a light background **but don't change its text color**, the\nwhite default will make the text invisible against the white card.\n\n### Use paired utility classes — never write a half-pair\n\n| If your container has… | Use this | What it guarantees |\n|---|---|---|\n| Dark background | `.mvm-card-dark`  | Dark bg + **white** text |\n| Light background | `.mvm-card-light` | Light bg + **dark** text |\n| Just text color | `.mvm-light` \u002F `.mvm-dark` | Locks text color |\n| Whole-scene flip | `.mvm-bg-light` \u002F `.mvm-bg-dark` | Inverts theme |\n| Light theme override | `style=\"--mvm-bg: #f7f5ef; --mvm-text: #0a0a0f\"` on `#stage` | Auto-inherits everywhere |\n\n```html\n\u003C!-- ✅ Good -->\n\u003Cdiv class=\"mvm-card-light\">\u003Ch2>清晰可见\u003C\u002Fh2>\u003C\u002Fdiv>\n\n\u003C!-- ❌ Bad — text inherits white, becomes invisible -->\n\u003Cdiv style=\"background: white\">\u003Ch2>看不见\u003C\u002Fh2>\u003C\u002Fdiv>\n```\n\n### Automatic contrast warnings\n\n`runtime\u002Fcontrast-check.js` runs during preview and render. Any text\nelement under 2.2:1 WCAG luminance ratio against its effective\nbackground produces a `console.warn`. `scripts\u002Frender.mjs` collects\nthese and prints a summary at the end of the export — so you'll know\n**before you ship** if you have invisible text in any frame.\n\nSee `templates\u002Fcontrast-test.html` for a 4-cell self-test that\nexercises both failure and success cases.\n\n---\n\n## Lineage\n\n| Borrowed from | What we took |\n|---|---|\n| **react-bits** | Component taxonomy + naming (`split-text`, `iridescence`, `electric-border`, `meta-balls`, `image-trail`, `odometer`, `magnet-lines`, `ribbons`, `prismatic-burst`, `lightning`, `plasma`, `liquid-ether`, …). We re-implemented every shader in plain GLSL — no `ogl` dependency. |\n| **motion.dev \u002F framer-motion** | The closed-form damped harmonic oscillator math behind `springGentle\u002FSoft\u002FSnap\u002FSmooth\u002FBouncy\u002FWobbly\u002FStiff`. |\n| **Hyperframes** | HTML-native composition; `data-*` attribute API; one `index.html` per video; Puppeteer-screenshot frame capture. |\n| **Remotion** | Frame-accurate deterministic seek; PNG → FFmpeg pipeline; Chromium launch flags. |\n\n---\n\n## License\n\nMIT. The runtime, scripts, examples and documentation are MIT-licensed.\n\nThe downloaded fonts are governed by their own licenses (all\nOFL-compatible — Noto fonts: SIL OFL 1.1; LXGW WenKai: OFL; ZCOOL\nseries: OFL; Ma Shan Zheng \u002F Long Cang \u002F Liu Jian Mao Cao: OFL).\nSee [Google Fonts licensing](https:\u002F\u002Ffonts.google.com\u002Fabout) and\n[`scripts\u002Finstall-fonts.mjs`](scripts\u002Finstall-fonts.mjs) for the\nmanifest with URLs.\n","GordenSun\u002Freact-bits-video 是一个用于生成高质量动画视频的项目。它集成了 react-bits、Remotion 和 Hyperframes 的功能，提供了丰富的文本动画组件、背景效果和过渡特效，支持使用 Spring 物理引擎进行平滑过渡，并内置了多种中文字体以增强排版美观性。通过 Puppeteer 驱动的 MP4 渲染器，用户可以将 HTML 文件确定性地渲染为 MP4 格式的视频。该项目适用于需要创建流畅且具有视觉吸引力的视频内容的场景，如产品演示、教程讲解或创意广告等。",2,"2026-06-11 04:04:03","CREATED_QUERY"]