Foundation
GO Analog
Flourish · the travel layer

Cards move like handled paper.

Press physics covers in-place state. Flourish covers travel— an element entering, leaving, or changing place. Four rules: travel gets one spring settle and never a wobble; direction carries meaning (sent → up, filed → right, set aside → left); a held card lifts and tilts with the hand's velocity; siblings make room by moving. Every flourish honors prefers-reduced-motion.

Tokens

One spring, two clocks

--spring (linear() curve, back-out fallback) with --dur-travel: 500ms for click-driven travel and --dur-unfold: 700ms for hover-driven reveals — the hand is browsing, not commanding. From Tailwind: ease-spring, duration-travel, duration-unfold.

ease-settle vs ease-spring · both duration-travel (500ms)
ease-settle
card
ease-spring
card

The spring lands with one ~9% settle and is done by 85% of the duration — motion for things that change place. In-place state (press, hover) keeps the settle curve and never springs.

Entrance

Settle in

New cards settle onto the surface with the spring, staggered 55ms apart.

.settle-in · --i staggers 55ms per card, self-capped at 8
8:00 am · card 1
Morning summary
8:00 am · card 2
Promise tracker
8:00 am · card 3
Weekly spend report
8:00 am · card 4
Stale PR alert
8:00 am · card 5
Rent reminder
8:00 am · card 6
Word of the day
Exits

Leave toward where the action went

Exits accelerate — things being carried away gather speed — with a slight tilt in the direction of travel. The dashed slot is the card's origin, waiting until the app removes it.

.send-off · sent → up
thread · 2 messages
Re: Thursday works — see you then
.file-away · filed → right
thread · 2 messages
Re: Thursday works — see you then
.set-aside · set aside → left
thread · 2 messages
Re: Thursday works — see you then
Collections

Deck & fan

A collection at rest is a deck — edges peeking, count shown. On demand it fans like a held hand of cards, and collapses back.

.deck-edges + .deck-count · a collapsed stack says what it holds
10:00 am · weekly
Slack channel summary
+2 hidden

Edges tint from --deck-edge-1/2 when the hidden sheets have identity colors; the count chip is the honest version of a mystery pile.

.fan-item + fanAngles(n, arc) · the deck spreads like a held hand

Click the pile. Origin sits at 50% 135% — a wrist pivot, not a spin.

Velocity drag

The card follows the hand

Drag lifts the card onto a deeper hard shadow; tilt is proportional to pointer velocity; the destination reads as a mono ghost label. Release is momentum-projected — a flick commits.

use-velocity-drag · tilt follows hand speed; momentum finishes the throw
drag me · left or rightthread
Fringe Sport — your order shipped

Grab the header. A slow drag needs the full distance; a flick commits on velocity alone — where the card was headed, not where it stopped.

Reflow

Siblings make room

Auto-FLIP measures keyed children every commit and plays position changes as spring transforms.

use-auto-flip · siblings make room by moving, never teleporting
Blue Trust kickofffirst
Payroll reminder
Trail Life forms
Elder meeting notes
Vercel invoice
Ship it

In your app

JS runtime — the motion registry item
pnpm dlx shadcn@latest add @goian/motion

# lib/motion.ts        tokens · springEase · flyOut · settleBack · fanAngles
# hooks/use-velocity-drag.ts
# hooks/use-auto-flip.ts
CSS — ships in the foundation ≥ 0.7.0 (and the theme item)
.settle-in            entrance (+ --i stagger)
.send-off / .file-away / .set-aside   exits
.drag-handle / .drag-lift / .drag-label / .drop-slot
.deck-edges / .deck-count / .fan-item
ease-spring · duration-travel · duration-unfold