Philosophy

Motion is a conversation, not a performance#

Most animation on the web is a performance: something decides in advance what will happen, presses play, and the person watches. A 300 ms slide. A 600 ms fade. The interface talks; the person waits.

interanimate starts from the opposite premise. Interface motion is a conversation. The person acts, the interface answers, the person acts again — often before the interface has finished answering. A good conversational partner responds immediately, never talks over you, can change course mid-sentence, and knows when to say nothing at all.

This framing comes from Apple's work on fluid interfaces, which describes animation as an ongoing exchange between a person and an object rather than something the interface prescribes. When an interface behaves this way, it stops feeling like a machine you operate and starts feeling like an extension of your own movement.

Everything in interanimate follows from taking that idea seriously and making it the default.

The three pillars#

The twelve principles group under three pillars. If you remember nothing else, remember these.

1. Respond#

The interface answers immediately — or not at all.

Response is the foundation everything else sits on. Humans perceive a response within roughly a tenth of a second as caused by themselves; beyond that, they feel the machine. So acknowledgment happens on the press, not the release. Motion never sits between a person and the result they asked for. And when motion would only slow a frequent action down, the right response is no motion.

Principles: Respond first · Purpose or nothing · Frequency sets the budget · Fast is a feature

2. Continue#

Nothing jumps, nothing restarts, nothing waits.

Values on screen are continuous. When motion is interrupted, it continues from exactly where it is, at exactly the speed it was going. When a finger lets go, the finger's velocity carries into the animation without a seam. Objects come from somewhere and go somewhere, and the path tells you where. The user can grab anything that's moving, at any moment.

Principles: Never lock the user out · Continuity of value and velocity · Behavior over timelines · The hand is the source of truth · Every motion has an origin and a destination

3. Respect#

Motion is for the person, on their terms.

Motion spends a person's attention, time, and — for some people — physical comfort. It must earn that cost. Restraint is the default and expressiveness is earned. Motion is always optional; meaning never depends on it. And the experience has to hold up on a slow phone, a low battery, and a person mashing a button.

Principles: Restraint by default, expression earned · Motion is optional, meaning is not · Smooth under stress

Three questions before anything moves#

Every motion in an interanimate interface should be able to answer three questions, in this order. The framework's defaults answer them for you; when you override a default, you're answering them yourself.

1. Why does this move? Name the purpose — feedback, orientation, state change, attention, or delight. If there is no purpose, nothing moves.
2. How often will someone see it? Frequency sets the budget. Things seen hundreds of times a day get no motion; rare moments may get more.
3. What happens if they don't want it? Every motion has a defined reduced-motion behavior before it ships.

Design stance#

A few positions interanimate takes deliberately, so contributors and users know what to expect:

• Opinionated defaults, unopinionated ceiling. The intent layer is strongly opinionated. The layers underneath are not. Anyone can drop down a layer; nobody should have to.
• Behavior over appearance. The framework specifies how things move and respond, never how they look.
• Physical, not literal. Motion borrows the feel of the physical world — mass, momentum, resistance — because people already understand it. It does not simulate reality for its own sake.
• The platform is a partner. Where the web platform provides a capability natively (transitions, view transitions, scroll timelines, user preferences), interanimate's model maps onto it rather than competing with it.
• Grounded in sources. Every principle cites where it comes from. Where the framework departs from a source, it says so and says why.