How to create a cool looking explainer video for anything in 5 minutes

Build me a short animated explainer video, rendered from a web page. THE VIDEO - Topic: [what it explains, e.g. "how our app sends invoice reminders"] - Audience: [who watches it] - Length: about [45] seconds, 16:9, 1920x1080, 30 fps - Look: flat cards with thick dark borders and hard offset shadows, one accent colour [#693bda], big bold headlines, plenty of empty space. No stock photos, no people. - End card: [product name] and [URL] THE STORY Write 5 to 7 scenes, each 4 to 9 seconds with one idea: a hook that names the viewer's problem, three or four scenes that show how it works, and the end card. For each scene give an on-screen headline (8 words at most) and one voiceover line (about 2 words a second at most). Show me the storyboard as a table and wait for my OK before building. HOW TO BUILD IT 1. Make a folder video/ with: - video.json: the scenes (id, minimum seconds, voice line, when the line starts inside the scene), the voice, the sound effects (name, prompt, seconds), the cues (sound, scene, second) and a music prompt. - index.html: every scene in HTML and CSS on a 1600x900 CSS-pixel canvas, absolutely positioned. No CSS animations or transitions. - timeline.js: a tiny engine. at(selector, start, duration, {prop: [from, to]}, easing) adds a track; seek(t) sets every element to its state at second t: opacity, translate x and y, scale, rotate, width in %, and typed text taken from data-text. Before its first track starts, an element sits at that track's "from" value. Times are scene-relative: t(scene, offset) and end(scene, offset) read each scene's start and end from timing.js. index.html?t=12.5 shows that moment and index.html?play plays it. - make.mjs: plain Node 22, no dependencies, three commands: a) audio: if ELEVENLABS_API_KEY is set, generate one MP3 per voice line (POST https://api.elevenlabs.io/v1/text-to-speech/{voice_id} with model_id eleven_multilingual_v2, sending the neighbouring lines as previous_text and next_text), one per sound effect (POST /v1/sound-generation with duration_seconds) and an instrumental music bed (POST /v1/music with music_length_ms and force_instrumental true). Name each file after a hash of what made it, so unchanged lines are never generated again. Measure where each line's speech ends with ffmpeg silencedetect, ignoring trailing silence. A scene lasts max(its minimum, voice start + speech length + 0.5 s). Write the scene times to timing.js. b) stills 2,8,14: PNG frames at those seconds, so we can both check the layout. c) render: start Chrome headless with --remote-debugging-port=0, read the port from DevToolsActivePort in its profile folder, and drive it over the DevTools protocol with Node's built-in WebSocket. Set the viewport to 1600x900 at deviceScaleFactor 1.2. For every frame call seek(frame / 30), wait two requestAnimationFrames, and save a JPEG screenshot. Then one ffmpeg pass: the frames at 30 fps; each voice line and sound effect placed with adelay; amix with normalize=0; the music under everything, ducked with sidechaincompress whenever the voice speaks and faded out at the end; loudnorm to -14 LUFS; H.264 and AAC with faststart. Also write an .srt caption file from the voice lines and their measured times. 2. Animate like a motion designer. Something moves every half second to a second. Entrances take 0.3 to 0.6 s, staggers 0.12 s, pops have a small overshoot. Each scene holds its finished state for a second before it leaves. The voice may lead the picture by up to half a second, never trail it. A soft pop when a card lands, a whoosh on scene changes, typing sounds while text types. 3. Before rendering, make stills of every scene, look at them yourself, and fix overlaps, cut-off text and anything touching the edges. Then render and give me the path to the MP4. If there is no ElevenLabs key, render without sound and tell me. 

function seek(t) { const state = new Map(); for (const tr of tracks) { // sorted by start const s = state.get(tr.el) ?? {}; state.set(tr.el, s); for (const [p, [from, to]] of Object.entries(tr.props)) { if (t < tr.start) { if (!(p in s)) s[p] = from; continue; } const k = tr.dur ? Math.min(1, (t - tr.start) / tr.dur) : 1; s[p] = from + (to - from) * tr.ease(k); } } for (const [el, s] of state) { if ('o' in s) el.style.opacity = s.o; el.style.transform = `translate(${s.x ?? 0}px, ${s.y ?? 0}px) scale(${s.s ?? 1})`; } }