Travel-through transitions

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/transition-travel.json

git clone https://github.com/Vincentwei1021/video-shotcraft
# component: demos/transition/transition-travel/LetterformZoom.tsx, demos/transition/transition-travel/SharedElementMorph.tsx
npx remotion render <CompositionId> out.mp4

claude mcp add --transport http gimgs https://gimgs.net/mcp
# then: search_motion_templates / get_motion_template("transition-travel")

Use the video-shotcraft shot recipe "Travel-through transitions" (Remotion composition, Apache-2.0) published on gimgs.net.
Recipe JSON (prompt = timing/easing/parameter table/pitfalls, files = TSX source): https://gimgs.net/motion/transition-travel.json
Raw TSX: https://gimgs.net/motion/transition-travel/template.html
Repository: https://github.com/Vincentwei1021/video-shotcraft  (component: demos/transition/transition-travel/LetterformZoom.tsx, demos/transition/transition-travel/SharedElementMorph.tsx; imports demos/_fixtures and assets/lib)
Spec: 1920x1080, 30 fps, 4.39s

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/transition/transition-travel/LetterformZoom.tsx =====
import React, { useId } from 'react';
import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
import { FakeDashboard, G } from '../../_fixtures/Fixtures';

// letterform-zoom〔转场〕：巨型标题 "DASH" 字腔透出新页面，镜头急速推进
// 字母 A 的三角字腔，洞被撑满全屏的瞬间新页面接管，残余笔画滑出画外。
// 结构：底层 FakeDashboard B 静置全屏（微 dolly）；上层"米灰盖板"用
// SVG <mask>（白底 + 黑字）在字形处挖洞——洞里即透出 B；对盖板整组做
// transform-origin 对准 A 字腔中心的指数 scale 1→28（60f，前 20f 慢
// 后 40f 陡）。scale 过临界值后盖板快速退场 = 撤掉 mask，B 全屏接管。

const FS = 560; // 标题字号
// A 字腔（三角洞）中心：Helvetica Bold 度量估算——
// "DASH" 总宽 ≈ 2.833em，居中起点 x≈167，A 占 571–975 → 腔心 x≈773；
// 基线 y=741（大写居中），腔心约在基线上方 0.42em → y≈508。
const ORIGIN = { x: 773, y: 508 };
const BASELINE = 741;
const ZOOM_MAX = 28;

const titleFont: React.CSSProperties = {
  fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
  fontWeight: 900,
  fontSize: FS,
};

export const LetterformZoom: React.FC = () => {
  const frame = useCurrentFrame();
  // mask ID 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）
  const cutId = `lfz-cut-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;

  // 0–25f 建立 hold；25–85f 推进。慢起 bezier 叠指数尺度 = 前段慢、后段陡
  const t = interpolate(frame, [25, 85], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.6, 0, 0.85, 0.5),
  });
  const scale = Math.pow(ZOOM_MAX, t); // 指数推进：等比的"穿越"速度感

  // scale 过临界值（洞已撑满画面中部）→ 盖板残余笔画边外飞边撤场（撤 mask）
  const plateOpacity = interpolate(scale, [15, 24], [1, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // 速度模糊：期望视觉模糊量随推进升高；CSS filter 会被 transform 放大，
  // 故除以 scale 补偿
  const visBlur = interpolate(t, [0, 0.45, 1], [0, 1.5, 16], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const blurCss = visBlur / scale;

  // 新页面微 dolly：推进期跟着轻推 1→1.1，接管后 25f 内落定回 1（收势）
  const bScale =
    frame < 85
      ? interpolate(t, [0, 1], [1, 1.1])
      : interpolate(frame, [85, 110], [1.1, 1], {
          extrapolateLeft: 'clamp',
          extrapolateRight: 'clamp',
          easing: Easing.out(Easing.cubic),
        });

  return (
    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
      {/* 新页面：先只在字腔里透出，接管后全屏（110–140f 静止收尾） */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          transform: `scale(${bScale})`,
          transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
        }}
      >
        <FakeDashboard variant="B" />
      </div>

      {/* 米灰盖板（字形挖洞）+ 字缘描边 + 副标灰条：整组指数推进后飞出画外 */}
      {plateOpacity > 0 && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            transform: `scale(${scale})`,
            transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
            opacity: plateOpacity,
            filter: blurCss > 0.02 ? `blur(${blurCss}px)` : undefined,
          }}
        >
          <svg
            width={1920}
            height={1080}
            viewBox="0 0 1920 1080"
            style={{ position: 'absolute', inset: 0, display: 'block' }}
          >
            <defs>
              <mask id={cutId}>
                <rect width={1920} height={1080} fill="#fff" />
                <text
                  x={960}
                  y={BASELINE}
                  textAnchor="middle"
                  fill="#000"
                  style={titleFont}
                >
                  DASH
                </text>
              </mask>
            </defs>
            <rect width={1920} height={1080} fill={G.bg} mask={`url(#${cutId})`} />
            {/* 字缘细描边：让"洞"的轮廓在米灰上读得清 */}
            <text
              x={960}
              y={BASELINE}
              textAnchor="middle"
              fill="none"
              stroke={G.ink}
              strokeWidth={3}
              opacity={0.3}
              style={titleFont}
            >
              DASH
            </text>
          </svg>
          {/* 副标灰条：随盖板一起被甩出画外，强化"页面元素残余"感 */}
          <div
            style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 812,
              display: 'flex',
              justifyContent: 'center',
              gap: 16,
            }}
          >
            <div style={{ width: 240, height: 16, background: G.bar, borderRadius: 8 }} />
            <div style={{ width: 130, height: 16, background: G.line, borderRadius: 8 }} />
          </div>
        </div>
      )}
    </AbsoluteFill>
  );
};


