Ring diagram annotation reveal

Tudo nesta página também é legível por máquina. Aponte seu agente para o JSON ou adicione o servidor MCP do gimgs e peça para buscar templates de motion.

1. Baixe o JSON — contém a receita do plano (timing, easing, tabela de parâmetros, armadilhas) e o código TSX completo.
2. Clone o repositório video-shotcraft; o componente importa fixtures de demos/_fixtures e helpers de assets/lib.
3. Registre o componente como <Composition> em um projeto Remotion e renderize com `npx remotion render`, ou reimplemente a receita no seu próprio engine.

curl -s https://gimgs.net/motion/ring-diagram-annotation-reveal.json

git clone https://github.com/Vincentwei1021/video-shotcraft
# component: demos/data/ring-diagram-annotation-reveal/RingDiagramAnnotationReveal.tsx
npx remotion render <CompositionId> out.mp4

claude mcp add --transport http gimgs https://gimgs.net/mcp
# then: search_motion_templates / get_motion_template("ring-diagram-annotation-reveal")

Use the video-shotcraft shot recipe "Ring diagram annotation reveal" (Remotion composition, Apache-2.0) published on gimgs.net.
Recipe JSON (prompt = timing/easing/parameter table/pitfalls, files = TSX source): https://gimgs.net/motion/ring-diagram-annotation-reveal.json
Raw TSX: https://gimgs.net/motion/ring-diagram-annotation-reveal/template.html
Repository: https://github.com/Vincentwei1021/video-shotcraft  (component: demos/data/ring-diagram-annotation-reveal/RingDiagramAnnotationReveal.tsx; imports demos/_fixtures and assets/lib)
Spec: 1920x1080, 30 fps, 6.38s

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/data/ring-diagram-annotation-reveal/RingDiagramAnnotationReveal.tsx =====
// ring-diagram-annotation-reveal — 全屏主体收束成同心环图解，再左移让出注释栏。
// 保留原 motion-blocking 的圆窗收缩、分段外环、向心箭头、旋转、错峰标签与收尾 hold。
import React from 'react';
import { Easing, interpolate, useCurrentFrame } from 'remotion';
import { DesignStage } from '../../_fixtures/Motion';

export const RING_DIAGRAM_ANNOTATION_REVEAL_DURATION = 190;

const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
const p = (frame: number, start: number, end: number) =>
  interpolate(frame, [start, Math.max(start + 1, end)], [0, 1], {
    ...CLAMP,
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

const TitleBlock: React.FC<{ frame: number; start: number; shade: string; index: number }> = ({
  frame,
  start,
  shade,
  index,
}) => {
  const k = p(frame, start, start + 8);
  const echo = interpolate(frame, [start - 1, start, start + 2, start + 8], [0, 0.32, 0.32, 0], CLAMP);
  return (
    <div style={{ position: 'relative', width: 26, height: 34 }}>
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: '#a7a7a4',
          opacity: echo,
          transform: `translateY(${interpolate(k, [0, 1], [8, -4])}px)`,
        }}
      />
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: shade,
          opacity: k,
          clipPath: `inset(${interpolate(k, [0, 1], [100, 0])}% 0 0 0)`,
          transform: `translateY(${interpolate(k, [0, 1], [9, 0])}px)`,
          display: 'grid',
          placeItems: 'center',
          color: '#f7f7f5',
          fontFamily: 'Arial, sans-serif',
          fontSize: 8,
          fontWeight: 800,
        }}
      >
        {index + 1}
      </div>
    </div>
  );
};

