Scramble decode text

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/scramble.json

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

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

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

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/scramble/Scramble.tsx =====
// scramble — Scramble Decode 乱码锁定（motion-lab 定稿转原生 Remotion）
// 每个字符先高速随机跳字（种子驱动、可复现），再从左到右逐个"锁定"为真字符，
// 锁定瞬间闪一下高亮辉光。与 typewriter 的顺序打字完全不同的质感——黑客/解密感。
// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
import React from 'react';
import { DesignStage, rand, seg, useT } from '../../_fixtures/Motion';

export const SCRAMBLE_DURATION = 96; // 3200ms @30fps

const TEXT = 'TEMPLATE MOTION DEMO';
const POOL = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+=<>/\\';
const CHARS = [...TEXT];

export const Scramble: React.FC = () => {
  const t = useT();
  const frame = Math.floor(t * 96);
  return (
    <DesignStage bg="#07080c">
      <div
        style={{
          position: 'absolute',
          inset: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: '#07080c',
          fontFamily: '"SF Mono",Menlo,monospace',
          fontSize: 34,
          letterSpacing: 2,
        }}
      >
        {CHARS.map((ch, i) => {
          let content: string = ch;
          let color = '#3d4560';
          let textShadow = 'none';
          if (ch !== ' ') {
            // 锁定时刻：从左到右基础 stagger + 种子微扰
            const lockAt = 0.25 + (i / CHARS.length) * 0.6 + rand(i * 7) * 0.06;
            if (t < 0.06) {
              content = ' '; // 开场短暂空白
            } else if (t < lockAt) {
              // 高速跳字：每 2 帧换一个随机字符
              content = POOL[Math.floor(rand(i * 131 + Math.floor(frame / 2)) * POOL.length)];
            } else {
              // 锁定为真字符，锁定瞬间闪高亮辉光后回落
              const flash = 1 - seg(t, lockAt, lockAt + 0.1);
              color = flash > 0.4 ? '#dff3ff' : '#e8eaf0';
              textShadow = `0 0 ${flash * 18}px rgba(120,200,255,${flash})`;
            }
          }
          return (
            <span
              key={i}
              style={{ minWidth: '0.62em', textAlign: 'center', color, textShadow }}
            >
              {content === ' ' ? ' ' : content}
            </span>
          );
        })}
      </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/scramble/Scramble.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.