interior[.]dev

Why this exists

None of these are hard components. That is exactly the problem. Every team writes them, nobody is given a week to write them, and so they ship at eighty percent and stay there for the life of the product.

Nobody chooses a product because its accordion animated well. But people do quietly decide software is cheap, and they decide it in the first thirty seconds, from a dozen small moments that were almost right.

The three failures

Almost every animated component library ships all three. They are not hard problems. They are just invisible until they are not.

  1. 1

    The button jumps

    A label changes from Save to Saving and the button resizes, so the row beneath it moves and your cursor is suddenly over something else. Every state a component can reach has to reserve its width before it gets there.

  2. 2

    The animation cannot be interrupted

    You click again halfway through and the transition restarts from the beginning, or worse, queues. A spring should resume from wherever it currently is, because that is where the element actually is.

  3. 3

    Motion is the only channel

    With reduced motion on, most libraries either play the animation anyway or hide the element entirely. The information has to arrive either way. The trip is optional, the destination is not.

What you get

A file. Not an install, not a wrapper, not a config object with nineteen keys. You copy the source into your project and it becomes yours, including the parts you disagree with. The only thing it needs from you is motion.

Every component states what it refuses to get wrong, and the demo on its page can be replayed, because a micro-interaction you can only watch once is a screenshot with extra steps.

Ten moments

The set is not organised by widget type. It is organised by what the person is in the middle of when the interaction happens.

Action Feedback
You did something. Did it land?
Input
You are telling the system something it might reject.
Async
You are waiting, and you deserve to know on what.
Notification
The system is telling you something you did not ask for.
Overlay
Something came on top. It has to know where it came from.
Navigation
You moved. The interface should agree about where.
Scroll
You are reading, and the page is reacting to that.
Data
A number changed. Which one, and by how much?
Gesture
Your finger is on it. Physics is now part of the API.
Content
The thing itself arrives, resolves, or is missing.
Start with Poll Resultsor pick anything from the 10 sections on the left