Claude Opus 5.5 drew each frame of this animation in JavaScript. Here's "how browsers work" in 40 seconds.

Beautiful! If anyone is looking for a skill to help do stuff like that, I just open sourced Anidoodle. Helps you illustrate and animate with 100% deterministic code. Storytelling methods, music etc all buitl in.

Did 'How do LLMs work? as a children's story

Did it render it all from scratch via javascript and a bunch of screenshots? I built something to save time and tokens specifically on the rendering! Uses native browser c++ to handle animation timing

this is so crazy!

I've been loving generating these!

Looks great! These js demos look impressive indeed. Can you share the approach and prompts that were used?

Frame by frame in JavaScript. Somebody get it a timeline editor.

someone please do 'how ableton works' next. 40 seconds, 39 of them are me scrolling through kick samples

hot!

Great explainer. And what a browser can run now, a whole river in WebGL:

frame by frame is the flex, most of these demos just fake it with css transitions

Lovely. How many passes did it take to get the timing right?

explainer channels are cooked rn

The editability is the exciting part for me. I made a homepage short with 5.5 + Remotion, then swapped the copy to English without changing the motion or audio. Is this plain canvas or a framework?

This is seriously impressive. Having an AI generate each frame of an animation in JavaScript to explain how browsers work is a great example of AI + code + visual storytelling coming together. The future of technical education is getting very interesting.

i'd rather read your articles than trying to understand this slop

Was this actually one-shotted?

It was indeed. Almost everything I've generated to test/demo 5.5 is one-shot

@addyosmani could you share the prompt, please?

It’s a whole new world. I created this

40 seconds of animated frames is neat but "how browsers work" in 40s means it skipped the part where CSS specificity ruins your week.

I do not understand anything

thanks for this fantastic model!

next episode with Sogni: “how one innocent click becomes seventeen network requests” Setup and install

looks cool, but it's way too fast

the frame-by-frame rendering is wild, but the browser lesson lands really cleanly

@grok o que eles usam para fazer isso?

Code-as-video is underrated because every frame is editable. You can fix frame 212 without re-rolling the whole clip.

复杂原理做成四十秒动画 一看就懂 这种讲解以前请人做挺难的

Time to go crazy on making beautiful games!!!

What exactly is the reason for implementing this

Cool and scary at the same time, within 1-2 years my grandma can do the same from ordinary chat gpt and all tech bros will be useless.

Frame by frame in JS is the wild part. That used to be an illustrator, a dev, and a month.

the check worth adding before this becomes a format: regenerate once and diff the facts, not the frames. timing is a rendering property; the claims are what have to survive when the output is teaching someone.

how did Claude manage the frame rate for such a quick animation?

With JS you mean vanilla or some Library like hyperframes or remotion?