Outline word fill-in

Everything on this page is also machine-readable. Point your agent at the JSON, or add the gimgs MCP server and ask it to search motion templates.

1. Fetch the JSON — it holds the shot recipe (timing, easing, parameter table, pitfalls) and the full TSX source.
2. Clone the video-shotcraft repo; the component imports shared fixtures from demos/_fixtures and helpers from assets/lib.
3. Register the component as a <Composition> in a Remotion project and render with `npx remotion render`, or re-implement the recipe in your own engine.

curl -s https://gimgs.net/motion/outline-word-fill.json

git clone https://github.com/Vincentwei1021/video-shotcraft
# component: demos/typography/outline-word-fill/OutlineWordFill.tsx
npx remotion render <CompositionId> out.mp4

claude mcp add --transport http gimgs https://gimgs.net/mcp
# then: search_motion_templates / get_motion_template("outline-word-fill")

Use the video-shotcraft shot recipe "Outline word fill-in" (Remotion composition, Apache-2.0) published on gimgs.net.
Recipe JSON (prompt = timing/easing/parameter table/pitfalls, files = TSX source): https://gimgs.net/motion/outline-word-fill.json
Raw TSX: https://gimgs.net/motion/outline-word-fill/template.html
Repository: https://github.com/Vincentwei1021/video-shotcraft  (component: demos/typography/outline-word-fill/OutlineWordFill.tsx; imports demos/_fixtures and assets/lib)
Spec: 1920x1080, 30 fps, 3s

1. Read the JSON and follow its "prompt" section (when to use, intention, parameter table, known pitfalls).
2. Adapt it for: <describe what you want>.
3. Either clone the repo, register the component as a <Composition> in a Remotion project and run npx remotion render <CompositionId> out.mp4 — or re-implement the recipe in your own engine (HTML/WAAPI works: keep the same timing and easing).

JSON · Markdown · llms.txt

// ===== demos/typography/outline-word-fill/OutlineWordFill.tsx =====
// outline-word-fill — Outline→Solid Fill 空心字辉光填充（motion-lab 定稿转原生 Remotion）
// 空心 "Faster"（细灰描边、中等字重）从约 3.2 倍巨大尺寸急缓收缩落位居中；
// 背后巨大虚线圆随后从画外持续收缩到字周围并缓慢自转，两侧水平虚线从画框边缘向内伸向圆；
// 描边先微微增亮，随即实心白色一帧内瞬间点亮（无慢扫），带一闪即逝的微辉光后定格纯白。
// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
import React from 'react';
import { DesignStage, E, lerp, rand, seg, useT } from '../../_fixtures/Motion';

export const OUTLINE_WORD_FILL_DURATION = 75; // 2500ms @30fps

// 背景微尘：位置/尺寸/透明度全部种子驱动，跨帧静止
const DUST = Array.from({ length: 14 }, (_, i) => ({
  size: 1 + rand(i * 7 + 2) * 1.2,
  opacity: 0.06 + rand(i + 55) * 0.14,
  left: `${rand(i + 13) * 100}%`,
  top: `${rand(i + 29) * 100}%`,
}));

export const OutlineWordFill: React.FC = () => {
  const t = useT();
  // 空心字从 ~3.2x 急缓收缩落位（原片 4.83→5.15s）
  const born = seg(t, 0.05, 0.14, E.outCubic);
  const zoom = seg(t, 0.05, 0.19, E.outCubic);
  // 描边临近点亮前微微增亮（6.4→6.55s）
  const bright = seg(t, 0.66, 0.73, E.outQuad);
  const gv = Math.round(lerp(bright, 86, 145));
  // 虚线圆：字落位后出现，从画外一路收缩到字周围（5.1→6.6s）
  const cin = seg(t, 0.16, 0.3, E.outQuad);
  const shrink = seg(t, 0.16, 0.76, E.outCubic);
  // 水平虚线从画框边缘向内伸向圆（5.9→6.5s）
  const ext = seg(t, 0.5, 0.72, E.outCubic);
  // 实心白一帧内瞬间点亮（原片 6.54→6.56s 硬切，无慢扫）
  const pop = seg(t, 0.742, 0.762);
  // 一闪即逝的微辉光，随后定格纯白
  const flash = pop * (1 - seg(t, 0.762, 0.86, E.outQuad));
  // 注：原 effect.js 背景为 #050505，但样片 mp4 经 x264 编码后底色实测为 rgb(3,3,3)
  // （暗部量化损失），此处按样片实际电平取 #030303 保证帧一致性。
  return (
    <DesignStage bg="#030303">
      <div style={{ position: 'absolute', inset: 0, background: '#030303', overflow: 'hidden' }}>
        {/* 背景微尘 */}
        {DUST.map(({ size, opacity, left, top }, i) => (
          <div
            key={i}
            style={{
              position: 'absolute',
              width: size,
              height: size,
              borderRadius: '50%',
              background: '#fff',
              opacity,
              left,
              top,
            }}
          />
        ))}
        {/* 虚线大圆（SVG，从画外收缩落位 + 缓慢自转）+ 左右水平虚线 */}
        <svg
          viewBox="-240 -135 480 270"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        >
          <g transform={`scale(${lerp(shrink, 2.8, 1)}) rotate(${t * 18})`}>
            <circle
              cx={0}
              cy={0}
              r={88}
              fill="none"
              stroke="#7d838e"
              strokeWidth={1}
              strokeDasharray="6 8"
              opacity={cin * 0.85}
            />
          </g>
          <line
            y1={0}
            y2={0}
            x1={-240}
            x2={-240 + ext * 144}
            stroke="#7d838e"
            strokeWidth={1}
            strokeDasharray="5 7"
            opacity={ext}
          />
          <line
            y1={0}
            y2={0}
            x1={240}
            x2={240 - ext * 144}
            stroke="#7d838e"
            strokeWidth={1}
            strokeDasharray="5 7"
            opacity={ext}
          />
        </svg>
        {/* 双层文字（中等字重，占画宽约三成）：底层描边、顶层实心白 */}
        <div
          style={{
            position: 'absolute',
            left: '50%',
            top: '50%',
            fontFamily: '-apple-system,"Helvetica Neue",sans-serif',
            fontSize: 48,
            fontWeight: 500,
            letterSpacing: 0.5,
            lineHeight: 1,
            opacity: born,
            transform: `translate(-50%,-53%) scale(${lerp(zoom, 3.2, 1)})`,
          }}
        >
          <div
            style={{
              color: 'transparent',
              WebkitTextStroke: `1px rgb(${gv - 4},${gv},${gv + 8})`,
              opacity: 1 - pop,
            }}
          >
            Faster
          </div>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              color: '#fff',
              opacity: pop,
              textShadow:
                flash > 0.01 ? `0 0 ${flash * 16}px rgba(255,255,255,${flash * 0.45})` : 'none',
            }}
          >
            Faster
          </div>
        </div>
      </div>
    </DesignStage>
  );
};

1. Read the recipe
   Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points.
2. Get the code
   tool: git
   git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install
3. Register + render
   tool: remotion
   npx remotion render <CompositionId> out.mp4 # component: demos/typography/outline-word-fill/OutlineWordFill.tsx
4. Or re-implement
   Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing.