Card flip. Two faces, one rotation.
Two slots per card — front and back — with a single 3D rotation between them. Hover, click, an interval timer, or a staggered stack on entry. Reduce-motion users see both faces stacked, no rotation.
Hover flip
Default axis is Y. Front and back are independently styled.
Galaxy
Hover to reveal
The base canvas — deepest ink, lowest elevation. Everything else rises from here.
#07060f
Nebula
Hover to reveal
First elevation — for panels, cards, and recessed wells.
#0f0d1d
Aurora
Hover to reveal
The active surface — modals, popovers, the layer the cursor expects to live on.
#181530
Click flip · toggle
Tap or click to flip. Tap again to return. Keyboard-enabled via tabindex.
What runs at 60fps?
Click to reveal
Transforms and opacity. Anything else, you’re paying for layout. Click to flip back.
Why containers?
Click to reveal
Because the viewport doesn’t know what you’re putting inside it. The container does.
Axis variants
Y is the default. Switch to X for vertical flips or corner for a diagonal hinge.
X · vertical
Hover to flip
Top edge becomes the bottom edge. Reads like a card folding forward.
Corner
Hover to flip
Diagonal hinge. Showier — use sparingly, when the card is the moment.
Stack · staggered entry
Cards flip in on page load with a 140ms cascade.
Atom
tokens
Single-value primitives: a color, a spacing, a duration.
Molecule
primitives
Buttons, inputs, chips — tokens combined into a single interface element.
Organism
sections
Heroes, pricing tables, footers — primitives composed into a page region.
Body
pages
A sequence of sections, with continuity through surfaces and motion beats.
Usage
- Two faces required:
.cf__face--frontand.cf__face--back. - Trigger modifier:
.cf--hover,.cf--click,.cf--auto. - Axis modifier:
.cf--x,.cf--corner(default is Y). data-flipwires click toggling; reduce-motion users see both faces stacked vertically.