# Animation Skill Corpus

> Agent-friendly animation course corpus extracted from a local mirror of animations.dev.

## How to use this corpus

- If you want a human-readable workflow first, open `/guide/`.
- Start with `/task-paths.md` when the task maps to timing, performance, accessibility, interaction design, or review.
- For specific lookups, use `/animation-index.json`, `/openapi.json`, or the SQLite artifact at `/db/animation-content.sqlite`.
- For broad context, use `/llms-ctx-full.txt` or `/animation-all.md`.
- For precise reading, open the lesson or section Markdown files under `/md/`.

## Key artifacts

- [Animation index JSON](/animation-index.json)
- [OpenAPI manifest](/openapi.json)
- [Task paths](/task-paths.md)
- [Combined context](/llms-ctx-full.txt)
- [SQLite FTS artifact](/db/animation-content.sqlite)

## Task paths

- [Timing and easing](/task-paths.md#timing-and-easing) - Use for duration, responsiveness, easing curves, and choosing between product and marketing motion.
- [Performance](/task-paths.md#performance) - Use for `transform`/`opacity`, dropped frames, hardware acceleration, React re-render costs, and layout-heavy animation risks.
- [Accessibility](/task-paths.md#accessibility) - Use for reduced motion, autoplaying media fallbacks, and smooth-scrolling decisions.
- [Interaction design](/task-paths.md#interaction-design) - Use for contextual surfaces, origin-aware motion, onboarding flows, popovers, drawers, and interruptible gestures.
- [Taste and review](/task-paths.md#taste-and-review) - Use for polishing, sequencing, brand feeling, and reviewing motion that technically works but still feels off.

## Lessons

- [Animations and AI](/md/lessons/animation-theory/animations-and-ai.md) - Animation Theory. The barriers to entry for software engineering have never been lower. Everyone can create apps thanks to AI. This means that just having a working product is no longer enough to stand out as people expect things to work. The focus has shifted to taste.
- [Intro](/md/lessons/animation-theory/intro.md) - Animation Theory. Welcome to animations.dev!
- [Practical Animation Tips](/md/lessons/animation-theory/practical-animation-tips.md) - Animation Theory. This lesson is a summary of what we learned so far in the form of practical tips, but there are also some tips we haven’t covered yet. You can treat this as a reference guide that you can come back to whenever you need to make a decision or feel stuck on an animation.
- [Spring animations](/md/lessons/animation-theory/spring-animations.md) - Animation Theory. We want to design motion that feels natural and familiar. While using the right type of easing already helps, these easings are made based on a curve and a duration. That means that we can’t create a perfectly natural motion, because the movement in the world around us doesn’t have a fixed duration.
- [Taste](/md/lessons/animation-theory/taste.md) - Animation Theory. As you go through this course, you start to understand why some animations feel right while others don’t. I show you bad and good examples and explain why the good example feels better.
- [The Easing Blueprint](/md/lessons/animation-theory/the-easing-blueprint.md) - Animation Theory. The main ingredient that influences how our animations feel is easing. It describes the rate at which something changes over a period of time. It’s the most important part of any animation. It can make a bad animation look great, and a great animation look bad.
- [Timing and purpose](/md/lessons/animation-theory/timing-and-purpose.md) - Animation Theory. When done right, animations make an interface feel predictable, faster, and more enjoyable to use. They help you and your product stand out.
- [What makes an animation feel right?](/md/lessons/animation-theory/what-makes-an-animation-feel-right.md) - Animation Theory. I’m sure you’ve seen an animation that made you think, “Wow, that feels good!”. But can you explain why it felt that way? What actually made it work? That’s what we’ll be unpacking in this lesson, why some animations feel better than others.
- [Keyframe Animations](/md/lessons/css-animations/keyframe-animations.md) - CSS Animations. Similiar to transitions, keyframe animations offer another way to interpolate between states. Before we dive deeper, let’s first understand when you should use keyframe animations over transitions.
- [The beauty of CSS animations](/md/lessons/css-animations/the-beauty-of-css-animations.md) - CSS Animations. There’s something special about CSS animations. No dependencies, no javascript, just HTML and CSS. It feels like you are writing code how it was meant to be written.
- [The Magic of Clip Path](/md/lessons/css-animations/the-magic-of-clip-path.md) - CSS Animations. clip-path is often used for trimming a DOM node into specific shapes, like triangles. But what if I told you that it’s also great for animations?
- [Transforms](/md/lessons/css-animations/transforms.md) - CSS Animations. Most animations that go beyond simple hover effects use the transform property. Before we dive deep into the world of writing animations in code, let’s first understand how transform works.
- [Transitions](/md/lessons/css-animations/transitions.md) - CSS Animations. Elements on a site often have state. Buttons might change color when hovered, a toast might change its transform values when it enters the screen. By default, changes in CSS happen instantly.
- [Morph effect](/md/lessons/dynamic-island/morph-effect.md) - Dynamic Island. This is our final piece of this component. Let’s first look at the morphing effect from Apple’s Dynamic Island again. A small disclaimer—I don’t know Swift, so I don’t know how Apple implemented it. I’ll talk about it from a Framer Motion perspective.
- [Ring view](/md/lessons/dynamic-island/ring-view.md) - Dynamic Island. Our approach to building the Dynamic Island will differ from previous exercises. Instead of step-by-step exercises, I’ll show you how I built each piece. This component is quite unusual, and some solutions are equally unconventional.
- [The Design](/md/lessons/dynamic-island/the-design.md) - Dynamic Island. The Dynamic Island will be our most challenging component in this course. At least it was the hardest one for me when I initially built it. Before we start, let’s study the design and understand why and how Apple made it.
- [Timer view](/md/lessons/dynamic-island/timer-view.md) - Dynamic Island. This view is less complicated than the ring view. It has one constant animation and 1 button animation on the left in which we animate the pause button into a play button.
- [Crossfade](/md/lessons/family-drawer/crossfade.md) - Family Drawer. I’ve updated the UI of the drawer between this lesson and the last one. This is a course about animations, so we won’t focus too much on the styling, but let’s go through it so you know what changed.
- [First animations](/md/lessons/family-drawer/first-animations.md) - Family Drawer. This component might look a bit overwhelming at first, that’s why we’ll break it down into smaller parts. I’ve also done it when I first built it.
- [The analysis](/md/lessons/family-drawer/the-analysis.md) - Family Drawer. One thing that really helped me learn animations was recreating some of the best ones. The key to a good recreation is figuring out why an animation feels right—like which properties are being animated, what kind of easing or spring is used, and so on.
- [The finishing touch](/md/lessons/family-drawer/the-finishing-touch.md) - Family Drawer. We have our height and crossfade animations working, but it doesn’t feel quite right yet. The drawer is too slow at the moment, it feels kinda robotic and the easing could be improved as well.
- [Animating in public](/md/lessons/framer-motion/animating-in-public.md) - Framer Motion. I got my first job at an American start up through Twitter, because I shared my work there.
- [Feedback popover](/md/lessons/framer-motion/feedback-popover.md) - Framer Motion. A button that morphs into a popover.
- [Hooks and animations](/md/lessons/framer-motion/hooks-and-animations.md) - Framer Motion. We’ve now animated things mainly using initial, animate and exit props. While these props are very powerful, and I personally use Framer Motion this way ~90% of the time, this library has more to offer.
- [How do I code animations](/md/lessons/framer-motion/how-do-i-code-animations.md) - Framer Motion. In this lesson, we’ll cover some of the advanced features of Framer Motion that I often use.
- [Interactive graph](/md/lessons/framer-motion/interactive-graph.md) - Framer Motion. In this lesson we’ll create an interactive graph to solidify our understanding of the hooks we just learned, but also to learn an additional hook. As always, it’s a real-world example, you can see a very similar component on Linear’s features page. This is how the end result will look like:
- [Multi-step component](/md/lessons/framer-motion/multi-step-component.md) - Framer Motion. Usually in this step we would explain why this thing exists and what it does. Also, we would show a button to go to the next step.
- [The Basics](/md/lessons/framer-motion/the-basics.md) - Framer Motion. While Framer Motion is a very powerful animation library and is relatively easy to start with, it still differs from CSS animations. We’ll go over the basics first and get comfortable with the library.
- [Trash interaction](/md/lessons/framer-motion/trash-interaction.md) - Framer Motion. To get the codebase running locally, you first need to download it here. We switched from a GitHub repo, because it would be quite problematic to keep it private.
- [Why Framer Motion](/md/lessons/framer-motion/why-framer-motion.md) - Framer Motion. Framer Motion allows us to create very impressive, native-like animations with not a lot of code. Because of that, many things happen magically, and once you run into an issue it can be hard to debug.
- [Accessibility](/md/lessons/good-vs-great-animations/accessibility.md) - Good vs Great Animations. The interactive examples and code snippets in this article are crucial to understanding the concepts like in the last lesson, so this one is text-based as well, but there is an exercise with a video for the solution.
- [Animations of the future](/md/lessons/good-vs-great-animations/animations-of-the-future.md) - Good vs Great Animations. Static transitions can disrupt the user’s sense of flow and orientation. You should envision your interface as a constantly evolving space, where any element can transform into another.
- [Performance](/md/lessons/good-vs-great-animations/performance.md) - Good vs Great Animations. The interactive examples in this article are crucial to understanding the concepts, which is why I decided to make this lesson text-only.
- [The big little details](/md/lessons/good-vs-great-animations/the-big-little-details.md) - Good vs Great Animations. We’ve talked about the theory behind good animations and how to actually code them. Now it’s time to talk about the details that separate good animations from great animations. And we’ll start with feeling.
- [Click animation](/md/lessons/hero-illustration/click-animation.md) - Hero Illustration. In this lesson we’ll build the click animation. We’ll layer transform-based animations, path morphing, and stroke dash effects with careful timing to make everything feel unified.
- [Clock animation](/md/lessons/hero-illustration/clock-animation.md) - Hero Illustration. This clock has a fun easter egg - click it and the hands will spin to show you the actual time. We’ll build this animation step by step: bells swinging sideways in idle state, alarm going off on hover, current time animation on click and feedback on subsequent clicks.
- [Lines and dashes](/md/lessons/hero-illustration/lines-and-dashes.md) - Hero Illustration. You’ve probably seen this effect before, a path that looks like it’s drawing itself. Loading spinners, signature animations, icon reveals. It’s everywhere. In this case, it’s the hand’s rays.
- [Polish](/md/lessons/hero-illustration/polish.md) - Hero Illustration. The clock works. It responds to hover, animates the hands to the current time, handles all the interactions. But something’s missing. That subtle aliveness you see in UIs that truly stand out. Let’s improve it!
- [Rotation](/md/lessons/hero-illustration/rotation.md) - Hero Illustration. So, we know how to position shapes and animate lines. Now let’s rotate them. Click the clock below to see the hands rotate around the clock center.
- [SVG Introduction](/md/lessons/hero-illustration/svg-introduction.md) - Hero Illustration. A while back me and dimi worked together on some animations of the illustrations on animations.dev. Hover on each of the boxes above to see the animations in action. This walkthrough will cover how we animated some of them.
- [Interviews/Dennis Brotzky](/md/lessons/interviews/dennis-brotzky.md) - Interviews. Brotzky is an engineer who loves design. He is also the co-founder of Fey, an app that helps you make better investments.
- [Interviews/Henry Heffernan](/md/lessons/interviews/henry-heffernan.md) - Interviews. Henry is a design engineer working at Vercel. He contributed to a lot of Vercel’s new marketing pages, Next.js Conf, etc. He also has a very impressive personal site. In this interview, we’ll talk about animations, easings, design engineer in general and how he got his job at Vercel.
- [Interviews/Lochie Axon](/md/lessons/interviews/lochie-axon.md) - Interviews. Lochie is a design engineer working at Avara. He built the Family site, and docs, ConnectKit, Avara’s site, and many other great things. In this conversation we’ll how Lochie got into design engineering, how he thinks about animations, and how he builds them.
- [Interviews/Mariana Castilho](/md/lessons/interviews/mariana-castilho.md) - Interviews. Mariana is a Brazilian product designer currently working at pooolside. She created a project called uilabs.dev where she shares her UI explorations. In this interview we are going to talk about product design, how she learned to code as a designer, and how that influenced her design proces
- [Animating the menu](/md/lessons/navigation-menu/animating-the-menu.md) - Navigation Menu. Let’s try and build our menu. This is how our menu will look like after we’re done with the exercises:
- [Closing thoughts](/md/lessons/navigation-menu/closing-thoughts.md) - Navigation Menu. Our menu is basically finished at this point. In this lesson I’ll discuss a small improvement we can make and we’ll talk about choosing libraries.
- [Know your tools](/md/lessons/navigation-menu/know-your-tools.md) - Navigation Menu. Let’s assume we work on the marketing team at a company and we are tasked with creating a navigation menu with multiple dropdowns. How would should we go about this?
- [animations.dev](/md/lessons/resources/animations-and-ai.md) - Resources. All you need to know before getting started.
- [animations.dev](/md/lessons/resources/easing-curves.md) - Resources. These custom curves are made by Benjamin De Cock. I use these often if a built-in easing curve is not strong enough. We also use them at Linear.
- [animations.dev](/md/lessons/resources/emil-skill.md) - Resources. A comprehensive skill for agents based on my years of design engineering experience. Meant to instantly improve the quality of your output, whether it’s design or code.
- [Interviews](/md/lessons/resources/interviews.md) - Resources. Talking about animations, design, taste, career, and more.