Build the Thing That Made You Stop Scrolling
Saving posts is a lie we tell ourselves. It feels like learning. It is not.
You can fill folders with beautiful animations you will never open again. Watch every breakdown. Fill every mood board. But you do not learn motion by watching it. You learn it by building it badly, then less badly, then almost right.
So I have one rule. Anything that makes me pause mid-scroll and think "how the hell did they do that?" I rebuild it. Not tomorrow. Now. While I still have the itch.
The Animation
A few days ago I was on X and hit a post by @eliguerron. It was one of those animations that does not just move. It breathes. Elements sliding in with that perfect weight, the timing between states feeling almost physical.
I watched it maybe fifteen times. Then I stopped.
First Instinct: Let the Agent Handle It
I wanted to test something. How smart are AI agents at animation if you just give them the reference and get out of the way?
I grabbed a few screenshots. Different frames, different states. Wrote a minimal prompt. Gave it space. Waited.
Create a dictation style text animation. The text begins in the top left corner, like words appearing on a sheet of paper, and progresses downward line by line.
The text should appear in exactly three lines:
This is an example of dictation. As I speak, the words start to magically appear in front of me.
The words should not be drawn letter by letter. Instead, each word should reveal as a full word. The animation should calculate the width of each word, then move the caret rapidly to the end of that word, creating a fast, energetic reveal effect.
As the caret moves, the word is revealed using a stepped transparent gradient mask. The gradient should start with the lowest transparency near the beginning of the reveal and gradually increase toward the end, where it becomes the most transparent. This should create a magical, high speed reveal trail.
The caret should have a vivid cyan and purple animated gradient. Its color should shift smoothly while it pulses slightly based on each word. Add a subtle screen glow around the caret, but keep it soft and not too harsh.
When the caret reaches the end of a line, it should jump instantly to the beginning of the next line. The line change should feel direct and immediate, with no smooth transition between lines.
The overall motion should feel clean, magical, modern, and smooth, like a futuristic dictation effect where spoken words appear in real time.
The result came back fast. And it was not even close.
The agent produced something that moved, but it completely missed the weight. The timing felt random. The elements appeared in the wrong order. It was like describing a song to someone who has never heard music and asking them to hum it back.
That failure was the real starting point. AI can see the frames, but it cannot feel the gaps between them.
Break It Down First
So I closed the agent and opened a blank page. I started drawing.
How many elements enter? What is the delay between the first and second? Does everything ease out, or does the last element snap while the first one floats? Where exactly do the layers overlap?
This part is boring. It is also the entire difference between a copy and an understanding.
When you look at motion this way, you start seeing the invisible structure. The 200ms gap that feels like nothing to a viewer but changes everything to a user. The curve that looks linear but is actually a custom cubic-bezier. I mapped it all out. Then I went back to the agent.
Iteration
Now I had language. Not "make it smooth." Actual measurements.
The first result was wrong in a specific way. I could see exactly where the gap was. So I tried again. Better. Closer. Still not there.
Each round taught me what I actually needed to ask for. I stopped saying "make it smoother" and started saying "delay the second element by 150ms, ease-out on scale, spring on translate."
It will not be perfect. Mine was not. But now I know how the pieces fit. I can feel the timing in my hands.
Each round got more specific because each result taught me what I actually needed to ask for. I stopped saying "make it smoother" and started saying "delay the second element by 150ms and use an ease-out curve for the scale while the translate uses spring physics."
It will not be perfect. Mine was not. It never is. But now I know how the pieces fit. I can feel the timing in my hands. That is the point.
What AI Still Does Not See
Even with reference images, even with my analysis, getting the micro-interactions right was like pulling teeth. There are details in motion that seem so obvious to human eyes that you assume they do not need explanation. The exact overlap. The specific easing curve. The non-uniform stagger.
To AI, these details are invisible. They are not implied. They must be explicitly described, measured, and forced into place.
Micro-interactions remain a real weakness. Feed an agent ten screenshots and ask it to replicate the animation, and you will get something that moves, but not something that feels right. It needs the human eye. It needs the person who can look at two versions and say "this one is 12 milliseconds too slow" and know why that matters.
The Takeaway
Design engineers still have a beautiful runway ahead. AI is an incredible tool. But the gap between what a human perceives and what a model understands is still wide. That gap is your job. That gap is the work.
Do not save posts for later. Do not add them to a mood board and call it research.
Build the thing that made you stop scrolling.