// ===== demos/transition/transition-travel/SharedElementMorph.tsx =====
import React from 'react';
import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
import { FakeDashboard, Card, G } from '../../_fixtures/Fixtures';

// shared-element-morph〔转场〕：全屏特写面板收缩、位移、长出圆角，
// 严丝合缝飞落进 dashboard 网格里它所属的卡片槽位，落座带 3% 过冲。
// 观众感觉是同一个物体被镜头送回原位（FLIP 共享元素转场）。
//
// 目标槽位 = FakeDashboard A 中列第二行那格（seed 5），按 fixtures 布局精确推算：
//   侧栏 220 + 网格 padding 36 → 列宽 (1920-220-72-56)/3 = 524
//   头部 72 + padding 36     → 行高 (1008-72-28)/2   = 454
//   中列 x = 220+36+524+28 = 808；第二行 y = 72+36+454+28 = 590
const SLOT = { x: 808, y: 590, w: 524, h: 454, r: 14, seed: 5 };
const FULL = { x: 0, y: 0, w: 1920, h: 1080, r: 0 };

// 节拍：0–35 全屏特写 hold ｜ 35–60 morph 25f（bezier 0.4,0,0.2,1 → 1.03）
//       60–70 过冲回弹落座 ｜ 70–130 静止收尾
const MORPH_START = 35;
const MORPH_END = 60;
const SETTLE_END = 70;

const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

export const SharedElementMorph: React.FC = () => {
  const frame = useCurrentFrame();

  // 位置/尺寸/圆角共用同一条进度曲线：25f 冲到 1.03，再 10f 弹回 1
  const drive = interpolate(frame, [MORPH_START, MORPH_END], [0, 1.03], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.4, 0, 0.2, 1),
  });
  const settle = interpolate(frame, [MORPH_END, SETTLE_END], [1.03, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.out(Easing.cubic),
  });
  const p = frame <= MORPH_END ? drive : settle;

  const x = lerp(FULL.x, SLOT.x, p);
  const y = lerp(FULL.y, SLOT.y, p);
  const w = lerp(FULL.w, SLOT.w, p);
  const h = lerp(FULL.h, SLOT.h, p);
  const r = lerp(FULL.r, SLOT.r, p);

  // 内容是同一张卡：按目标尺寸渲染，等比放大铺满全屏（全屏 = 这张卡的特写），
  // 收缩过程中内容随容器一起缩小，强化"同一个物体"的感知
  const contentScale = w / SLOT.w;

  // 投影随尺寸缩小：悬空时大而深，落座后收敛到 fixtures 卡片原生投影量级
  const ps = Math.min(Math.max(p, 0), 1);
  const shadowY = lerp(36, 2, ps);
  const shadowBlur = lerp(110, 8, ps);
  const shadowAlpha = lerp(0.32, 0.06, ps);

  // 背景 dashboard 先 0.9 透明度待命，落座瞬间提到 1
  const bgOpacity = interpolate(frame, [MORPH_END - 2, MORPH_END + 3], [0.9, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.out(Easing.quad),
  });

  return (
    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
      <div style={{ opacity: bgOpacity }}>
        <FakeDashboard variant="A" />
      </div>
      {/* 共享元素：全屏特写 → 精确飞落进槽位 */}
      <div
        style={{
          position: 'absolute',
          left: x,
          top: y,
          width: w,
          height: h,
          borderRadius: r,
          overflow: 'hidden',
          background: G.card,
          boxShadow: `0 ${shadowY}px ${shadowBlur}px rgba(0,0,0,${shadowAlpha})`,
        }}
      >
        <div
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            transform: `scale(${contentScale})`,
            transformOrigin: 'top left',
          }}
        >
          <Card
            w={SLOT.w}
            h={SLOT.h}
            seed={SLOT.seed}
            style={{ boxShadow: 'none', borderRadius: r / Math.max(contentScale, 0.0001) }}
          />
        </div>
      </div>
    </AbsoluteFill>
  );
};

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/transition/transition-travel/LetterformZoom.tsx, demos/transition/transition-travel/SharedElementMorph.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.