Docs · a calm starting point
Get started with the interaction in view.
This page describes the public catalogue and how to use it — with the interaction in view.
Installation
Pinky UI is source-first today. The seven @pinky-ui/* packages are prepared for public release but are not published to npm yet. Clone the repository to run the live site and copy a pattern into an application when you are ready; after npm publication, the package READMEs will show the normal registry installation commands.
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev
# open http://localhost:3000Composition
Primitives own one behaviour each and pass everything else through, so they stack. A component is a composition someone made for you; you can always make your own.
import { Magnetic, Jelly } from "@pinky-ui/primitives";
<Magnetic strength={0.4}>
<Jelly elasticity={0.35}>
<button type="button">Explore</button>
</Jelly>
</Magnetic>Live composition
Two small behaviours, one semantic button: move nearby, then press or focus it.
state: ready
Motion rules
Motion responds, it does not perform
Animation answers a pointer, a focus, a state change or a navigation. Continuous ambient animation with no cause is not used.
Small movement, strong perception
Hover translation stays at or under 8px, scale at or under 1.04, rotation at or under 4°. Primitives clamp their own output rather than trusting the caller.
Springs, not long easings
Every component reaches into one shared spring vocabulary — soft, snappy, glide, jelly, subtle — so unrelated parts of a page feel related.
Reduced motion is a first-class state
Every component branches on prefers-reduced-motion and renders a complete, static, fully usable version. Nothing is hidden or broken by turning motion off.
No layout instability
Interaction effects are transforms, opacity and CSS variables. Nothing an interaction does can move the elements around it.
Accessibility
Effects never replace semantics. Buttons are buttons, tabs implement the ARIA tabs pattern, decorative light is aria-hidden and non-interactive, and every pointer-driven effect has a state it degrades to for keyboard, touch and reduced-motion users.
Theming
Three light environments — milk, blush and cloud — retint the page atmosphere and the accent. They are not three design systems: components read the same tokens in all of them. Switch between them with the control in the header.
Status
Public catalogue: 33 components, 12 primitives, 28 layouts, 35 effects, 32 experiences and 161 product and workflow systems — 301 in all. Everything listed on this site has an implemented source entry and a documented import path; the repository is the current distribution surface.