INNER CODE UNIT · JavaScript
renderChaos
mario-andreschak/FLUJO · githubpages/short/app.js:303
function renderChaos(local) {
const hook = $("#hook-line");
const kicker = $("#hook-kicker");
const hookBeats = [
{ start: .3, end: 2.5, kicker: "USING", text: "Claude Code?" },
{ start: 2.5, end: 3.75, kicker: "OR", text: "Codex?" },
{ start: 3.75, end: 5, kicker: "OR", text: "Cline?" },
{ start: 5, end: 6.2, kicker: "OR", text: "Ollama?" },
];
const activeHook = hookBeats.find(beat => local >= beat.start && local < beat.end);
if (activeHook) {
const opacity = fadeWindow(local, activeHook.start, activeHook.end, .26);
hook.textContent = activeHook.text;
kicker.textContent = activeHook.kicker;
hook.style.opacity = opacity;
kicker.style.opacity = opacity * .85;
hook.style.transform = mixTransform(0, lerp(12, 0, easeOut(invLerp(activeHook.start, activeHook.start + .5, local))), lerp(.97, 1, easeOut(invLerp(activeHook.start, activeHook.start + .5, local))));
hook.style.filter = `blur(${lerp(6, 0, easeOut(invLerp(activeHook.start, activeHook.start + .45, local)))}px)`;