hyperframes 0.6.97 → 0.6.99

package/dist/skills/gsap/references/effects.md

@@ -1,297 +0,0 @@
-# GSAP Effects for HyperFrames
-
-Drop-in animation patterns for HyperFrames compositions. Each effect is self-contained with HTML, CSS, and code.
-
-All effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.
-
-## Table of Contents
-
-- [Typewriter](#typewriter)
-- [Audio Visualizer](#audio-visualizer)
-
----
-
-## Typewriter
-
-Reveal text character by character using GSAP's TextPlugin.
-
-### Required Plugin
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/TextPlugin.min.js"></script>
-<script>
-  gsap.registerPlugin(TextPlugin);
-</script>
-```
-
-### Basic Typewriter
-
-```js
-const text = "Hello, world!";
-const cps = 10; // chars per second: 3-5 dramatic, 8-12 conversational, 15-20 energetic
-tl.to(
-  "#typed-text",
-  { text: { value: text }, duration: text.length / cps, ease: "none" },
-  startTime,
-);
-```
-
-### With Blinking Cursor
-
-Three rules:
-
-1. **One cursor visible at a time** — hide previous before showing next.
-2. **Cursor must blink when idle** — after typing, during pauses.
-3. **No gap between text and cursor** — elements must be flush in HTML.
-
-```html
-<span id="typed-text"></span><span id="cursor" class="cursor-blink">|</span>
-```
-
-```css
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-.cursor-blink {
-  animation: blink 0.8s step-end infinite;
-}
-.cursor-solid {
-  animation: none;
-  opacity: 1;
-}
-.cursor-hide {
-  animation: none;
-  opacity: 0;
-}
-```
-
-Pattern: blink → solid (typing starts) → type → solid → blink (typing done).
-
-```js
-tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], startTime);
-tl.to("#typed-text", { text: { value: text }, duration: dur, ease: "none" }, startTime);
-tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], startTime + dur);
-```
-
-### Backspacing
-
-TextPlugin removes from front — wrong for backspace. Use manual substring removal:
-
-```js
-function backspace(tl, selector, word, startTime, cps) {
-  const el = document.querySelector(selector);
-  const interval = 1 / cps;
-  for (let i = word.length - 1; i >= 0; i--) {
-    tl.call(
-      () => {
-        el.textContent = word.slice(0, i);
-      },
-      [],
-      startTime + (word.length - i) * interval,
-    );
-  }
-  return word.length * interval;
-}
-```
-
-### Spacing with Static Text
-
-When a typewriter word sits next to static text, use `margin-left` on a wrapper span. Don't use flex gap (spaces cursor from text) or trailing space in static text (collapses when dynamic is empty).
-
-```html
-<div style="display:flex; align-items:baseline;">
-  <span style="font-size:40px; color:#555;">Ship something</span>
-  <span style="margin-left:14px;"><span id="word"></span><span id="cursor">|</span></span>
-</div>
-```
-
-### Word Rotation
-
-Type → hold → backspace → next word. Cursor blinks during every idle moment (holds, after backspace).
-
-```js
-words.forEach((word, i) => {
-  const typeDur = word.length / 10;
-  // Solid while typing
-  tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], offset);
-  tl.to("#typed-text", { text: { value: word }, duration: typeDur, ease: "none" }, offset);
-  // Blink during hold
-  tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], offset + typeDur);
-  offset += typeDur + 1.5; // hold
-
-  if (i < words.length - 1) {
-    tl.call(() => cursor.classList.replace("cursor-blink", "cursor-solid"), [], offset);
-    const clearDur = backspace(tl, el, word, offset, 20);
-    tl.call(() => cursor.classList.replace("cursor-solid", "cursor-blink"), [], offset + clearDur);
-    offset += clearDur + 0.3;
-  }
-});
-```
-
-### Appending Words
-
-Build a sentence word-by-word into the same element:
-
-```js
-let accumulated = "";
-words.forEach((word) => {
-  const target = accumulated + (accumulated ? " " : "") + word;
-  const newChars = target.length - accumulated.length;
-  tl.to("#typed-text", { text: { value: target }, duration: newChars / 10, ease: "none" }, offset);
-  accumulated = target;
-  offset += newChars / 10 + 0.3;
-});
-```
-
-### Multi-Line Cursor Handoff
-
-When handing off between typewriter lines: hide previous → blink new → pause → solid when typing. Never go hidden→solid (skips idle state).
-
-```js
-tl.call(
-  () => {
-    prevCursor.classList.replace("cursor-blink", "cursor-hide");
-    nextCursor.classList.replace("cursor-hide", "cursor-blink");
-  },
-  [],
-  handoffTime,
-);
-
-const typeStart = handoffTime + 0.5; // brief blink pause
-tl.call(() => nextCursor.classList.replace("cursor-blink", "cursor-solid"), [], typeStart);
-tl.to("#next-text", { text: { value: text }, duration: dur, ease: "none" }, typeStart);
-tl.call(() => nextCursor.classList.replace("cursor-solid", "cursor-blink"), [], typeStart + dur);
-```
-
-### Timing Guide
-
-| CPS   | Feel             | Good for                   |
-| ----- | ---------------- | -------------------------- |
-| 3-5   | Slow, deliberate | Dramatic reveals, suspense |
-| 8-12  | Natural typing   | Dialogue, narration        |
-| 15-20 | Fast, energetic  | Tech demos, code           |
-| 30+   | Near-instant     | Filling long blocks        |
-
----
-
-## Audio Visualizer
-
-Pre-extract audio data, drive canvas/DOM rendering from GSAP timeline.
-
-### Extract Audio Data
-
-```bash
-python scripts/extract-audio-data.py audio.mp3 -o audio-data.json
-python scripts/extract-audio-data.py video.mp4 --fps 30 --bands 16 -o audio-data.json
-```
-
-Requires ffmpeg and numpy.
-
-### Data Format
-
-```json
-{
-  "fps": 30, "totalFrames": 5415,
-  "frames": [{ "time": 0.0, "rms": 0.42, "bands": [0.8, 0.6, 0.3, ...] }]
-}
-```
-
-- **rms** (0-1): overall loudness, normalized across track
-- **bands[]** (0-1): frequency magnitudes. Index 0 = bass, higher = treble. Each normalized independently.
-
-### Loading the Data
-
-```js
-// Option A: inline (small files, under ~500KB)
-var AUDIO_DATA = {
-  /* paste audio-data.json contents */
-};
-
-// Option B: sync XHR (large files — must be synchronous for deterministic timeline construction)
-var xhr = new XMLHttpRequest();
-xhr.open("GET", "audio-data.json", false);
-xhr.send();
-var AUDIO_DATA = JSON.parse(xhr.responseText);
-```
-
-**Do NOT use async `fetch()` to load audio data.** HyperFrames requires synchronous timeline construction — the capture engine reads `window.__timelines` synchronously after page load. Building timelines inside `.then()` callbacks means the timeline isn't ready when capture starts.
-
-### Rendering Approaches
-
-**Canvas 2D** (most common — bars, waveforms, circles, gradients):
-
-```js
-for (let f = 0; f < AUDIO_DATA.totalFrames; f++) {
-  tl.call(
-    () => {
-      const frame = AUDIO_DATA.frames[f];
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      // draw using frame.rms and frame.bands
-    },
-    [],
-    f / AUDIO_DATA.fps,
-  );
-}
-```
-
-**WebGL / Three.js** — HyperFrames patches `THREE.Clock` for deterministic time. Update uniforms from audio data each frame.
-
-**DOM Elements** — fine for < 20 elements, less performant than Canvas for many.
-
-### Spatial Mapping
-
-- **Horizontal**: bass left, treble right (iterate bands left-to-right)
-- **Vertical**: bass bottom, treble top
-- **Circular**: bass at 12 o'clock, wrap clockwise; mirror for full circle
-
-### Smoothing
-
-```js
-let prev = null;
-const smoothing = 0.25; // 0.1-0.2 snappy, 0.3-0.5 flowing
-function smooth(f) {
-  const raw = AUDIO_DATA.frames[f];
-  if (!prev) {
-    prev = { rms: raw.rms, bands: [...raw.bands] };
-    return prev;
-  }
-  prev = {
-    rms: prev.rms * smoothing + raw.rms * (1 - smoothing),
-    bands: raw.bands.map((b, i) => prev.bands[i] * smoothing + b * (1 - smoothing)),
-  };
-  return prev;
-}
-```
-
-### Motion Principles
-
-- **Bass drives big moves** — scale, glow, position shifts
-- **Treble drives detail** — shimmer, flicker, edge effects
-- **RMS drives globals** — background brightness, overall energy
-- Pick 2-3 properties to animate. More looks noisy.
-- Keep minimums above zero — quiet sections need life.
-
-### Band Count
-
-| Bands | Detail    | Good for                   |
-| ----- | --------- | -------------------------- |
-| 4     | Low       | Background glow, pulsing   |
-| 8     | Medium    | Bar charts, basic spectrum |
-| 16    | High      | Detailed EQ (default)      |
-| 32    | Very high | Dense radial layouts       |
-
-### Layering
-
-Layer multiple canvases with CSS z-index for depth — a background layer driven by bass/rms and a foreground layer driven by individual bands creates depth without complexity.
-
-```html
-<canvas id="bg-layer" style="position:absolute;top:0;left:0;z-index:1;"></canvas>
-<canvas id="main-layer" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
-```

package/dist/skills/gsap/scripts/extract-audio-data.py

@@ -1,188 +0,0 @@
-#!/usr/bin/env python3
-"""
-Extract per-frame audio visualization data from an audio or video file.
-
-Outputs JSON with RMS amplitude and frequency band data at the target FPS,
-ready to embed in a HyperFrames composition.
-
-Usage:
-    python extract-audio-data.py input.mp3 -o audio-data.json
-    python extract-audio-data.py input.mp4 --fps 30 --bands 16 -o audio-data.json
-
-Requirements:
-    - Python 3.9+
-    - ffmpeg (for decoding audio)
-    - numpy (pip install numpy)
-"""
-
-import argparse
-import json
-import subprocess
-import sys
-
-import numpy as np
-
-# ---------------------------------------------------------------------------
-# FFT parameters
-#
-# A 4096-sample window gives ~10.8 Hz per bin at 44100Hz — enough to resolve
-# low-frequency bands cleanly. The per-frame audio slice (44100/30 = 1470
-# samples at 30fps) is too small and causes low bands to map to the same bins.
-#
-# Frequency range 30Hz–16kHz covers the useful range for music. Below 30Hz is
-# sub-bass most speakers can't reproduce; above 16kHz is noise/harmonics that
-# don't contribute to perceived rhythm or melody.
-# ---------------------------------------------------------------------------
-
-SAMPLE_RATE = 44100
-FFT_SIZE = 4096
-MIN_FREQ = 30.0
-MAX_FREQ = 16000.0
-
-
-def decode_audio(path: str) -> np.ndarray:
-    """Decode audio to mono float32 samples via ffmpeg."""
-    cmd = [
-        "ffmpeg", "-i", path,
-        "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE),
-        "-f", "s16le", "-acodec", "pcm_s16le",
-        "-loglevel", "error",
-        "pipe:1",
-    ]
-    result = subprocess.run(cmd, capture_output=True)
-    if result.returncode != 0:
-        print(f"ffmpeg error: {result.stderr.decode()}", file=sys.stderr)
-        sys.exit(1)
-    return np.frombuffer(result.stdout, dtype=np.int16).astype(np.float32) / 32768.0
-
-
-def compute_band_edges(n_bands: int) -> np.ndarray:
-    """Logarithmically-spaced frequency band edges from MIN_FREQ to MAX_FREQ."""
-    return np.array([
-        MIN_FREQ * (MAX_FREQ / MIN_FREQ) ** (i / n_bands)
-        for i in range(n_bands + 1)
-    ])
-
-
-def compute_fft_bands(
-    windowed: np.ndarray, freq_per_bin: float, n_bins: int,
-    band_edges: np.ndarray, n_bands: int,
-) -> np.ndarray:
-    """Compute peak magnitude in logarithmically-spaced frequency bands."""
-    magnitudes = np.abs(np.fft.rfft(windowed))
-
-    bands = np.zeros(n_bands)
-    for b in range(n_bands):
-        low_bin = max(0, int(band_edges[b] / freq_per_bin))
-        high_bin = min(n_bins, int(band_edges[b + 1] / freq_per_bin))
-        if high_bin <= low_bin:
-            high_bin = low_bin + 1
-        # Clamp to valid range to avoid empty slices
-        low_bin = min(low_bin, n_bins - 1)
-        high_bin = min(high_bin, n_bins)
-        bands[b] = np.max(magnitudes[low_bin:high_bin])
-
-    return bands
-
-
-def extract(path: str, fps: int, n_bands: int) -> dict:
-    """Extract per-frame audio data."""
-    print(f"Decoding audio from {path}...", file=sys.stderr)
-    samples = decode_audio(path)
-    duration = len(samples) / SAMPLE_RATE
-    frame_step = SAMPLE_RATE // fps
-    total_frames = int(duration * fps)
-
-    print(f"Duration: {duration:.1f}s, {total_frames} frames at {fps}fps", file=sys.stderr)
-    print(f"FFT window: {FFT_SIZE} samples ({SAMPLE_RATE / FFT_SIZE:.1f} Hz/bin)", file=sys.stderr)
-    print(f"Frequency range: {MIN_FREQ:.0f}-{MAX_FREQ:.0f} Hz, {n_bands} bands", file=sys.stderr)
-
-    # Precompute constants
-    hann = np.hanning(FFT_SIZE)
-    band_edges = compute_band_edges(n_bands)
-    freq_per_bin = SAMPLE_RATE / FFT_SIZE
-    n_bins = FFT_SIZE // 2 + 1
-    half_fft = FFT_SIZE // 2
-
-    # Pass 1: extract raw values
-    rms_values = np.zeros(total_frames)
-    band_values = np.zeros((total_frames, n_bands))
-
-    for f in range(total_frames):
-        # RMS from the frame's audio slice
-        rms_start = f * frame_step
-        rms_end = rms_start + frame_step
-        frame_slice = samples[rms_start:min(rms_end, len(samples))]
-        if len(frame_slice) > 0:
-            rms_values[f] = np.sqrt(np.mean(frame_slice ** 2))
-
-        # FFT from a centered 4096-sample window
-        center = rms_start + frame_step // 2
-        win_start = center - half_fft
-        win_end = center + half_fft
-
-        if win_start >= 0 and win_end <= len(samples):
-            window = samples[win_start:win_end] * hann
-        else:
-            # Zero-pad at edges
-            padded = np.zeros(FFT_SIZE)
-            src_start = max(0, win_start)
-            src_end = min(len(samples), win_end)
-            dst_start = src_start - win_start
-            dst_end = dst_start + (src_end - src_start)
-            padded[dst_start:dst_end] = samples[src_start:src_end]
-            window = padded * hann
-
-        band_values[f] = compute_fft_bands(window, freq_per_bin, n_bins, band_edges, n_bands)
-
-    # Pass 2: normalize
-    peak_rms = rms_values.max() if total_frames > 0 else 1.0
-    if peak_rms > 0:
-        rms_values /= peak_rms
-
-    # Per-band normalization so treble is visible alongside louder bass
-    band_peaks = band_values.max(axis=0)
-    band_peaks[band_peaks == 0] = 1.0
-    band_values /= band_peaks
-
-    # Build output
-    frames = []
-    for f in range(total_frames):
-        frames.append({
-            "time": round(f / fps, 4),
-            "rms": round(float(rms_values[f]), 4),
-            "bands": [round(float(b), 4) for b in band_values[f]],
-        })
-
-    return {
-        "duration": round(duration, 4),
-        "fps": fps,
-        "bands": n_bands,
-        "totalFrames": total_frames,
-        "frames": frames,
-    }
-
-
-def main():
-    parser = argparse.ArgumentParser(description="Extract per-frame audio visualization data")
-    parser.add_argument("input", help="Audio or video file")
-    parser.add_argument("-o", "--output", default="audio-data.json", help="Output JSON path")
-    parser.add_argument("--fps", type=int, default=30, help="Frames per second (default: 30)")
-    parser.add_argument("--bands", type=int, default=16, help="Number of frequency bands (default: 16)")
-    args = parser.parse_args()
-
-    if args.fps < 1:
-        parser.error("--fps must be at least 1")
-    if args.bands < 1:
-        parser.error("--bands must be at least 1")
-
-    data = extract(args.input, args.fps, args.bands)
-
-    with open(args.output, "w") as f:
-        json.dump(data, f)
-
-    print(f"Wrote {args.output} ({data['totalFrames']} frames, {data['bands']} bands)", file=sys.stderr)
-
-
-if __name__ == "__main__":
-    main()