Todo entra una vez, sin rebote, y se queda quieto.

const d = palabras[i].desde;                       // tiempos de whisper.cpp, en fotogramas
const a = interpolate(frame, [d - 2, d + 4], [0, 1], {
  easing: Easing.bezier(0.2, 0, 0, 1),
  extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
});
const color = mezcla(TINTA, AZUL, a);

const m = anim(frame, ini, 8, 'lineal');          // el fondo se revela
const t = anim(frame, ini + 4, 9, 'lineal');      // el texto llega 4 f después
<div style={{clipPath: `inset(0 ${(1 - m) * 100}% 0 0)`}}>
  <span style={{opacity: t}}>{nombre}</span>
</div>

// igual que el rótulo de nombre: solo cambia el texto
<Rotulo texto="Martes · 10:47 p. m." ini={6} izq={80} abajo={96} />

const p = interpolate(frame, [0, 24], [0, 1], {
  easing: Easing.bezier(0.2, 0, 0, 1), extrapolateRight: 'clamp',
});
const valor = Math.round(38 * p);   // tabular-nums: los dígitos no bailan

const largo = (i: number) =>
  MAX * (valor[i] / tope) *
  interpolate(frame, [6 * i, 6 * i + 24], [0, 1], {
    easing: Easing.bezier(0.4, 0, 0, 1), extrapolateRight: 'clamp',
  });
const azul = anim(frame, fin, DUR.micro, 'micro');   // la clave, al final

const L = path.getTotalLength();
const p = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.bezier(0.4, 0, 0, 1), extrapolateRight: 'clamp',
});
<path strokeDasharray={L} strokeDashoffset={L * (1 - p)} />

const p = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.bezier(0.4, 0, 0, 1), extrapolateRight: 'clamp',
});
const min = Math.round(618 * p);   // 10 h 18 min
const h = Math.floor(min / 60);
const m = String(min % 60).padStart(2, '0');

const C = 2 * Math.PI * r;
const p = interpolate(frame, [0, 24], [0, 1], {
  easing: Easing.bezier(0.4, 0, 0, 1), extrapolateRight: 'clamp',
});
<circle strokeDasharray={C} strokeDashoffset={C * (1 - (9 / 14) * p)} />
const boton = anim(frame, 24, DUR.micro, 'micro');   // sube el botón del día 9
const azul = anim(frame, 30, DUR.micro, 'micro');    // y recién después el color

const p = anim(frame, 6, 30, 'estado');                    // la ruta se dibuja
<path strokeDasharray={L} strokeDashoffset={L * (1 - p)} />
const s = anim(frame, 48, DUR.camara, 'estado', 1, 1.8);     // el mapa se acerca al destino
<div style={{transformOrigin: '900px 250px', transform: `scale(${s})`}} />

const t = anim(f, n.cue, 6, 'micro');          // se enciende
const p = anim(f, sig, 6, 'micro');           // pasa a «hecho»
const borde = `color-mix(in srgb, ${C.tinta} ${p * 100}%,
  color-mix(in srgb, ${C.encendido} ${t * 100}%, ${C.linea}))`;
const cable = anim(f, n.cue - 8, 14, 'estado');   // el cable se dibuja antes

const p = interpolate(frame, [3, 18], [0, 1], {
  easing: Easing.bezier(0.4, 0, 0, 1),
  extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
});
const cy = 99.8 - p * 80.4;   // centro del botón

const nom = anim(f, 18, DUR.entrada, 'entrada');        // el nombre, tras la perilla
const tit = anim(f, L(e.cueTitular), DUR.entrada, 'entrada');
const bot = anim(f, L(e.cueBoton), DUR.entrada, 'entrada');
opacity: bot, transform: `translateY(${(1 - bot) * 8}px)`