Week 3 / ESC Tip  ·  V3 (slower · per-video music)

Animation Review

10 variants across HyperFrames and Remotion. V3 slows each by 1.35x and pairs every video with its own custom music track plus the existing SFX library.

Case Study

Alex tries to animate a little tip

I always add little 'quality of life' tips to the slides for each week's code for creatives slides.

The one I wanted to add this week was simple: if you've sent a message to claude and it's chugging away and then you send another message, it gets added into a queue that'll be read ONCE claude is done with the current chug.

BUT if you hit escape, it takes your message and sends it right into the current workflow, so it becomes part of whatever claude is already doing.

At this time, I was ALSO working a lot with creating graphics and motion animations with two new tools - hyperframes and remotion.

So i figured, what if I tried to animate this tip.

Here are the results, which are cool and show you what these tools can do AND also here's my process for making them, which is way more important imo.

Below are two tabs - The Gallery shows the animations side by side. The Process tab shows how this actually got built with my literal prompts.

Phase 1  ·  0:00  ·  The brief
Alex
for week 3 - can you add a slide idea tip that's 'when you type something new, then hit escape, it sends the new thing into the convo' - and then create 5 diff hyperframe and 5 diff remotion animations that show how this works for c4c
Asked, before building
  1. Where does the slide live? What file?
  2. Is the feature really "ESC sends," or is it something else?
  3. Five distinct directions, or one concept iterated five times?
Alex
1. yes, lets add it to week 3 slides which should jsut be a copy of cohort 2, week 3 slides for now (it'll get better) 2. its not that it cancels the current and sends the message (tho that is accurate), its that it adds the new message into the flow and keeps going 3. yes, different edirections. some dont even need to be terminal. create each one as if you are being directed by a genius designer / animator
Built

11 agents in parallel.

  • 1 slide-builder. Inserted the tip slide into week-3-slides.html, also stood up the Gallery review page.
  • 5 HyperFrames agents: terminal, kinetic typography, ink in watercolor, Bauhaus line art, oscilloscope wave.
  • 5 Remotion agents: split screen, particle confluence, Tufte timeline, ESC keycap macro, ECM ensemble.

Wall-clock: roughly 8 minutes for all 10 to finish. Output: 10 MP4s at 1920x1080, 30fps, H.264. Durations 7 to 9 seconds. File sizes ranged from 117KB (line art) to 5MB (particle).

Phase 2  ·  0:15  ·  Audio
Alex
nice. can you also include some music under these? and some sfx that you pull from soundly? or freesound? and then share them all with me lol
Built

One agent.

  • Generated 2 ElevenLabs music tracks: cinematic ambient and tech-rhythmic.
  • Generated 5 SFX: typing loop, ESC click, whoosh, chime, droplet.
  • Mixed each video with ffmpeg, timing SFX to the merge beat in each clip.
  • Updated the gallery to point at the new audio versions.
  • Published the folder to here.now.
https://solar-knoll-jg67.here.now/
Phase 3  ·  0:30  ·  Clarity pivot
Alex  ·  with 2 screenshots of his actual Claude Code terminal
also can you make it clearer of what actually happens? Like you type something, claude starts thinking etc doing its thing, you the ntype something else and it shows it but as queued, you hit escape and then it sends it right into the convo and keeps it going
Built

First, wrote a UI reference doc straight from the screenshots. Captured the exact colors, fonts, message-box styling, and the verbatim hint text from Alex's terminal ("Press up to edit queued messages" and the post-ESC "Interrupted, What should Claude do instead?" line). That doc became the source of truth.

Then spawned 10 rebuild agents in parallel, each given an explicit five-beat timeline that included a held "queued" state before ESC. Each agent found its own queued visual in its aesthetic lane.

  • TerminalPhotoreal cream background with the actual hint text held for a full second.
  • KineticDashed gray border around a big "QUEUED." with the real UI hint underneath.
  • InkTeal droplet hovers above the stream with a downward chevron pulse.
  • LinesNavy line draws as dashed stitches in a parallel lane and waits.
  • WaveTeal "your message" line appears flat across the axis, tagged [QUEUED] AMP = 0.
  • SplitDashed orange stub on the right panel with phase label "A second thought, waiting."
  • ParticleGold particles freeze in a cluster at an entry point.
  • TimelineSecond thread appears dashed, the playhead moves past it on Claude's thread alone.
  • KeyMacroCyan particles cluster off-axis from the key while orange orbits.
  • EnsembleSecond voice as ghost notation with hollow rest-style note heads, labeled "tacet, queued."

Then a follow-up audio agent re-mixed each video with music ducking during the queued hold, so the suspense reads sonically.

https://opaque-moment-t4p8.here.now/
Phase 4  ·  0:50  ·  Pacing and bespoke music
Alex
nice. honestly i want to keep all of them. but can you use diff music for each? and then also just slow them down? i feel like its to omuch to process for each one rightnow
Built

One agent ran the whole chain.

  • Generated 10 bespoke ElevenLabs music tracks, each matched to a video's vibe. Rhodes lo-fi for terminal, brand-film drum pulse for kinetic, felt piano for ink, minimalist piano arpeggios for lines, retro analog synth for wave, documentary strings for split, glitchy ambient for particle, cello plus vibraphone for timeline, cinematic trailer sub-bass for keymacro, chamber cello plus piano for ensemble.
  • Slowed each video to 1.35x via ffmpeg setpts. Now 11.5 to 13 seconds each.
  • Re-mixed with the new music plus the existing SFX library.
  • Republished.

One snag worth noting. ElevenLabs rejected three initial prompts that named real artists or brands (Philip Glass, NYT Podcast, ECM Records). Regenerated with brand-neutral descriptors. Also hit a 429 rate limit at 5 concurrent requests, dropped to 2-wide.

https://mighty-garnet-jm6w.here.now/
Phase 5  ·  1:05  ·  This page
Alex
now can you add a meta case study on this page of how i went about creating these? a full timeline? i want that in a diff tab so peopel can see the process and eveyrthing they need
Built

Added a Process tab with the full timeline, six teaching takeaways, and design-studio-style callouts. Republished.

Alex
nice. for the recap, can you redo it so that it tells the story of how everything happened? with a big focus on what I did (exact prompts) vs what claude did and built) - no need to go crazy with 'what to steal' etc - let the user figure that out
Built

