interior[.]dev

Micro-interactions for React, built for the half-second after a click.

Everybody builds these components. Almost nobody finishes them. The missing twenty percent is always the same three things: a jump, a restart, an animation that ignores the person watching it. This set ships that last twenty percent.

How it works

There is no package. Every component is one file in components/interior/ [blocked] that you copy into your project. Each file exports two things:

a headless hook (useX) that owns all the behaviour and touches zero class names
a styled component (X) built on the hook, as an example you can keep or replace

The behaviour lives entirely in the hook, so reskinning a component to your own design language costs nothing but classes. The only dependency is .

The idea

Trust is won in the half-second after a click, and lost in exactly the same place. A button that resizes when its label changes, a list that jumps as it loads, a drag that gets stuck because the tab lost focus: none of these are bugs anyone files, but every one of them teaches the person to stop believing the interface.

So every component here is argued out to the frame. Nothing moves unless something happened; motion that models a physical process obeys that process instead of taste; every state the component can reach has its space reserved before it arrives; and every gesture knows all the ways it can be abandoned. The keyboard is not a fallback but a second complete implementation, and under prefers-reduced-motion the information still arrives; only the trip is skipped.

Running the docs

The design language behind every decision lives in DESIGN.md [blocked].