Card Fan
layer separation / reflowCurated studio deck: 1 of 4 selected
Showcase
These are compositions, not new components — the same four building blocks arranged differently. Every example on this page is live.
Studio
$24/ month
Glow Border framing a Jelly Card, with a magnetic action inside.
<GlowBorder radius="2xl">
<JellyCard radius="2xl" elasticity={0.25}>
<Plan />
<MagneticButton>Choose plan</MagneticButton>
</JellyCard>
</GlowBorder>Soft Motion
Volume One
Tilt with a specular highlight, wrapped in a magnetic field.
<Magnetic strength={0.25}>
<Tilt max={8} glare lift={10}>
<Cover />
</Tilt>
</Magnetic>7 interactions tuned this week.
Fluid Tabs driving real content, inside a cursor-lit panel.
<CursorGlow>
<FluidTabs items={views} onValueChange={setView} />
</CursorGlow>Three magnetic fields side by side, each with its own strength.
{reactions.map((r) => (
<Magnetic key={r} strength={0.5} range={90}>
<button>{r}</button>
</Magnetic>
))}Interaction studies / 04
A compressed deck, a wider field, a held tension and a tracked edge — all inspectable before leaving the page.
Card Fan
layer separation / reflowCurated studio deck: 1 of 4 selected
Infinite Spatial Canvas
pan / depth / momentumDrag or use the arrow keys to browse the spatial field. Focus an item to inspect it. Home or 0 recenters the field.
Zoom 100% · 4 items
No spatial item selected
Pull to Refresh
resistance / threshold / releaseDemo refreshes / 0
Edge Swipe Panel
progressive reveal / settlementWorking surface
The surface yields a little as the edge panel enters the field.