This rewrite. Stripped the takeaways. Restructured around alternating Alex and Claude blocks so the human-vs-agent split is the visual story.

Phase 6  ·  1:15  ·  Intro and a home on the site
Alex
nice! so finally, i just want the top of the url to give an intro into what this is - a case study that showcases two main things a) the power of remotion/hyperframes AND the process by which i explored those things add this prompt itself to the prompt back and forthe in the process section. once you finish, let's put this on the code for creatives website too in a new section called 'case-studies'
Built
  • Added an intro section at the top of the page so a first-time visitor knows what they are looking at.
  • Added this prompt as Phase 6 in the timeline.
  • Created a new /case-studies/ section on codeforcreatives.com.
  • Copied the case study (gallery, all V3 videos, the full Process timeline) to that path.
https://codeforcreatives.com/case-studies/esc-tip-animations/
By the numbers
8
prompts
~27
parallel background agents
30
final MP4 deliverables across 3 versions
12
music tracks
5
SFX
3
published galleries, all still live
1
slide added to the C3 Week 3 deck
~75
minutes, total session wall-clock
0
animations cut
All three versions
Skills and tools used

Tools and frameworks

  • Claude Code
    orchestrated the parallel background agents
  • HyperFrames
    HTML + GSAP video framework. Used for 5 of the 10 animations (terminal, kinetic, ink, lines, wave).
  • Remotion
    React-based video framework. Used for the other 5 (split, particle, timeline, keymacro, ensemble).
  • ffmpeg
    audio mixing, slowdown via setpts, final encoding
  • ElevenLabs Music API
    12 instrumental tracks across V1, V2, V3
  • ElevenLabs Sound Effects API
    5 SFX (typing, ESC click, whoosh, chime, droplet)
  • here.now
    publishing the gallery as a live URL
  • Cloudflare Pages
    codeforcreatives.com hosting

Claude Code skills invoked

  • /hyperframes
  • /hyperframes-cli
  • /music
  • /sound-effects
  • /remotion-best-practices
  • /here-now