Turn web animation into video.

const rows = d3.csvParse(await (await fetch('./data/global-temp.csv')).text(), d3.autoType);const bars = svg.selectAll('rect').data(rows).join('rect').attr('x', (d) => x(d.year)).attr('width', x.bandwidth()).attr('fill', (d) => colour(d.temp)); helios.subscribe(({ currentFrame, fps }) => {const shown = progress(currentFrame / fps) * rows.length;bars.each(function (d, i) {const v = d.temp * d3.easeCubicOut(clamp(shown - i));d3.select(this).attr('y', Math.min(y(0), y(v))).attr('height', Math.abs(y(v) - y(0)));});});

const helios = new Helios({ duration: 15, fps: 30 });const tl = gsap.timeline({ paused: true }); tl.from('.title .w', { yPercent: 115, duration: 0.75,stagger: 0.07, ease: 'power3.out' }, 0.35).from('.dock', { opacity: 0, x: 60, duration: 0.6 }, 8.6); // Helios owns the clock; GSAP draws each frame.helios.subscribe(({ currentFrame, fps }) => {tl.seek(currentFrame / fps);// The logo seeks too: one ray every two frames.rays.forEach((r, i) => (r.style.opacity = i < currentFrame / 2 ? 1 : 0));});helios.bindToDocumentTimeline();window.helios = helios;

/* Every moving thing is a CSS animation. */.sun {offset-path: path("M 160 860 C 520 100, 1400 100, 1760 860");animation: travel 8s linear both;}@keyframes travel { to { offset-distance: 100%; } } .sky { animation: daylight 8s ease-in-out both; }@keyframes daylight { 50% { --top: #2f7fe0; --low: #f6d58a; } } <script type="module">// Helios is only the clock. It seeks the animations above.window.helios = new Helios({ duration: 8, fps: 30, autoSyncAnimations: true });</script>

const helios = new Helios({ duration: 10, fps: 30 });helios.bindToDocumentTimeline();window.helios = helios; function draw(frame) {const d = frame / (10 * 30);               // 0 → 1 across the dayconst ang = Math.PI * (0.02 + d * 0.96);   // sun from east to westsun.position.set(Math.cos(ang) * 90, Math.sin(ang) * 46 + 2, -60);sun.color.copy(skyAt(d).sunColour);camera.position.set(Math.sin(-0.55 + d * 0.8) * 78, 17 - d * 3, 78);renderer.render(scene, camera);}helios.subscribe(({ currentFrame }) => draw(currentFrame));

<canvas id="c" width="1920" height="1080"></canvas><script>// No Helios import. The renderer calls renderAt(t) once per frame.window.renderAt = (t) => {gl.uniform1f(uTime, t);           // the shader is a function of tgl.drawArrays(gl.TRIANGLES, 0, 3);};</script> $ helios render corona.html --duration 8 -o corona.mp4