Composition format

The detail behind the contract in SKILL.md. Full references: npx hyperframes docs compositions, docs data-attributes, docs troubleshooting.

Shape of a project

<!-- index.html: a normal document; declares variables, mounts scenes -->
<html
  data-composition-variables='[{"id":"headline","type":"string","label":"Headline","default":"…"}]'
>
  <body>
    <div
      id="root"
      data-composition-id="main"
      data-start="0"
      data-duration="12"
      data-width="1920"
      data-height="1080"
    >
      <div
        id="intro"
        data-composition-id="intro"
        data-composition-src="compositions/intro.html"
        data-start="0"
        data-duration="4"
        data-track-index="1"
        data-width="1920"
        data-height="1080"
      ></div>
    </div>
    <script>
      window.__timelines["main"] = gsap.timeline({ paused: true });
    </script>
  </body>
</html>

<!-- compositions/intro.html: everything inside <template> -->
<template>
  <style>
    #root {
      position: absolute;
      inset: 0;
    }
  </style>
  <div id="root" data-composition-id="intro" data-width="1920" data-height="1080">
    <h1 id="headline" class="clip" data-start="0.4" data-duration="3" data-var-text="headline">
      …
    </h1>
  </div>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.fromTo(
      "#headline",
      { opacity: 0, filter: "blur(8px)" },
      { opacity: 1, filter: "blur(0px)", duration: 0.18, ease: "power4.out" },
      0.4,
    );
    window.__timelines["intro"] = tl;
  </script>
</template>

• Give the host, the scene root and the timeline key the same id. A host id that differs from its scene's makes each render wait 45 s per scene, then show static frames. Styles and scripts outside <template> are dropped.
• Size the scene root with inset: 0, never hard-coded pixels; the canvas is data-width × data-height.
• Keep ids unique across the assembled page (prefix them: #intro-title). A scene's timeline can't reach elements outside its file.
• Use fromTo, not from, inside a scene: the host re-seeks the scene each time it shows, and from records its start state once, so it drifts on seek-back.
• Never add() a scene's timeline to the root's; the runtime drives each scene itself, and nesting seeks it twice.

Attributes you'll use most

Variables

• Declare an array of {id, type, label, default}: the video's own on index.html's <html>, a scene or block file's on that file's <html> (or root element), where they stay inside each mount. Types: string (placeholder, maxLength), number (min, max, step, unit), color, boolean, enum (options: [{value, label}]).
• Bind without script: data-var-text="id", data-var-src="id" (keep a real fallback src on media with audio), var(--id) in CSS; for logic, window.__hyperframes.getVariables() once at init.
• Values are an object keyed by id. A host's data-variable-values sets one mount; Studio's Variables panel and batch renders set only the root's variables, so to vary a block, change its host's values. Variables can't change the root's data-duration.

Fonts

• Bundled, so they resolve by name: Inter, Montserrat, Outfit, Nunito, Oswald, League Gothic, Archivo Black, Space Mono, IBM Plex Mono, JetBrains Mono, EB Garamond, Playfair Display, Source Code Pro, Noto Sans JP, Roboto, Open Sans, Lato, Poppins. Common system fonts (Helvetica, Arial, Times, Menlo and the like) are swapped for the nearest of these.
• The bundle only has Latin text at a few weights per family (Inter: 400, 700, 900). The compiler still fetches each of these families from Google Fonts for the other weights and scripts, and caches the result in ~/.cache/hyperframes/fonts.
• Any other family needs @font-face in the file that uses it, or lint fails font_family_without_font_face: src: url('assets/fonts/x.woff2') for a file in the project (a capture's own fonts, or one you download there), A local('Exact Name')-only face draws the font installed on this machine; a cloud render has no copy of it (lint warns font_face_local_only), so ship the file instead when the video may render in the cloud.

Timing and the timeline

• A clip shows over [start, start + duration): an end state landing exactly on its end is never rendered.
• Only a composition's root timeline is paused; timelines nested inside it are not. Never tl.play().
• A scene's clock starts at 0 at its host's data-start; media data-start is local to its composition. <video> / <audio> without data-duration play their full length; an <img> without one lasts 3 s.
• A host's data-duration is the scene's slot: a shorter scene timeline holds its last frame, and a slot shorter than the video goes blank when it ends.
• Root children with data-start are laid out full-frame by the runtime; an untimed full-bleed background needs position: absolute; inset: 0 or it collapses to nothing.
• A fill on the composition root is dropped when the video has shader transitions or HDR media; put it on a full-bleed child.
• data-start="intro + 0.5" starts after intro ends (spaces required). A typo, a missing id or a cycle silently resolves to 0, so snapshot what you time this way.
• A clip nested inside another timed element counts its data-start from the composition, not from that element, and shows only while that element shows. timeline lists it under its parent and warns never visible when the windows miss (lint: nested_clip_never_visible).
• npx hyperframes timeline --json lists every clip by kind with absStart, absEnd, file, src, playbackRate, nested, host and durationSource: read it instead of opening every file. It reads one level of nesting (a deeper scene shows children=unread); laneError means a data-automation or data-fx-chain that doesn't parse.

Adding media

Write what a Studio drop writes, so the clip behaves like one the person dropped:

• id, class="clip", data-start (the playhead or the requested time, never a silent 0) and data-track-index. Video with sound: playsinline data-has-audio="true"; silent footage: muted playsinline. Audio: data-volume="1".
• Images and video fill the frame: position: absolute; left: 0; top: 0, width and height equal to the canvas, object-fit: contain.
• z-index is the number of top-level clips already in that file plus one.
• Raise the root's data-duration to cover the new clip's end, or it never plays.

Linked clips

Studio's Detach audio writes a muted <video> and an <audio> of the same file sharing data-link and data-sync-origin; Studio moves, trims, splits and deletes them as one.

• Prefer one <video data-has-audio="true">; link only when the sound needs its own track, volume or effects.
• Every member keeps the same data-start, data-duration, data-media-start and data-playback-rate; retime them all together.
• Unlink by removing data-link from every member. Leave data-sync-origin alone while they are still one source.

Layout audit opt-outs

check measures boxes at sampled times; overflow: hidden does not silence a finding. Use the narrowest opt-out:

Lint errors you'll meet first