export const RingDiagramAnnotationReveal: React.FC = () => {
  const frame = useCurrentFrame();
  const aperture = p(frame, 11, 50);
  const ringIn = p(frame, 18, 60);
  const coilsIn = p(frame, 30, 50);
  const arrowsIn = p(frame, 35, 50);
  const layout = p(frame, 90, 134);
  const label = p(frame, 114, 160);
  const definition = p(frame, 137, 143);
  const centerX = interpolate(layout, [0, 1], [240, 154]);
  const scale = interpolate(layout, [0, 1], [1, 0.84]);
  const rotate = interpolate(frame, [29, 187], [0, 44.2], CLAMP);
  const apertureRadius = interpolate(aperture, [0, 1], [540, 61]);

  const arrows = Array.from({ length: 12 }, (_, i) => {
    const a = ((-90 + i * 30) * Math.PI) / 180;
    const outer = 97;
    const inner = 72;
    return {
      x1: 240 + Math.cos(a) * outer,
      y1: 123 + Math.sin(a) * outer,
      x2: 240 + Math.cos(a) * inner,
      y2: 123 + Math.sin(a) * inner,
    };
  });

  return (
    <DesignStage bg="#f7f7f5" raster="zoom">
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: 'Arial, sans-serif' }}>
        <div
          style={{
            position: 'absolute',
            inset: 0,
            background: '#c7c7c4',
            clipPath: `circle(${apertureRadius * scale}px at ${centerX}px 123px)`,
          }}
        />
        <div
          style={{
            position: 'absolute',
            left: centerX,
            top: 123,
            width: 220,
            height: 220,
            transform: `translate(-50%,-50%) scale(${scale})`,
            transformOrigin: '50% 50%',
          }}
        >
          <div
            style={{
              position: 'absolute',
              left: 36,
              top: 36,
              width: 148,
              height: 148,
              borderRadius: '50%',
              border: '1px solid #8a8a87',
              opacity: ringIn,
              transform: `scale(${interpolate(ringIn, [0, 1], [3.8, 1])})`,
            }}
          />
          <div
            style={{
              position: 'absolute',
              left: 8,
              top: 8,
              width: 204,
              height: 204,
              borderRadius: '50%',
              border: '7px dashed #999995',
              boxSizing: 'border-box',
              opacity: coilsIn,
              transform: `rotate(${rotate}deg) scale(${interpolate(coilsIn, [0, 1], [1.08, 1])})`,
            }}
          />
          <svg viewBox="0 0 480 270" style={{ position: 'absolute', left: -130, top: -12, width: 480, height: 270 }}>
            <defs>
              <marker id="ring-arrow-head" markerWidth="5" markerHeight="5" refX="4.5" refY="2.5" orient="auto">
                <path d="M0,0 L5,2.5 L0,5 Z" fill="#303032" />
              </marker>
            </defs>
            <g stroke="#454548" strokeWidth="0.75" markerEnd="url(#ring-arrow-head)" opacity={arrowsIn}>
              {arrows.map(({ x1, y1, x2, y2 }) => (
                <line
                  key={`${x1}-${y1}`}
                  x1={x1}
                  y1={y1}
                  x2={interpolate(arrowsIn, [0, 1], [x1, x2])}
                  y2={interpolate(arrowsIn, [0, 1], [y1, y2])}
                />
              ))}
            </g>
          </svg>
          <div
            style={{
              position: 'absolute',
              left: 57,
              top: 57,
              width: 106,
              height: 106,
              borderRadius: '50%',
              background: '#c7c7c4',
              display: 'grid',
              placeItems: 'start center',
              paddingTop: 28,
              boxSizing: 'border-box',
              color: '#57575a',
              fontSize: 8,
              fontWeight: 800,
              letterSpacing: 0.5,
            }}
          >
            CONTENT
          </div>
          <div
            style={{
              position: 'absolute',
              left: 79,
              top: 79,
              width: 62,
              height: 62,
              borderRadius: '50%',
              background: '#5b5b5e',
              display: 'grid',
              placeItems: 'center',
              color: '#fff',
              fontSize: 8,
              fontWeight: 800,
            }}
          >
            SUBJECT
          </div>
        </div>

        <div style={{ position: 'absolute', left: 321, top: 93, display: 'flex', gap: 1.5 }}>
          {['#59595c', '#69696c', '#858588', '#a7a7aa'].map((shade, i) => (
            <TitleBlock key={shade} frame={frame} start={112 + i * 3} shade={shade} index={i} />
          ))}
        </div>
        <div
          style={{
            position: 'absolute',
            left: 310,
            top: 132,
            width: 122,
            height: 16,
            background: '#929295',
            transformOrigin: 'left center',
            transform: `scaleX(${label})`,
            opacity: label,
            display: 'grid',
            placeItems: 'center',
            color: '#f9f9f7',
            fontSize: 8,
            fontWeight: 800,
            letterSpacing: 0.8,
          }}
        >
          EXPLANATION
        </div>
        <div
          style={{
            position: 'absolute',
            left: 325,
            top: 154,
            width: 92,
            height: 15,
            background: '#d0d0cd',
            opacity: definition,
            transform: `translateY(${interpolate(definition, [0, 1], [5, 0])}px)`,
            display: 'grid',
            placeItems: 'center',
            color: '#626265',
            fontSize: 8,
            fontWeight: 700,
          }}
        >
          SUPPORTING DETAIL
        </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/data/ring-diagram-annotation-reveal/RingDiagramAnnotationReveal.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.