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

• Trigger Scatter

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.

  Run Agent

• Loading State — with FragmentOrbit

• Loading executions...

• Hero Section — with AsteroidField background

Build AI Agents in Minutes

Automate any browser workflow with Asteroid.

Get Started

• Error Page — dispersed FragmentCluster

• 404 — Page not found

This page drifted into the void.