christiansalazar-wk/ai-lore

HyperFrames Animation

Built-In Presets (data-hf-animate)

Preset	Description
fade-in	opacity 0 → 1
fade-out	opacity 1 → 0
fade	fade-in + fade-out
slide-up	translates from below, fades in
slide-down	translates from above, fades in
slide-left	from right, fades in
slide-right	from left, fades in
zoom-in	scale 0.8 → 1, fades in
zoom-out	scale 1 → 1.2, fades out
pop	quick elastic scale-up
shake	horizontal shake
typewriter	text reveals character by character
wipe-right	clip reveal wipe left → right
wipe-left	clip reveal wipe right → left
blur-in	blur 20px → 0
blur-out	blur 0 → 20px

<div data-hf-clip data-hf-animate="fade-in"
     data-hf-animate-duration="0.6s"
     data-hf-animate-ease="ease-out">
  Content
</div>

GSAP Adapter

<script data-hf-runtime="gsap" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script data-hf-timeline>
  hf.at("0s", () => gsap.from("#hero h1", { y: 60, opacity: 0, duration: 0.8 }));
</script>

Lottie Adapter

<div data-hf-clip data-hf-start="1s" data-hf-duration="auto"
     data-hf-lottie="assets/confetti.json"
     data-hf-lottie-loop="false">
</div>

Three.js Adapter

<canvas id="scene3d" data-hf-clip data-hf-runtime="threejs" data-hf-start="0s" data-hf-duration="6s"></canvas>
<script data-hf-runtime="threejs" data-hf-target="#scene3d">
  const scene = new THREE.Scene();
  hf.onFrame((t) => { mesh.rotation.y = t * 0.5; });
</script>

Anime.js Adapter

<script data-hf-runtime="animejs"></script>
<script data-hf-timeline>
  hf.at("0.5s", () => anime({ targets: "#logo", scale: [0, 1], duration: 600, easing: "spring(1,80,10,0)" }));
</script>

WAAPI Adapter

<script data-hf-timeline>
  hf.at("1s", () => {
    document.querySelector("#badge").animate(
      [{ opacity: 0, transform: "scale(0.5)" }, { opacity: 1, transform: "scale(1)" }],
      { duration: 500, fill: "forwards" }
    );
  });
</script>

TypeGPU Adapter

<canvas id="gpu-canvas" data-hf-clip data-hf-runtime="typegpu" data-hf-start="0s" data-hf-duration="8s"></canvas>
<script data-hf-runtime="typegpu" data-hf-target="#gpu-canvas">
  hf.onFrame((t) => { /* WebGPU render loop */ });
</script>

hf Timeline API

Method	Description
hf.at(time, fn)	run fn at absolute scene time
hf.onFrame(fn)	run every frame; fn receives seconds
hf.clock	current render time in seconds
hf.scene	current scene id
hf.fps	configured fps