hyperframes Documentation

npx skills add heygen-com/hyperframes --full-depth

bun run package:codex-plugin

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

<video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Then, once per machine
git lfs install

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

<section id="headline" class="clip" data-start="0" data-duration="3" data-track-index="1">
  Launch day
</section>

<video
  id="intro"
  data-start="0"
  data-duration="4"
  data-track-index="0"
  src="./intro.mp4"
  muted
  playsinline
></video>
<section id="result" class="clip" data-start="intro - 0.5" data-duration="3" data-track-index="1">
  The result
</section>

data-start="intro" data-start="intro + 0.5" data-start="intro - 0.5"

flowchart TD
    F["Frame 90"] --> T
    L["Locked before frame 0:fps, width, height, variables"] --> T
    T["t = 90 / fpsinteger math, never a clock"] --> S["Every animation seekedto exactly t"]
    S --> P["The same pixels, every run"]
    S -.-> X["Breaks if a frame reads:Date.now, unseeded Math.random,or a mid-render fetch"]

npx hyperframes render --docker --output output.mp4

sequenceDiagram
    participant R as Renderer
    participant A as Frame adapter
    participant T as Your timeline
    R->>A: getDurationFrames()
    A-->>R: 120
    loop every frame, in any order
        R->>A: seekFrame(90)
        A->>T: jump to 3.0s and settle
        T-->>A: state at 3.0s
        A-->>R: ready
        R->>R: capture the pixels
    end
    R->>A: destroy()

import type { FrameAdapter, FrameAdapterContext } from "@hyperframes/core";

type FrameAdapter = {
  id: string;
  init?: (context: FrameAdapterContext) => Promise<void> | void;
  getDurationFrames: () => number;
  seekFrame: (frame: number) => Promise<void> | void;
  destroy?: () => Promise<void> | void;
};

import { createGSAPFrameAdapter } from "@hyperframes/core";

const adapter = createGSAPFrameAdapter({
  id: "intro",
  fps: 30,
  timeline,
});

await adapter.init?.({
  compositionId: "intro",
  fps: 30,
  width: 1920,
  height: 1080,
});

await adapter.seekFrame(90); // three seconds

Brick
BRICK


Rock
ROCK


Ground 103
GROUND


Wood
WOOD


Metal
METAL


Lava
LAVA

/* Detailed source-code truncated for AI context efficiency. */

Use the Texture Mask Text catalog component.

1. From the project root, run:
   npx hyperframes add texture-mask-text
2. That command creates this installed snippet:
   compositions/components/texture-mask-text/texture-mask-text.html
3. Open that file and paste the real <style> block
   near the bottom into the composition once. That CSS defines
   hf-texture-text and every hf-texture-* class.
4. Apply this class to the target text:
   class="hf-texture-text hf-texture-brick"
5. For another material, copy one hf-texture-* class
   from the Texture Examples cards.
6. This is the proper way to apply drop shadow
   to textured text: wrap the text and put
   filter on the wrapper, not on the text.
   Use this markup:
   
     TEXT

Animated mask position
<code className="hf-texture-animate-class">hf-texture-text hf-texture-lava</code>


MOTION

MOTION

.animated-texture {
  --mask-size: 180% 180%;
  --mask-position: 0% 50%;
}

const tl = gsap.timeline({ paused: true });
tl.to(".animated-texture", {
  "--mask-position": "100% 50%",
  duration: 1.2,
  ease: "sine.inOut",
  yoyo: true,
  repeat: 1,
}, 0);
window.__timelines["my-composition"] = tl;

<h3 className="hf-texture-example-title">Masonry</h3>

  
    Brick<code className="hf-texture-example-class">hf-texture-brick</code>
    BRICK
    Use `hf-texture-text hf-texture-brick`
  
  
    Bricks 104<code className="hf-texture-example-class">hf-texture-bricks-104</code>
    BRICK
    Use `hf-texture-text hf-texture-bricks-104`
  
  
    Bricks 102<code className="hf-texture-example-class">hf-texture-bricks-102</code>
    BRICK
    Use `hf-texture-text hf-texture-bricks-102`
  
  
    Bricks 101<code className="hf-texture-example-class">hf-texture-bricks-101</code>
    BRICK
    Use `hf-texture-text hf-texture-bricks-101`
  
  
    Bricks 075 A<code className="hf-texture-example-class">hf-texture-bricks-075-a</code>
    BRICK
    Use `hf-texture-text hf-texture-bricks-075-a`
  
  
    Concrete<code className="hf-texture-example-class">hf-texture-concrete</code>
    CONCRETE
    Use `hf-texture-text hf-texture-concrete`
  
  
    Concrete 034<code className="hf-texture-example-class">hf-texture-concrete-034</code>
    CONCRETE
    Use `hf-texture-text hf-texture-concrete-034`
  
  
    Concrete 047 A<code className="hf-texture-example-class">hf-texture-concrete-047-a</code>
    CONCRETE
    Use `hf-texture-text hf-texture-concrete-047-a`
  
  
    Concrete 046<code className="hf-texture-example-class">hf-texture-concrete-046</code>
    CONCRETE
    Use `hf-texture-text hf-texture-concrete-046`
  
  
    Concrete 042 A<code className="hf-texture-example-class">hf-texture-concrete-042-a</code>
    CONCRETE
    Use `hf-texture-text hf-texture-concrete-042-a`
  
  
    Plaster 001<code className="hf-texture-example-class">hf-texture-plaster-001</code>
    PLASTER
    Use `hf-texture-text hf-texture-plaster-001`
  
  
    Painted Plaster 017<code className="hf-texture-example-class">hf-texture-painted-plaster-017</code>
    PLASTER
    Use `hf-texture-text hf-texture-painted-plaster-017`
  



