hyperframes-animation

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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 |

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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 |

From christiansalazar-wk/ai-lore, MIT.

More from christiansalazar-wk/ai-lore