{
  "slug": "tear-streak-transitions",
  "title": "Glitch-tear strip cut",
  "tagline": "A tearing transition — glitch-displace noise tear (16 horizontal strips jitter out of alignment, cut mid-jitter), a strip-level tear with digital-glitch meaning.",
  "description": "A tearing transition — glitch-displace noise tear (16 horizontal strips jitter out of alignment, cut mid-jitter), a strip-level tear with digital-glitch meani",
  "category": "transition",
  "tags": [
    "shotcraft",
    "remotion",
    "transition",
    "effects"
  ],
  "tier": "free",
  "license": "Apache-2.0",
  "spec": {
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 4.54,
    "aspect": "16:9"
  },
  "kind": "remotion",
  "params_schema": {
    "type": "object",
    "properties": {}
  },
  "default_params": {},
  "preview": {
    "poster": "https://gimgs.net/motion/media/tear-streak-transitions/poster-7eecd2d033ea.jpg",
    "video": "https://gimgs.net/motion/media/tear-streak-transitions/video-9b293e3829ad.mp4"
  },
  "variants": [
    {
      "key": "glitch-displace",
      "label": "glitch-displace",
      "description": "A tearing transition — glitch-displace noise tear (16 horizontal strips jitter out of alignment, cut mid-jitter), a strip-level tear with digital-glitch meaning",
      "use": "Glitch/breakage meaning; a violent page change before a climax",
      "video": "https://gimgs.net/motion/media/tear-streak-transitions/video-9b293e3829ad.mp4",
      "poster": "https://gimgs.net/motion/media/tear-streak-transitions/poster-7eecd2d033ea.jpg"
    }
  ],
  "credits": {
    "author": "video-shotcraft (Vincent Wei)",
    "url": "https://github.com/Vincentwei1021/video-shotcraft"
  },
  "page_url": "https://gimgs.net/motion/tear-streak-transitions.html",
  "json_url": "https://gimgs.net/motion/tear-streak-transitions.json",
  "template_url": "https://gimgs.net/motion/tear-streak-transitions/template.html",
  "play_url": null,
  "markdown_url": "https://gimgs.net/motion/tear-streak-transitions.md",
  "updated_at": "2026-09-24T07:40:26.477Z",
  "prompt": "## When to use\n\nA high-energy page change: digital-glitch/breakage meaning; a strip-level tear that keeps page integrity intact while pushing energy to the max\n\n## Intention\n\nThis card handles **strip-level tearing**: the page is sliced into horizontal strips moving at high speed, but each strip's content stays intact. This is a taste boundary drawn through repeated judging — the fragment family of transitions was rejected three times running (doom-melt vertical-strip drop, pixel-dissolve blocks flipping to black, facade-block brick flip-away, all eliminated), while the strip family passed. Fragments read as \"the page being destroyed\"; strips read as \"the page in high-speed motion\" — integrity intact, energy maxed out. The horizontal tear: strips jitter out of alignment left-right plus light/dark double-imaging, a grayscale downgrade of digital glitch (light/dark double-image instead of RGB split). Fits system-failure/instant-jump meanings.\n\n## Duration & energy\n\n- Duration: Pre-state ≥40f + tear 17–24f + tail ≥40f, ~4.5s (135–140f)\n- Energy: High\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n本卡管**条带级撕裂**——页面被切成横条高速运动，但每条内容完整。\n这是反复裁决划出的品味分界：碎块系转场三连否（doom-melt 竖条坠落、\npixel-dissolve 方块翻黑、facade-block 砖块翻飞全部淘汰），条带系过关。碎块读作\"页面被破坏\"，条带读作\"页面在高速\n运动\"——完整性不破、能量却拉满。横向撕：条带左右错位抖动 +\n明暗重影，数字故障的灰阶降维（RGB split 改明暗双重影）。\n适用系统故障/瞬间跳变语义。\n\n## 单式选型\n| 式 | 做法 | 适用 |\n|----|------|------|\n| A glitch-displace | 16 条水平条带（外层裁剪+内层整页 translateY 对位），每条 translateX 由库标 h(i*31+f*7) 驱动 ±70px 抖动，叠明暗错位重影；58f 抖动衰减中硬切 B 页再抖 4f 归位 | 故障/断裂语义；高潮前的暴力换页 |\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 抖幅 | ±70px（spec 加码档），底层垫完整页防露底缝 | 峰值帧条带错位必须肉眼明显——±12px 级读不出撕裂 |\n| 包络 | 45–48f out-cubic 冲起 → 平台 → 56–62f 线性消散 | 冲击判例：扩散 out-cubic、消散线性 |\n| 重影 | ±12px 明暗双重影（brightness 0.45 / invert） | RGB 分离的灰阶降维；无重影只是抖不是 glitch |\n| 摘罩 | 62f 起条带、重影、filter 全部条件卸载直出裸 B | opacity 0 不算摘；滤镜残留毁真静止 |\n| 收尾 | 73f 真静止（≥40f） | R1 |\n\n## 已知坑\n- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，\n  首次实战须以真实素材回验\n- **条带不碎块**——后续同类手法一律做条带：横条各自完整，\n  绝不裂成方块/砖块/独立坠落物（三连否判例，见意图）\n- 高能转场，与 whip-pan/crash 系同片注意能量预算——\n  高能转场挤在一起互相稀释\n- 硬切藏在抖动衰减中（58f 切、62f 归位）——切点暴露在静止帧上\n  就失去了 glitch 的掩护\n\n## 参考实现\ndemos/transition/tear-streak-transitions/\n（GlitchDisplace.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/transition/tear-streak-transitions/GlitchDisplace.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/tear-streak-transitions/GlitchDisplace.tsx\n\nThe component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.\n",
  "flow": [
    {
      "step": "Read the recipe",
      "note": "Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points."
    },
    {
      "step": "Get the code",
      "tool": "git",
      "cmd": "git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install"
    },
    {
      "step": "Register + render",
      "tool": "remotion",
      "cmd": "npx remotion render <CompositionId> out.mp4   # component: demos/transition/tear-streak-transitions/GlitchDisplace.tsx"
    },
    {
      "step": "Or re-implement",
      "note": "Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing."
    }
  ],
  "files": [
    {
      "path": "demos/transition/tear-streak-transitions/GlitchDisplace.tsx",
      "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/tear-streak-transitions/GlitchDisplace.tsx"
    }
  ],
  "contract": "React/Remotion composition (TSX) from the open-source video-shotcraft library (Apache-2.0). It is not a browser-playable template: clone the repo, register the component in a Remotion project and render with `npx remotion render`. The recipe (prompt) describes timing, easing and parameters so you can also re-implement the shot in any engine.",
  "render": {
    "engine": "remotion",
    "frames": 136,
    "repo": "https://github.com/Vincentwei1021/video-shotcraft",
    "files": [
      "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/tear-streak-transitions/GlitchDisplace.tsx"
    ],
    "note": "Clone https://github.com/Vincentwei1021/video-shotcraft (npm install). The component lives under demos/{category}/{name}/ and imports shared fixtures from demos/_fixtures and helpers from assets/lib. Copy it (with those imports) into a Remotion project, register a <Composition> with the template's width/height/fps/duration in Root.tsx, then `npx remotion render <CompositionId> out.mp4`. SKILL.md in the repo documents the full Claude Code / Codex workflow. The prompt below is the shot recipe (timing, easing, parameter table, pitfalls) — enough to re-implement the shot in HTML/WAAPI or another engine if you prefer."
  },
  "source": "// ===== demos/transition/tear-streak-transitions/GlitchDisplace.tsx =====\n// glitch-displace｜噪声置换撕裂\n// FakeDashboard A 播到 45f，45–62f 撕裂转场：页面切 16 条水平条带\n// （外层 overflow hidden + 内层整页反向 translateY 对位），每条 translateX\n// 由 h(条号*31+f*7) 驱动 ±70px 抖动，幅度包络 0→峰值→0（起势 out-cubic、\n// 消散线性，冲击判例）。同时叠 2 份整页明暗错位重影（+12px 暗 / -12px 亮反相，\n// opacity ≤0.35，灰阶版代替 RGB 分离）。58f 抖动衰减中硬切 variant=\"B\"，\n// 再抖 4f 至 62f 归位。62f 起摘罩直出 B（条带/重影全部条件卸载），\n// 62–135f 真静止 73f ≥ 40f。帧确定：h() 伪随机，无 Math.random。\nimport React from 'react';\nimport { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';\nimport { FakeDashboard, G } from '../../_fixtures/Fixtures';\n\nconst STRIPS = 16;\nconst H = 1080;\nconst STRIP_H = H / STRIPS; // 67.5\nconst AMP = 70; // 峰值条带错位（spec 备选加码值，QA 要一眼看到撕裂）\n\n// 库内标准伪随机\nconst h = (n: number) => {\n  const s = Math.sin(n * 127.3) * 43758.5453;\n  return s - Math.floor(s);\n};\n\nexport const GlitchDisplace: React.FC = () => {\n  const frame = useCurrentFrame();\n\n  const tearing = frame >= 45 && frame < 62;\n  const variant: 'A' | 'B' = frame >= 58 ? 'B' : 'A';\n\n  if (!tearing) {\n    // 45f 前 A 静置；62f 起 B 摘罩真静止（无 transform / filter / 重影）\n    return (\n      <AbsoluteFill style={{ background: G.bg }}>\n        <FakeDashboard variant={variant} />\n      </AbsoluteFill>\n    );\n  }\n\n  // 幅度包络：45–48f out-cubic 冲起 → 平台 → 56–62f 线性消散（帧驱动，确定性）\n  const rise = interpolate(frame, [45, 48], [0, 1], {\n    easing: Easing.out(Easing.cubic),\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n  });\n  const decay = interpolate(frame, [56, 62], [1, 0], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n  });\n  const env = Math.min(rise, decay);\n\n  return (\n    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>\n      {/* 底垫一份完整页，防条带间横移露底色缝 */}\n      <AbsoluteFill>\n        <FakeDashboard variant={variant} />\n      </AbsoluteFill>\n\n      {/* 明暗错位重影（灰阶版 RGB 分离）：+12px 压暗 / -12px 反相提亮 */}\n      <AbsoluteFill\n        style={{\n          transform: 'translateX(12px)',\n          opacity: 0.35 * env,\n          filter: 'brightness(0.45)',\n        }}\n      >\n        <FakeDashboard variant={variant} />\n      </AbsoluteFill>\n      <AbsoluteFill\n        style={{\n          transform: 'translateX(-12px)',\n          opacity: 0.28 * env,\n          filter: 'invert(1)',\n        }}\n      >\n        <FakeDashboard variant={variant} />\n      </AbsoluteFill>\n\n      {/* 16 条水平条带：外层裁切，内层整页反向 translateY 对位 + 逐帧横向抖动 */}\n      {Array.from({ length: STRIPS }).map((_, i) => {\n        const dx = (h(i * 31 + frame * 7) * 2 - 1) * AMP * env;\n        return (\n          <div\n            key={i}\n            style={{\n              position: 'absolute',\n              top: i * STRIP_H,\n              left: 0,\n              width: 1920,\n              height: STRIP_H,\n              overflow: 'hidden',\n            }}\n          >\n            <div\n              style={{\n                width: 1920,\n                height: H,\n                transform: `translate(${dx.toFixed(2)}px, ${-i * STRIP_H}px)`,\n              }}\n            >\n              <FakeDashboard variant={variant} />\n            </div>\n          </div>\n        );\n      })}\n    </AbsoluteFill>\n  );\n};\n\n\n"
}