<h3 className="hf-texture-example-title">Stone</h3>

  
    Rock<code className="hf-texture-example-class">hf-texture-rock</code>
    ROCK
    Use `hf-texture-text hf-texture-rock`
  
  
    Rock 063<code className="hf-texture-example-class">hf-texture-rock-063</code>
    ROCK
    Use `hf-texture-text hf-texture-rock-063`
  
  
    Rock 058<code className="hf-texture-example-class">hf-texture-rock-058</code>
    ROCK
    Use `hf-texture-text hf-texture-rock-058`
  
  
    Onyx<code className="hf-texture-example-class">hf-texture-onyx</code>
    ONYX
    Use `hf-texture-text hf-texture-onyx`
  
  
    Marble 012<code className="hf-texture-example-class">hf-texture-marble-012</code>
    MARBLE
    Use `hf-texture-text hf-texture-marble-012`
  
  
    Marble 016<code className="hf-texture-example-class">hf-texture-marble-016</code>
    MARBLE
    Use `hf-texture-text hf-texture-marble-016`
  
  
    Travertine 009<code className="hf-texture-example-class">hf-texture-travertine-009</code>
    STONE
    Use `hf-texture-text hf-texture-travertine-009`
  
  
    Paving Stones 150<code className="hf-texture-example-class">hf-texture-paving-stones-150</code>
    STONE
    Use `hf-texture-text hf-texture-paving-stones-150`
  
  
    Paving Stones 138<code className="hf-texture-example-class">hf-texture-paving-stones-138</code>
    STONE
    Use `hf-texture-text hf-texture-paving-stones-138`
  
  
    Tiles 138<code className="hf-texture-example-class">hf-texture-tiles-138</code>
    TILE
    Use `hf-texture-text hf-texture-tiles-138`
  



<h3 className="hf-texture-example-title">Ground / Road</h3>

  
    Ground 103<code className="hf-texture-example-class">hf-texture-ground-103</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-103`
  
  
    Ground 037<code className="hf-texture-example-class">hf-texture-ground-037</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-037`
  
  
    Ground 054<code className="hf-texture-example-class">hf-texture-ground-054</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-054`
  
  
    Ground 104<code className="hf-texture-example-class">hf-texture-ground-104</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-104`
  
  
    Ground 068<code className="hf-texture-example-class">hf-texture-ground-068</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-068`
  
  
    Ground 080<code className="hf-texture-example-class">hf-texture-ground-080</code>
    GROUND
    Use `hf-texture-text hf-texture-ground-080`
  
  
    Road 012 A<code className="hf-texture-example-class">hf-texture-road-012-a</code>
    ROAD
    Use `hf-texture-text hf-texture-road-012-a`
  
  
    Road 008 A<code className="hf-texture-example-class">hf-texture-road-008-a</code>
    ROAD
    Use `hf-texture-text hf-texture-road-008-a`
  
  
    Road 007<code className="hf-texture-example-class">hf-texture-road-007</code>
    ROAD
    Use `hf-texture-text hf-texture-road-007`
  
  
    Road 013 A<code className="hf-texture-example-class">hf-texture-road-013-a</code>
    ROAD
    Use `hf-texture-text hf-texture-road-013-a`
  
  
    Road 012 B<code className="hf-texture-example-class">hf-texture-road-012-b</code>
    ROAD
    Use `hf-texture-text hf-texture-road-012-b`
  
  
    Road 009 C<code className="hf-texture-example-class">hf-texture-road-009-c</code>
    ROAD
    Use `hf-texture-text hf-texture-road-009-c`
  
  
    Asphalt 031<code className="hf-texture-example-class">hf-texture-asphalt-031</code>
    ASPHALT
    Use `hf-texture-text hf-texture-asphalt-031`
  



<h3 className="hf-texture-example-title">Wood</h3>

  
    Wood<code className="hf-texture-example-class">hf-texture-wood</code>
    WOOD
    Use `hf-texture-text hf-texture-wood`
  
  
    Wood 094<code className="hf-texture-example-class">hf-texture-wood-094</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-094`
  
  
    Wood 092<code className="hf-texture-example-class">hf-texture-wood-092</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-092`
  
  
    Wood 051<code className="hf-texture-example-class">hf-texture-wood-051</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-051`
  
  
    Wood 066<code className="hf-texture-example-class">hf-texture-wood-066</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-066`
  
  
    Wood 049<code className="hf-texture-example-class">hf-texture-wood-049</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-049`
  
  
    Wood 058<code className="hf-texture-example-class">hf-texture-wood-058</code>
    WOOD
    Use `hf-texture-text hf-texture-wood-058`
  
  
    Wood Floor 051<code className="hf-texture-example-class">hf-texture-wood-floor-051</code>
    FLOOR
    Use `hf-texture-text hf-texture-wood-floor-051`
  
  
    Wood Floor 064<code className="hf-texture-example-class">hf-texture-wood-floor-064</code>
    FLOOR
    Use `hf-texture-text hf-texture-wood-floor-064`
  
  
    Wood Floor 070<code className="hf-texture-example-class">hf-texture-wood-floor-070</code>
    FLOOR
    Use `hf-texture-text hf-texture-wood-floor-070`
  
  
    Bark 014<code className="hf-texture-example-class">hf-texture-bark-014</code>
    BARK
    Use `hf-texture-text hf-texture-bark-014`
  



