From d3d286a1a53ed52d78ab3994195e83d2188ec163 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Mon, 3 Aug 2026 09:32:12 +0200
Subject: [PATCH] feat(registry): add beat-freeze-cut

Beat-driven speed ramp, freeze-frame hit, and hard cut for music-led
promos and montages. Contributed as #2957; applied here as content so the
whole catalog set lands together.

Verified by rendering: 6s, clean, deterministic (the one Math.random hit
is a comment above a fixed pattern array). Opaque root, so no demo.html
is needed for its catalog preview.

Co-authored-by: akiyoshisan1218 <akiyoshisan1218@users.noreply.github.com>
---
 docs/catalog/blocks/beat-freeze-cut.mdx       |  44 +
 docs/docs.json                                |   1 +
 docs/public/catalog-index.json                |  14 +
 .../beat-freeze-cut/beat-freeze-cut.html      | 879 ++++++++++++++++++
 .../blocks/beat-freeze-cut/registry-item.json |  34 +
 registry/registry.json                        |   4 +
 6 files changed, 976 insertions(+)
 create mode 100644 docs/catalog/blocks/beat-freeze-cut.mdx
 create mode 100644 registry/blocks/beat-freeze-cut/beat-freeze-cut.html
 create mode 100644 registry/blocks/beat-freeze-cut/registry-item.json

diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
new file mode 100644
index 000000000..7a7b8e97b
--- /dev/null
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -0,0 +1,44 @@
+---
+title: "Beat Freeze Cut"
+description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
+---
+
+# Beat Freeze Cut
+
+A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
+
+`transition` `music` `beat-driven` `freeze-frame`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add beat-freeze-cut
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="beat-freeze-cut" data-composition-src="compositions/beat-freeze-cut.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index 184a87c3f..98d71a8e9 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -303,6 +303,7 @@
           {
             "group": "CSS Transitions",
             "pages": [
+              "catalog/blocks/beat-freeze-cut",
               "catalog/blocks/hw-scribble-transition",
               "catalog/blocks/mk-clone-wall-transition",
               "catalog/blocks/organic-light-leak-overlay",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index fbe2a99f5..4789619fb 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -27,6 +27,20 @@
     "href": "/catalog/blocks/apple-money-count",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
   },
+  {
+    "name": "beat-freeze-cut",
+    "type": "block",
+    "title": "Beat Freeze Cut",
+    "description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
+    "tags": [
+      "transition",
+      "music",
+      "beat-driven",
+      "freeze-frame"
+    ],
+    "href": "/catalog/blocks/beat-freeze-cut",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png"
+  },
   {
     "name": "blue-sweater-intro-video",
     "type": "block",
diff --git a/registry/blocks/beat-freeze-cut/beat-freeze-cut.html b/registry/blocks/beat-freeze-cut/beat-freeze-cut.html
new file mode 100644
index 000000000..5e13b6bad
--- /dev/null
+++ b/registry/blocks/beat-freeze-cut/beat-freeze-cut.html
@@ -0,0 +1,879 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Freeze Cut</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0b0d10;
+      }
+
+      /*
+        EDIT / STUDIO PARAMS
+        ────────────────────
+        Studio color params (CSS custom properties on the root):
+          --bg-color       default #0B0D10
+          --accent-color   default #00E5C7
+
+        Numeric / string params (beat times, labels, intensity) are NOT in the
+        formal registry params schema today (only color keys are used by
+        existing blocks). Edit the CONFIG object in the script below instead.
+      */
+
+      #bfc-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        --bg-color: #0b0d10;
+        --accent-color: #00e5c7;
+        --bfc-ink: #f4f6f8;
+        --bfc-muted: #a0a8b0;
+        --bfc-panel: #14181f;
+        --bfc-panel-2: #1a2029;
+        --bfc-line: rgba(255, 255, 255, 0.08);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 229, 199, 0.07) 0%, transparent 55%),
+          radial-gradient(
+            ellipse 50% 40% at 80% 80%,
+            rgba(255, 255, 255, 0.03) 0%,
+            transparent 50%
+          ),
+          var(--bg-color);
+      }
+
+      #bfc-grid {
+        position: absolute;
+        inset: 0;
+        opacity: 0.22;
+        background-image:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+        background-size: 80px 80px;
+        mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
+        pointer-events: none;
+      }
+
+      #bfc-stage {
+        position: absolute;
+        inset: 0;
+        transform-origin: 50% 48%;
+        will-change: transform, filter;
+      }
+
+      #bfc-shot-a,
+      #bfc-shot-b {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      #bfc-shot-b {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      /* ── Shot A: single product card hero ── */
+      #bfc-a-crop {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card {
+        position: relative;
+        width: 680px;
+        height: 720px;
+        border-radius: 36px;
+        background:
+          linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
+          linear-gradient(180deg, var(--bfc-panel-2) 0%, var(--bfc-panel) 100%);
+        border: 1px solid var(--bfc-line);
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.55),
+          0 0 0 1px rgba(0, 229, 199, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card-glow {
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        width: 420px;
+        height: 420px;
+        margin-left: -210px;
+        margin-top: -210px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 229, 199, 0.28) 0%, transparent 68%);
+        opacity: 0.85;
+        pointer-events: none;
+      }
+
+      #bfc-a-wave {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        top: 120px;
+        height: 220px;
+      }
+
+      #bfc-a-wave svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      #bfc-a-wave-path {
+        fill: none;
+        stroke: var(--accent-color);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: 0.95;
+      }
+
+      #bfc-a-wave-fill {
+        fill: var(--accent-color);
+        opacity: 0.12;
+      }
+
+      #bfc-a-bars {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        bottom: 160px;
+        height: 96px;
+        display: flex;
+        align-items: flex-end;
+        gap: 10px;
+      }
+
+      .bfc-bar {
+        flex: 1;
+        border-radius: 6px 6px 2px 2px;
+        background: linear-gradient(180deg, var(--accent-color) 0%, rgba(0, 229, 199, 0.25) 100%);
+        transform-origin: 50% 100%;
+        height: 40%;
+      }
+
+      #bfc-a-meta {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        bottom: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #bfc-a-kicker {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      #bfc-a-pill {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 8px 16px;
+        border-radius: 999px;
+      }
+
+      /* ── Shot B: split layout, higher info density ── */
+      #bfc-b-layout {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 1.05fr 0.95fr;
+        gap: 48px;
+        padding: 100px 110px;
+        align-items: center;
+      }
+
+      #bfc-b-left {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        transform-origin: 0% 50%;
+      }
+
+      #bfc-b-eyebrow {
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: var(--accent-color);
+      }
+
+      #bfc-b-title {
+        font-size: 128px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-b-sub {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--bfc-muted);
+        max-width: 520px;
+        line-height: 1.35;
+      }
+
+      #bfc-b-right {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+
+      .bfc-b-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 28px 32px;
+        border-radius: 20px;
+        background: linear-gradient(135deg, var(--bfc-panel-2), var(--bfc-panel));
+        border: 1px solid var(--bfc-line);
+        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+      }
+
+      .bfc-b-card-label {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      .bfc-b-card-value {
+        font-size: 42px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: var(--bfc-ink);
+      }
+
+      .bfc-b-card-value.accent {
+        color: var(--accent-color);
+      }
+
+      #bfc-b-accent-bar {
+        width: 120px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--accent-color);
+        opacity: 0.9;
+      }
+
+      /* ── Intro / transient typography ── */
+      #bfc-intro {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 72px;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 20;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-intro-label {
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+        padding: 10px 18px;
+        border: 1px solid var(--bfc-line);
+        border-radius: 999px;
+        background: rgba(11, 13, 16, 0.55);
+        backdrop-filter: blur(8px);
+      }
+
+      #bfc-hit-type {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 30;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-hit-type-text {
+        font-size: 160px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+        text-shadow:
+          0 0 40px rgba(0, 229, 199, 0.35),
+          0 8px 40px rgba(0, 0, 0, 0.55);
+        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
+        paint-order: stroke fill;
+      }
+
+      /* ── Freeze frame treatment ── */
+      #bfc-freeze {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 25;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-freeze-outline {
+        position: absolute;
+        inset: 48px;
+        border: 3px solid var(--accent-color);
+        border-radius: 8px;
+        box-shadow:
+          0 0 0 1px rgba(0, 229, 199, 0.25),
+          inset 0 0 0 1px rgba(0, 229, 199, 0.15),
+          0 0 48px rgba(0, 229, 199, 0.2);
+        opacity: 0;
+      }
+
+      #bfc-freeze-flash {
+        position: absolute;
+        inset: 0;
+        background: #ffffff;
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-contour {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, transparent 0%, rgba(0, 229, 199, 0.08) 48%, transparent 52%),
+          radial-gradient(ellipse 40% 55% at 50% 48%, transparent 40%, rgba(0, 229, 199, 0.18) 100%);
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-badge {
+        position: absolute;
+        top: 80px;
+        right: 96px;
+        font-size: 16px;
+        font-weight: 800;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 10px 18px;
+        border-radius: 6px;
+        opacity: 0;
+      }
+
+      /* ── Hard-cut connector (directional stretch / blur) ── */
+      #bfc-cut {
+        position: absolute;
+        inset: -8% -20%;
+        pointer-events: none;
+        z-index: 40;
+        opacity: 0;
+        visibility: hidden;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(0, 229, 199, 0.12) 35%,
+          rgba(255, 255, 255, 0.55) 50%,
+          rgba(0, 229, 199, 0.12) 65%,
+          transparent 100%
+        );
+        filter: blur(18px);
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 15;
+        background: radial-gradient(
+          ellipse 75% 70% at 50% 50%,
+          transparent 45%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+        opacity: 0.85;
+      }
+
+      #bfc-driver {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bfc-root"
+      data-composition-id="beat-freeze-cut"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bfc-bg" aria-hidden="true"></div>
+      <div id="bfc-grid" aria-hidden="true"></div>
+
+      <div id="bfc-stage">
+        <!-- Shot A -->
+        <div id="bfc-shot-a">
+          <div id="bfc-a-crop" data-layout-allow-overflow>
+            <div id="bfc-a-card" data-layout-allow-overflow>
+              <div id="bfc-a-card-glow" aria-hidden="true"></div>
+              <div id="bfc-a-wave" aria-hidden="true">
+                <svg viewBox="0 0 592 220" preserveAspectRatio="none">
+                  <path
+                    id="bfc-a-wave-fill"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80 L592,220 L0,220 Z"
+                  />
+                  <path
+                    id="bfc-a-wave-path"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80"
+                  />
+                </svg>
+              </div>
+              <div id="bfc-a-bars" aria-hidden="true">
+                <div class="bfc-bar" id="bfc-bar-0" style="height: 34%"></div>
+                <div class="bfc-bar" id="bfc-bar-1" style="height: 58%"></div>
+                <div class="bfc-bar" id="bfc-bar-2" style="height: 42%"></div>
+                <div class="bfc-bar" id="bfc-bar-3" style="height: 78%"></div>
+                <div class="bfc-bar" id="bfc-bar-4" style="height: 52%"></div>
+                <div class="bfc-bar" id="bfc-bar-5" style="height: 88%"></div>
+                <div class="bfc-bar" id="bfc-bar-6" style="height: 46%"></div>
+                <div class="bfc-bar" id="bfc-bar-7" style="height: 64%"></div>
+                <div class="bfc-bar" id="bfc-bar-8" style="height: 36%"></div>
+                <div class="bfc-bar" id="bfc-bar-9" style="height: 72%"></div>
+                <div class="bfc-bar" id="bfc-bar-10" style="height: 48%"></div>
+                <div class="bfc-bar" id="bfc-bar-11" style="height: 92%"></div>
+              </div>
+              <div id="bfc-a-meta">
+                <span id="bfc-a-kicker">MUSIC PROMO</span>
+                <span id="bfc-a-pill">LIVE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Shot B -->
+        <div id="bfc-shot-b">
+          <div id="bfc-b-layout">
+            <div id="bfc-b-left">
+              <div id="bfc-b-eyebrow">Next shot</div>
+              <div id="bfc-b-title">HARD<br />CUT</div>
+              <div id="bfc-b-accent-bar" aria-hidden="true"></div>
+              <div id="bfc-b-sub">
+                Beat-locked freeze, then cut. Built for music-led promos and montages.
+              </div>
+            </div>
+            <div id="bfc-b-right">
+              <div class="bfc-b-card" id="bfc-b-card-0">
+                <span class="bfc-b-card-label">Ramp</span>
+                <span class="bfc-b-card-value accent">1.35→2.2</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-1">
+                <span class="bfc-b-card-label">Freeze</span>
+                <span class="bfc-b-card-value">0.8s</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-2">
+                <span class="bfc-b-card-label">Cut</span>
+                <span class="bfc-b-card-value accent">3.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="bfc-vignette" aria-hidden="true"></div>
+
+      <div id="bfc-intro" aria-hidden="true">
+        <span id="bfc-intro-label">ON THE BEAT</span>
+      </div>
+
+      <div id="bfc-hit-type" aria-hidden="true">
+        <span id="bfc-hit-type-text">DROP</span>
+      </div>
+
+      <div id="bfc-freeze" aria-hidden="true">
+        <div id="bfc-freeze-flash"></div>
+        <div id="bfc-freeze-contour"></div>
+        <div id="bfc-freeze-outline"></div>
+        <div id="bfc-freeze-badge">FREEZE</div>
+      </div>
+
+      <div id="bfc-cut" aria-hidden="true"></div>
+
+      <div id="bfc-driver" class="clip" data-start="0" data-duration="6" data-track-index="0"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ── EDIT ME (not Studio params — see HTML comment) ──────────────
+        var CONFIG = {
+          primaryLabel: "DROP",
+          secondaryLabel: "ON THE BEAT",
+          beat1: 0.7,
+          beat2: 2.2,
+          freezeTime: 2.2,
+          intensity: 1.0,
+        };
+        // ────────────────────────────────────────────────────────────────
+
+        var DURATION = 6;
+        var intensity = Math.max(0.6, Math.min(1.4, Number(CONFIG.intensity) || 1));
+        var beat1 = Number(CONFIG.beat1) || 0.7;
+        var beat2 = Number(CONFIG.beat2) || 2.2;
+        var freezeAt = Number(CONFIG.freezeTime) || beat2;
+        var cutAt = 3.0;
+        var beat3 = 4.7;
+        var holdAt = 5.2;
+
+        var root = document.getElementById("bfc-root");
+        var stage = document.getElementById("bfc-stage");
+        var shotA = document.getElementById("bfc-shot-a");
+        var shotB = document.getElementById("bfc-shot-b");
+        var aCrop = document.getElementById("bfc-a-crop");
+        var aCard = document.getElementById("bfc-a-card");
+        var intro = document.getElementById("bfc-intro");
+        var introLabel = document.getElementById("bfc-intro-label");
+        var hitType = document.getElementById("bfc-hit-type");
+        var hitText = document.getElementById("bfc-hit-type-text");
+        var freeze = document.getElementById("bfc-freeze");
+        var freezeOutline = document.getElementById("bfc-freeze-outline");
+        var freezeFlash = document.getElementById("bfc-freeze-flash");
+        var freezeContour = document.getElementById("bfc-freeze-contour");
+        var freezeBadge = document.getElementById("bfc-freeze-badge");
+        var cutFx = document.getElementById("bfc-cut");
+        var bLeft = document.getElementById("bfc-b-left");
+        var bCards = [
+          document.getElementById("bfc-b-card-0"),
+          document.getElementById("bfc-b-card-1"),
+          document.getElementById("bfc-b-card-2"),
+        ];
+        var bars = [];
+        for (var bi = 0; bi < 12; bi++) {
+          bars.push(document.getElementById("bfc-bar-" + bi));
+        }
+
+        // Apply editable labels
+        if (hitText) hitText.textContent = CONFIG.primaryLabel || "DROP";
+        if (introLabel) introLabel.textContent = CONFIG.secondaryLabel || "ON THE BEAT";
+
+        // Accent color from CSS var → freeze/glow that use hardcoded rgba fallbacks
+        // stay coherent because stroke/fill already use var(--accent-color).
+
+        var tl = gsap.timeline({ paused: true });
+
+        // Initial states (no CSS transform conflicts on animated props)
+        gsap.set(stage, { scale: 1, x: 0, y: 0, filter: "blur(0px) brightness(1)" });
+        gsap.set(aCrop, { scale: 1, x: 0, y: 0 });
+        // Card visible at t=0 so catalog snapshots are never a black frame
+        gsap.set(aCard, { scale: 0.9, y: 20, opacity: 1 });
+        gsap.set(shotA, { opacity: 1, visibility: "visible" });
+        gsap.set(shotB, { opacity: 0, visibility: "hidden" });
+        gsap.set(intro, { opacity: 0, visibility: "hidden", y: -12 });
+        gsap.set(hitType, { opacity: 0, visibility: "hidden", scale: 1.15 });
+        gsap.set(freeze, { opacity: 0, visibility: "hidden" });
+        gsap.set([freezeOutline, freezeFlash, freezeContour, freezeBadge], { opacity: 0 });
+        gsap.set(cutFx, { opacity: 0, visibility: "hidden", scaleX: 0.4, x: -200 });
+        gsap.set(bLeft, { opacity: 0, x: -48 });
+        gsap.set(bCards, { opacity: 0, x: 40 });
+        gsap.set(bars, { scaleY: 0.55 });
+
+        // Full duration anchor (seek-safe length)
+        tl.to({}, { duration: DURATION, ease: "none" }, 0);
+
+        // ── 0.00–0.70: intro push-in + secondary type ──
+        tl.to(aCard, { scale: 1, y: 0, duration: 0.55, ease: "power3.out" }, 0);
+        tl.to(stage, { scale: 1 + 0.04 * intensity, duration: 0.7, ease: "power1.out" }, 0);
+        tl.to(bars, { scaleY: 1, duration: 0.5, ease: "power2.out", stagger: 0.02 }, 0.12);
+        tl.set(intro, { visibility: "visible" }, 0.12);
+        tl.to(intro, { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" }, 0.12);
+        tl.to(intro, { opacity: 0, y: -8, duration: 0.18, ease: "power2.in" }, 0.52);
+        tl.set(intro, { visibility: "hidden", opacity: 0 }, 0.7);
+
+        // ── 0.70–1.35: beat 1 — hard reframe ──
+        tl.to(
+          aCrop,
+          {
+            scale: 1 + 0.18 * intensity,
+            x: -80 * intensity,
+            y: 24 * intensity,
+            duration: 0.22,
+            ease: "power4.out",
+          },
+          beat1,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * intensity > 1.2 ? 1.2 : 1 + 0.08 * intensity,
+            duration: 0.28,
+            ease: "expo.out",
+          },
+          beat1,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: function (i) {
+              // Deterministic bar pattern (no Math.random)
+              var pattern = [0.55, 1.15, 0.7, 1.35, 0.9, 1.4, 0.65, 1.1, 0.5, 1.25, 0.8, 1.45];
+              return pattern[i % pattern.length];
+            },
+            duration: 0.18,
+            ease: "power3.out",
+            stagger: 0.01,
+          },
+          beat1,
+        );
+
+        // ── 1.35–2.20: speed ramp into freeze ──
+        var rampStart = 1.35;
+        var rampDur = Math.max(0.2, freezeAt - rampStart);
+        tl.to(
+          aCrop,
+          {
+            scale: 1.28 * (0.9 + 0.1 * intensity),
+            x: 28 * intensity,
+            y: -12 * intensity,
+            duration: rampDur,
+            ease: "power3.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.08)",
+            duration: rampDur,
+            ease: "power2.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: 1.55,
+            duration: rampDur * 0.85,
+            ease: "power2.in",
+            stagger: { each: 0.012, from: "center" },
+          },
+          rampStart,
+        );
+
+        // ── 2.20–3.00: freeze hit (snap-on for seek/snapshot stability) ──
+        tl.set(freeze, { visibility: "visible", opacity: 1 }, freezeAt);
+        tl.set(freezeOutline, { opacity: 1 }, freezeAt);
+        tl.set(freezeContour, { opacity: 0.85 }, freezeAt);
+        tl.set(freezeBadge, { opacity: 1 }, freezeAt);
+        tl.set(hitType, { visibility: "visible", opacity: 1, scale: 1 }, freezeAt);
+        // Hold crop/stage where ramp ended
+        tl.to(aCrop, { duration: 0.01, ease: "none" }, freezeAt);
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.15)",
+            duration: 0.05,
+            ease: "power4.out",
+          },
+          freezeAt,
+        );
+        // Single exposure flash (not a strobe sequence)
+        tl.fromTo(
+          freezeFlash,
+          { opacity: 0.55 * intensity },
+          { opacity: 0, duration: 0.28, ease: "power2.out" },
+          freezeAt,
+        );
+        tl.to(
+          hitType,
+          { opacity: 0, scale: 0.96, duration: 0.2, ease: "power2.in" },
+          freezeAt + 0.55,
+        );
+        tl.set(hitType, { visibility: "hidden", opacity: 0 }, freezeAt + 0.78);
+        // Soft settle of freeze dressing before cut
+        tl.to(
+          [freezeOutline, freezeContour, freezeBadge],
+          { opacity: 0.75, duration: 0.35, ease: "sine.out" },
+          freezeAt + 0.35,
+        );
+
+        // ── 3.00–3.35: hard cut connector ──
+        tl.set(cutFx, { visibility: "visible" }, cutAt);
+        tl.fromTo(
+          cutFx,
+          { opacity: 0, scaleX: 0.35, x: -280 },
+          {
+            opacity: 0.95,
+            scaleX: 1.6,
+            x: 120,
+            duration: 0.12,
+            ease: "power4.in",
+          },
+          cutAt,
+        );
+        tl.to(
+          stage,
+          {
+            filter: "blur(14px) brightness(1.35)",
+            scaleX: 1.35,
+            scaleY: 0.92,
+            duration: 0.12,
+            ease: "power3.in",
+          },
+          cutAt,
+        );
+        // Switch shots mid-cut — shot B content lands immediately (no black gap)
+        var switchAt = cutAt + 0.14;
+        tl.set(shotA, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(shotB, { opacity: 1, visibility: "visible" }, switchAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(
+          [freeze, freezeOutline, freezeFlash, freezeContour, freezeBadge],
+          { opacity: 0, visibility: "hidden" },
+          switchAt,
+        );
+        tl.set(freeze, { visibility: "hidden" }, switchAt);
+        // Shot B content visible on switch (offset settles after)
+        tl.set(bLeft, { opacity: 1, x: -24 }, switchAt);
+        tl.set(bCards, { opacity: 1, x: 24 }, switchAt);
+        tl.to(
+          stage,
+          {
+            filter: "blur(0px) brightness(1)",
+            scale: 1,
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0,
+            duration: 0.18,
+            ease: "power3.out",
+          },
+          switchAt,
+        );
+        tl.to(cutFx, { opacity: 0, x: 360, duration: 0.16, ease: "power2.out" }, cutAt + 0.16);
+        tl.set(cutFx, { visibility: "hidden", opacity: 0 }, cutAt + 0.34);
+
+        // ── after switch: shot B settle (no scale overlap with recover) ──
+        tl.to(bLeft, { x: 0, duration: 0.4, ease: "power3.out" }, switchAt);
+        tl.to(
+          bCards,
+          {
+            x: 0,
+            duration: 0.38,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          switchAt + 0.04,
+        );
+        tl.to(stage, { scale: 1.02, duration: 1.17, ease: "sine.out" }, switchAt + 0.18);
+
+        // ── 4.70–5.20: final beat punch-in ──
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * (0.9 + 0.1 * intensity),
+            duration: 0.14,
+            ease: "power4.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1.04,
+            duration: 0.12,
+            ease: "power3.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1,
+            duration: 0.22,
+            ease: "power2.out",
+          },
+          beat3 + 0.14,
+        );
+        // Micro freeze feel: brief hold of scale
+        tl.to(
+          stage,
+          { scale: 1.08 * (0.9 + 0.1 * intensity), duration: 0.2, ease: "none" },
+          beat3 + 0.14,
+        );
+
+        // ── 5.20–6.00: hold readable end card (≥0.8s) ──
+        tl.to(stage, { scale: 1.03, duration: 0.35, ease: "power2.out" }, holdAt);
+        // Ensure transient layers stay dead through end
+        tl.set(intro, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(freeze, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(cutFx, { opacity: 0, visibility: "hidden" }, holdAt);
+
+        window.__timelines["beat-freeze-cut"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/beat-freeze-cut/registry-item.json b/registry/blocks/beat-freeze-cut/registry-item.json
new file mode 100644
index 000000000..5a4b6e09d
--- /dev/null
+++ b/registry/blocks/beat-freeze-cut/registry-item.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "beat-freeze-cut",
+  "type": "hyperframes:block",
+  "title": "Beat Freeze Cut",
+  "description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
+  "tags": ["transition", "music", "beat-driven", "freeze-frame"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "beat-freeze-cut.html",
+      "target": "compositions/beat-freeze-cut.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--bg-color",
+      "label": "Background",
+      "type": "color",
+      "default": "#0B0D10"
+    },
+    {
+      "key": "--accent-color",
+      "label": "Accent",
+      "type": "color",
+      "default": "#00E5C7"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index e2282ee53..bff47f294 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -702,6 +702,10 @@
     {
       "name": "hw-underline",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "beat-freeze-cut",
+      "type": "hyperframes:block"
     }
   ]
 }