interior
micro-interactions for react, built for the half-second after a click
What is it?
What it is
A collection of micro-interaction components for React designed to handle the complex edge cases of UI motion and state transitions.
Why it exists
To solve the 'issing twenty percent' of component development—addressing issues like layout jumps, improper restarts, and non-physical animations that degrade user trust.
Who should use it
React developers building polished UI who want fine-grained micro-interactions and prefer a headless, copy‑paste approach
Who should avoid it
Teams looking for a full‑featured component library with pre‑styled elements, non‑React projects, or those who want a zero‑dependency installable package
How it works
A quick walkthrough in plain English
How interior works
Step 1 of 3
You interact with it
Open interior, send a request, or connect it to your stack.
Features
Advantages
- Zero runtime overhead beyond motion – you only include what you copy
- Easy to redesign with your own classes or CSS
- Improves perceived trust via polished micro‑interactions
- Accessible out of the box (keyboard, reduced motion)
- Framework‑agnostic hook logic can be reused
- No locking into a specific UI library
- Simple setup – just bun install and run dev for docs
Disadvantages
- No distributed package – manual file copying required for updates
- Primarily React‑centric (hook may need porting for other frameworks)
- Relies on framer‑motion as the only animation engine
- Limited set of pre‑built components compared to larger libraries
- Documentation assumes familiarity with motion and hooks
- Versioning must be managed manually when copying files
Installation
cloud
N/A
docker
N/A
native
bun install bun run dev
compose
N/A
FAQ
What is interior and what problem does it solve?
Interior is a collection of micro‑interaction components for React that focus on the half‑second after a click. It addresses the common missing 20% of interactions—jumps, restarts, and animations that ignore the user—by providing physics‑based, state‑reserved motion that behaves consistently across all states.
How do I add a component to my project?
Each component lives in a single file under `components/interior/`. Copy the file you need into your project, then import the headless hook (`useX`) and the styled component (`X`). The hook owns all behaviour, while the styled component is just an example you can keep or replace.
What dependencies are required?
The only runtime dependency is `motion` (https://motion.dev). No other packages are needed, and the components are pure TypeScript files.
Can I customize the look of a component?
Yes. The hook exposes all state and does not touch class names. You can style the component by passing your own class names or by creating a new styled component that uses the hook, allowing you to match your design language without changing the behaviour.
How do I run the documentation locally?
Run the following commands in the repository root: `bun install` to install dependencies, then `bun run dev` to start the local dev server. The docs are served automatically and reflect any changes you make.
Does interior respect reduced motion preferences?
Yes. Under `prefers-reduced-motion` the motion is skipped, but the information still arrives via the component’s state changes, ensuring accessibility while preserving the interaction flow.
Featured in Videos
YouTube tutorials and walkthroughs for interior
Alternatives
Similar projects ranked by category, topics, and text overlap.