<h3 className="hf-texture-example-title">Metal</h3>

  
    Metal<code className="hf-texture-example-class">hf-texture-metal</code>
    METAL
    Use `hf-texture-text hf-texture-metal`
  
  
    Metal 049 A<code className="hf-texture-example-class">hf-texture-metal-049-a</code>
    METAL
    Use `hf-texture-text hf-texture-metal-049-a`
  
  
    Metal 055 A<code className="hf-texture-example-class">hf-texture-metal-055-a</code>
    METAL
    Use `hf-texture-text hf-texture-metal-055-a`
  
  
    Metal 046 B<code className="hf-texture-example-class">hf-texture-metal-046-b</code>
    METAL
    Use `hf-texture-text hf-texture-metal-046-b`
  
  
    Metal 061 B<code className="hf-texture-example-class">hf-texture-metal-061-b</code>
    METAL
    Use `hf-texture-text hf-texture-metal-061-b`
  
  
    Metal 048 A<code className="hf-texture-example-class">hf-texture-metal-048-a</code>
    METAL
    Use `hf-texture-text hf-texture-metal-048-a`
  
  
    Metal 032<code className="hf-texture-example-class">hf-texture-metal-032</code>
    METAL
    Use `hf-texture-text hf-texture-metal-032`
  
  
    Metal 041 A<code className="hf-texture-example-class">hf-texture-metal-041-a</code>
    METAL
    Use `hf-texture-text hf-texture-metal-041-a`
  
  
    Metal 038<code className="hf-texture-example-class">hf-texture-metal-038</code>
    METAL
    Use `hf-texture-text hf-texture-metal-038`
  
  
    Diamond Plate 009<code className="hf-texture-example-class">hf-texture-diamond-plate-009</code>
    PLATE
    Use `hf-texture-text hf-texture-diamond-plate-009`
  



<h3 className="hf-texture-example-title">Organic / Soft</h3>

  
    Lava<code className="hf-texture-example-class">hf-texture-lava</code>
    LAVA
    Use `hf-texture-text hf-texture-lava`
  
  
    Grass 005<code className="hf-texture-example-class">hf-texture-grass-005</code>
    GRASS
    Use `hf-texture-text hf-texture-grass-005`
  
  
    Grass 001<code className="hf-texture-example-class">hf-texture-grass-001</code>
    GRASS
    Use `hf-texture-text hf-texture-grass-001`
  
  
    Grass 004<code className="hf-texture-example-class">hf-texture-grass-004</code>
    GRASS
    Use `hf-texture-text hf-texture-grass-004`
  
  
    Carpet<code className="hf-texture-example-class">hf-texture-carpet</code>
    WOVEN
    Use `hf-texture-text hf-texture-carpet`
  
  
    Fabric 083<code className="hf-texture-example-class">hf-texture-fabric-083</code>
    FABRIC
    Use `hf-texture-text hf-texture-fabric-083`
  
  
    Snow<code className="hf-texture-example-class">hf-texture-snow</code>
    SNOW
    Use `hf-texture-text hf-texture-snow`
  
  
    Snow 015<code className="hf-texture-example-class">hf-texture-snow-015</code>
    SNOW
    Use `hf-texture-text hf-texture-snow-015`
  
  
    Leather 037<code className="hf-texture-example-class">hf-texture-leather-037</code>
    LEATHER
    Use `hf-texture-text hf-texture-leather-037`
  
  
    Fabric 080<code className="hf-texture-example-class">hf-texture-fabric-080</code>
    FABRIC
    Use `hf-texture-text hf-texture-fabric-080`