Reading up on animation
9 deep · digging since nov 23, 25
- Every Frame Perfect
A Hacker News discussion pushes back against the article's premise that every animation frame must look perfect in isolation, arguing motion blur and temporal effects make intermediate frames acceptable.
- CSS vs. JavaScript
CSS animations run off the main thread so they don't freeze during JS work, but libraries like Motion use the Web Animations API to avoid that pitfall.
- Agents with Taste
Engineers can encode their design taste into structured skill files for AI coding agents, enabling agents to produce visually refined results by following explicit rules for animations, typography, and layout.
- Morphing Icons with Claude
Using Claude Code, the author built a universal icon component where any of 21 icons can smoothly morph into any other by representing each as exactly three SVG lines and using rotation groups for same-shape icons.
- Show HN: Fanfa – Interactive and animated Mermaid diagrams
Fanfa is an open-source tool that animates static Mermaid.js diagrams with a motion engine, supporting video export and AI-assisted design.
Takes
New skill: /animation-vocabulary Helps you get better animations from an AI by telling it exactly what you want by using the right words. "morph", "rubber-banding", "layout animation", and more.
@emilkowalski
How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1<br/>read-only] t2[Tier 2<br/>in-project writes] t3[Tier 3<br/>everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into @mattpocockuk `/grill-with-docs` and
@delba_oliveira
Introducing text-to-lottie: an open source skill and harness for generating production ready Lottie animations with codex/claude code. $ npx skills add diffusionstudio/lottie Prompts guide and repo in the comments.
@konstipaulus
Yep!https://t.co/9vIP3i0Ffu
@RealAstropulse