Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

This reverts commit 3b53bfd2f7.

docs/catalog/components/grid-pixelate-wipe.mdx

@@ -3,108 +3,23 @@ title: "Grid Pixelate Wipe"
 description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
 ---
 
-import { InstallCommand } from "/snippets/install-command.jsx";
-
-<iframe src="/public/catalog/preview/components/grid-pixelate-wipe.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Grid Pixelate Wipe preview" />
+<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/components/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
 
 ## Install
 
-<InstallCommand command="npx hyperframes add grid-pixelate-wipe" />
+```bash Terminal
+npx hyperframes add grid-pixelate-wipe
+```
 
 That writes one file: `compositions/components/grid-pixelate-wipe.html`.
 
-## Source
+## Paste it into your composition
 
-<Accordion title={`grid-pixelate-wipe.html`}>
+Open `compositions/components/grid-pixelate-wipe.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
 
-```html
-<!--
-  Grid Pixelate Wipe — transition effect.
-
-  Usage: place this overlay in your composition. To transition between
-  scenes, animate .grid-cell scale from 0→1 (cover) then 1→0 (reveal)
-  using GSAP stagger with a "from" pattern.
-
-  Customize:
-  - COLS / ROWS: grid density (default 16×9), edit in the script below
-  - --grid-color: cell fill color (default black)
-  - Stagger "from": "center" for radial, "edges" for inward, "random" for scatter
--->
-
-<div
-  id="grid-pixelate-overlay"
-  style="
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 999;
-    display: grid;
-  "
-></div>
-
-<style>
-  #grid-pixelate-overlay {
-    --grid-color: black;
-  }
-
-  #grid-pixelate-overlay .grid-cell {
-    background: var(--grid-color);
-    transform: scale(0);
-    transform-origin: center center;
-  }
-</style>
-
-<script>
-  (function () {
-    const COLS = 16;
-    const ROWS = 9;
-    const overlay = document.getElementById("grid-pixelate-overlay");
-    if (!overlay) return;
-
-    overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
-    overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
-
-    for (let i = 0; i < COLS * ROWS; i++) {
-      const cell = document.createElement("div");
-      cell.className = "grid-cell";
-      overlay.appendChild(cell);
-    }
-  })();
-</script>
-
-<!--
-  Timeline integration example:
-
-  // Cover screen with grid (transition out of scene A)
-  tl.to("#grid-pixelate-overlay .grid-cell", {
-    scale: 1,
-    duration: 0.6,
-    stagger: { amount: 0.6, from: "center" },
-    ease: "power2.inOut",
-  }, 3.0);
-
-  // Swap scene content at midpoint
-  tl.set("#scene-a", { opacity: 0 }, 3.6);
-  tl.set("#scene-b", { opacity: 1 }, 3.6);
-
-  // Reveal scene B by removing grid
-  tl.to("#grid-pixelate-overlay .grid-cell", {
-    scale: 0,
-    duration: 0.6,
-    stagger: { amount: 0.6, from: "edges" },
-    ease: "power2.inOut",
-  }, 3.6);
--->
-```
-
-</Accordion>
-
-## Usage
-
-Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
 
 {/* hf:generated-footer */}