Skip to content
Pinky UI

Pinky UIv0.1

UI that likes
to move.

An open-source React interaction system — real UI, already moving, ready to touch.

Explore

Jelly Card

Move across
this card.

The surface leans toward you, drifts a little, and settles on a spring.

elasticity 0.4 · intensity 0.2

Fluid Tabs

Written for developers — and coding agents.

356 public skill routes backed by plain markdown: what a component is for, when it is the wrong choice, and how much motion is too much.

Read the skills

packages/skills/components/jelly-card.md

# Jelly Card

## Avoid for

- forms and input-heavy panels
- dense data tables
- long repeated lists

Signature interactions

Gallery ↔ List

4 items · gallery

  • Arrival

    soft light

  • Commons

    shared space

  • Threshold

    quiet edge

  • Work table

    clear focus

Card Fan

Curated studio deck: 1 of 4 selected

Morph Lightbox

Morphing Input

Completion Morph

Save draft

Start the action to see the surface transform.

Anchored Inspector

Search Morph Header

A room for work

Editorial study · 04 min

Surface notes

Product rhythm · 08 min

Motion review

Interaction study · 06 min

Command Palette

Or press ⌘K. The surface owns focus, filtering and Escape.

Mobile touch signatures

Morphing nav

Bottom search

Detent sheet

Swipe actions

Archive project

Swipe left, or use the action.

Swipe partially to reveal, further to commit.

Long-press select

Tap or hold a row to select it.

Everything above is one screen of it.

Explore everything

Arrangements and product moments.

See the rest
6 items · stack

  • Motion

  • Surfaces

  • Light

  • Depth

  • Layout

  • Controls

Stack to Grid

Inline Edit

Workspace name

Click the value to edit.

Click to edit

Expanding Search

Built in the open, one interaction at a time.

View on GitHub
Browse components