christiansalazar-wk/ai-lore

HyperFrames Core — Composition Contract

HTML Skeleton

<!DOCTYPE html>
<html data-hf-version="1">
<head>
  <meta charset="UTF-8" />
  <meta name="hf:canvas-width" content="1920" />
  <meta name="hf:canvas-height" content="1080" />
  <meta name="hf:fps" content="30" />
  <meta name="hf:duration" content="auto" />
</head>
<body>
  <div data-hf-scene="intro" data-hf-duration="5s">
    <div data-hf-track="background">
      <div data-hf-clip data-hf-start="0s" data-hf-duration="5s"
           style="background:#111;width:100%;height:100%;position:absolute;"></div>
    </div>
    <div data-hf-track="title">
      <div data-hf-clip data-hf-start="0.5s" data-hf-duration="4s"
           data-hf-animate="fade-in">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
</body>
</html>

Canvas Meta Tags

Tag	Default	Notes
hf:canvas-width	1920	pixels
hf:canvas-height	1080	pixels
hf:fps	30	frames per second
hf:duration	auto	total; or explicit e.g. 60s
hf:bg-color	#000	default scene background

Scene Attributes (data-hf-scene)

Attribute	Type	Description
data-hf-scene	string	scene name / id
data-hf-duration	time	5s, 10s, auto
data-hf-transition	string	cut, fade, slide-left, slide-right, zoom
data-hf-transition-duration	time	default 0.5s
data-hf-bg	url or color	scene background

Track Attributes (data-hf-track)

Attribute	Type	Description
data-hf-track	string	track name
data-hf-z	number	z-index stacking
data-hf-mute	boolean	mute audio on this track

Clip Attributes (data-hf-clip)

Attribute	Type	Description
data-hf-clip	—	marks element as a clip
data-hf-start	time	start offset within scene
data-hf-duration	time	clip duration; auto = content duration
data-hf-end	time	alternative to duration
data-hf-animate	string	shorthand animation preset
data-hf-in	string	entry animation
data-hf-out	string	exit animation
data-hf-volume	0–1	audio volume
data-hf-speed	number	playback speed multiplier
data-hf-loop	boolean	loop media
data-hf-trim-start	time	trim media from start
data-hf-trim-end	time	trim media at end

Media Clips

<!-- Video -->
<video data-hf-clip data-hf-start="0s" src="assets/hero.mp4" />

<!-- Image (static, held for duration) -->
<img data-hf-clip data-hf-start="0s" data-hf-duration="3s" src="assets/logo.png" />

<!-- Audio -->
<audio data-hf-clip data-hf-start="0s" src="assets/music.mp3" data-hf-volume="0.4" />

<!-- TTS narration -->
<div data-hf-clip data-hf-tts="Hello, welcome to the demo." data-hf-start="1s" />

Time Format

All time values use CSS-style notation: 0s, 1.5s, 2000ms. Fractional seconds are allowed.

Validation

npx hyperframes lint index.html