Subchapter 18.63

ASR Keyword Glow

rules/asr-keyword-glow.mdMarkdown7 KBView on GitHub

Words in a phrase visually activate (glow blur + scale) when “spoken”, following an attack-sustain-release envelope over per-word { start, end } timestamps. In a real ASR pipeline the timings come from a word-level transcript (hyperframes transcribe — same shape); for promo video, hand-author them to control emphasis pacing. The envelope never falls to zero after a word — it decays to a rest level, leaving a breadcrumb of recent emphasis.

How It Works

ASR Keyword Glow · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

<!-- inside a standard scene clip (hyperframes-core) -->
<div class="phrase">
  <span class="word" data-word="{w1Key}">{w1}</span>
  <span class="word" data-word="{w2Key}">{w2}</span>
  <!-- … the final word may be the brand, with the .brand modifier -->
  <span class="word brand" data-word="{brandKey}">{brandWord}</span>
</div>

.phrase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: {restColor};
}
.word {
  display: inline-block; /* required for transform on <span> */
  transform-origin: 50% 50%;
  text-shadow: 0 0 0 {glowColorTransparent};
}
.word.brand {
  color: {brandAccentColor};
}

// Per-word spoken windows — one entry per span; brand word 1.5-2× a normal word's window.
const TIMINGS = {
  // {w1Key}: { start: …, end: … },  — seconds, local to the scene
};

function envelope(time, start, end) {
  if (time < start) return 0;
  if (time < end) return Math.min((time - start) / ATTACK_DUR, 1);
  const releaseEnd = end + RELEASE;
  if (time < releaseEnd) return 1 - ((time - end) / RELEASE) * (1 - REST_LEVEL);
  return REST_LEVEL;
}

const words = document.querySelectorAll(".word");
const driver = { t: 0 };
tl.to(
  driver,
  {
    t: SCENE_DURATION,
    duration: SCENE_DURATION,
    ease: "none", // linear — t maps 1:1 to scene time
    onUpdate: () => {
      words.forEach((el) => {
        const timing = TIMINGS[el.dataset.word];
        if (!timing) return;
        const env = envelope(driver.t, timing.start, timing.end);
        el.style.textShadow = `0 0 ${MAX_BLUR * env}px ${glowColorRgba(env)}`;
        el.style.transform = `scale(${1 + MAX_SCALE_BOOST * env})`;
      });
    },
  },
  0,
);

function lerpChannel(a, b, t) {
  return Math.round(a + (b - a) * t);
}
function colorAt(env, isBrand) {
  const target = isBrand ? BRAND_RGB : ACTIVE_RGB;
  return `rgb(${lerpChannel(REST_RGB.r, target.r, env)}, ${lerpChannel(REST_RGB.g, target.g, env)}, ${lerpChannel(REST_RGB.b, target.b, env)})`;
}
// in onUpdate: el.style.color = colorAt(env, el.classList.contains("brand"));

token	default style	karaoke style	notes
ATTACK_DUR	0.1–0.25s	same	must be < the shortest word’s window or it never reaches 1
RELEASE	0.2–0.5s	same	decay to rest
REST_LEVEL	0.15–0.4	0.05–0.2	> 0 (breadcrumb), < 1
MAX_BLUR	15–25px	30–45px	bigger = “shouting”
MAX_SCALE_BOOST	0.03–0.10	0.15–0.25	additive at peak (0.08 ⇒ scale 1.08)
PULSE_HZ / AMP	4–10 rad/s / 0.1–0.3	—	multi-octave variation
MAX_POP_Z	20–60px	—	3D variation
SCENE_DURATION	= `data-duration`	same	driver must end in sync with the scene’s seek window

ASR Keyword Glow

How It Works

ASR Keyword Glow

How It Works

Recipe

Variations

Values

Critical Constraints

See also