Asteroid Fragments

Composable brand motifs — asteroid chunks that float, orbit, cluster, and scatter

Fragment Shapes

7 procedural irregular polygons — the atomic building blocks

alpha
beta
gamma
delta
epsilon
zeta
eta

Sizes

xs (8px) → sm (16px) → md (24px) → lg (32px) → xl (48px)

xs
sm
md
lg
xl

Colors

Semantic token variants — primary, secondary, muted, foreground

primary
secondary
muted
foreground

Asteroid Field

Scattered background decoration with slow drift — sparse, medium, dense

sparse (8 fragments)
medium (16 fragments)
dense (28 fragments)

Fragment Cluster

Grouped fragments forming a loose cloud — for empty states and accents

count=3, spread=40
count=5, spread=60
count=8, spread=70, secondary

Fragment Orbit

Orbital loading indicator — fragments circling a center point

56px · 5
100px · 8
160px · 12

Fragment Scatter

Burst animation triggered on demand — for success and celebration moments

Fragment Accent

Static decorative punctuation placed at container corners

Top-Right Accent
Two fragments tucked into the corner

Fragments add subtle personality to cards and containers without competing for attention.

Bottom-Left Accent
Three primary-colored fragments

Positions: top-right, top-left, bottom-right, bottom-left. Color and count are configurable.

Composition Examples

Realistic usage — fragments in empty states, loading overlays, and hero sections

Empty State — with FragmentCluster

No executions yet
Run your first agent to see results here.

Loading State — with FragmentOrbit

Loading executions...

Hero Section — with AsteroidField background

Build AI Agents in Minutes

Automate any browser workflow with Asteroid.

Error Page — dispersed FragmentCluster

404 — Page not found

This page drifted into the void.