Sine Wave Loop · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

Sine Wave Loop · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

// onUpdate form — phase-driven, composable.
const phase = { p: 0 };
tl.to(
  phase,
  {
    p: Math.PI * 2 * CYCLES,
    duration: IDLE_DUR,
    ease: "none", // sine provides the easing; a non-linear phase tween distorts the wave
    onUpdate: () => {
      const s = Math.sin(phase.p);
      hero.style.transform = `translateY(${s * Y_AMP_PX}px) scale(${1 + s * SCALE_AMP})`;
      // secondary elements: offset by Math.PI / 2 — synced motion looks mechanical
      dot.style.transform = `scale(${1 + Math.sin(phase.p + Math.PI / 2) * DOT_SCALE_AMP})`;
    },
  },
  IDLE_START_TIME,
);

// Yoyo form — standalone property, finite repeats.
tl.to(
  "#badge",
  { y: -Y_AMP_PX, duration: PERIOD / 2, ease: "sine.inOut", yoyo: true, repeat: REPEATS },
  IDLE_START_TIME,
);

const t = phase.p / (Math.PI * 2 * CYCLES); // 0 → 1 across idle
const env = t < 1 - FADE_FRAC ? 1 : (1 - t) / FADE_FRAC; // FADE_FRAC ≈ 0.2
const scale = 1 + Math.sin(phase.p) * SCALE_AMP * env;

token	range / default	notes
SCALE_AMP	0.008–0.015 default	push to 0.02–0.04 only when isolated on canvas / scene <6s / kinetic brief
Y_AMP_PX	2–3px default	4–6px only under the same gating; rotation ±0.3–0.8° rarely needed at all
period	1.5–3s (2.5–4s when idle is long)	<1.5s frantic; >4s lifeless in a short window
CYCLES	`IDLE_DUR/3 ≤ CYCLES ≤ IDLE_DUR/1.5`	derive from the period, not the other way round
IDLE_START_TIME	≥ entry settle + ~0.1s	`sin(0)=0` at this moment → no jump off the entry tail
IDLE_DUR	`TOTAL_DURATION − IDLE_START_TIME`	one long tween fills the hold — never restarted
DOT_SCALE_AMP	0.04–0.12	small accents tolerate more than the hero
OCTAVE_RATIO	2.0–4.0	integer-ish reads musical; non-integer reads organic