001
ComponentFREE

Magnet Button

A pointer-aware command surface with subtle spring pull and a reactive highlight field.

NameMagnet Button
What it isA pointer-aware command surface with subtle spring pull and a reactive highlight field.
Sourcesrc/components/ui/magnet-button.tsx
View codeRaw filecopy magnet-button.tsx
atomicpointerspringbutton
stiffness
damping
mass
002
TemplatePRO

Fluid Tabs

A compact tab primitive with a liquid active indicator and keyboard-accessible roving selection.

NameFluid Tabs
What it isA compact tab primitive with a liquid active indicator and keyboard-accessible roving selection.
Sourcesrc/components/ui/fluid-tabs.tsx
View codeRaw filecopy fluid-tabs.tsx

AtomicMotion UI

layoutId / spring / tablist

Button

magnet

Tabs

fluid

Drag

elastic

003
InteractionRE-MADE

Elastic Drag

A draggable motion object tuned for tactile resistance, visual stretch, and spring return.

NameElastic Drag
What it isA draggable motion object tuned for tactile resistance, visual stretch, and spring return.
Sourcesrc/components/ui/elastic-drag.tsx
View codeRaw filecopy elastic-drag.tsx
gesture primitivedragElastic: 0.42
elasticMove me
004
MaterialNEW

Noisy Analog Card

A frosted analog card with generated grain, adjustable transparency, tint, highlight, and hover depth.

NameNoisy Analog Card
What it isA frosted analog card with generated grain, adjustable transparency, tint, highlight, and hover depth.
Sourcesrc/components/ui/noisy-analog-card.tsx
View codeRaw filecopy noisy-analog-card.tsx
analog materialgrain 0.48
noisy signal#15bc64

Noisy Glass

A frosted analog surface with soft static, color wash, and pointer-reactive depth.

opacityblurborder
NEWMaterial

Noisy controls

Adjust material properties in real time.

Tint

Highlight