Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsBackgrounds & visual effects

Flow Field

Fine ink strokes drifting along a slowly changing noise current with fading trails and ember accents.

Preview

Wind atlas

See where the air is going, hour by hour

Live surface winds for sailors and pilots. Follow changing conditions throughout the day.

Dense · long trails

18 kn NW

Broad currents

Gusts 26 kn

Warning

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
densitynumber8Particles per 100 x 100 px.
scalenumber260Size of a swirl in the field, in px.
speednumber40Particle speed in px per second. 0 holds still.
trailnumber0.6Trail length, 0 (short) to 1 (long).
accentnumber0.08Share of particles drawn in ember, 0 to 1.
fadebooleantrueFade the field out towards the edges.
seednumber5Seed for the field and particles.
canvasClassNamestring—Extra classes for the canvas layer.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