Random block reveal
Clip B pops in through a grid of random square tiles until the frame is filled. Pixel-style, game, or digital-feeling swaps.
Preview unavailable
Use this transition between my clips: "Random block reveal" from the 24fps video editor library.
Preset JSON: https://24fps.dev/video-editor/transitions/checker-blocks-cc2/preset.json (pass its "preset" to the engine).
Engine (MIT, no dependencies, ES module): https://24fps.dev/editor/engine.js. Download the engine next to your page (curl -O) rather than importing cross-origin, then import { mount } from "./engine.js" in a <script type="module"> served over http.
Wiring: root = a position:relative box at the video's size. media = { a, b }: two wrappers holding clip A and clip B, both filling the root. Clip A plays first; the cut happens at preset.at (1.5s) over preset.dur (0.7s), so start clip B at preset.at. Then const fx = mount(root, { kind: "transition", preset, media }) and call fx.render(seconds) every frame. It is seek-safe: drive it from the GSAP timeline in HyperFrames or call render(frame / fps) in Remotion. Before capturing frames, await (fx.ready ?? document.fonts.ready).
Sound design: click at 1.5s on tiles flipping (quick digital ticks). In HyperFrames, fetch each with media-use (e.g. npx hyperframes media-use resolve --type sfx --intent "click" --project .; media-use needs `heygen auth login`, without it use `--local-only`, check with `--doctor`); elsewhere use royalty-free SFX or ones I give you.
Field reference: https://24fps.dev/video-editor/llms.txt. Keep sizes as fractions of the frame height so it works at any resolution. Credit: 24fps.dev/video-editor- Sound design
- click at 1.5s on tiles flipping (quick digital ticks)
- Same idea
- Also called: Blocks, Bathroom Tile, 3D Grid Shuffle, Grid LED Blink, Grid Pieces, Hexa Hues, Grid Flip Round, Checkered Flap, Random Facets, Alter Tile Flip, Tile Wave Flip, Grid Shards, Broken Tiles, Block Fade, Grid Structure, Flip Grid, Polygon Break, Kinetic Tiles, Tile Expand, Mirror Mosaic
- Technique
- Random tile reveal
- Footage
- Man talking to camera, Pexels