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

Beams Background

Soft diagonal light shafts that drift and breathe behind content, in ember or neutral tones.

Preview

BetaDaylight sync for teams

Plan your day around the light you have

Meetings drift to the brightest hours. Deep work keeps the quiet ones.

Sunrise · Lisbon

07:41

Neutral · from below

Golden hour left

42 min

Live

Install

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

Props

PropTypeDefaultDescription
tone"ember" | "neutral""ember"Colour of the light: warm ember or neutral daylight.
countnumber6Number of shafts, 1 to 8.
anglenumber18Angle of the shafts from vertical, in degrees. Positive leans right.
intensitynumber0.6Strength of the light, 0 to 1.
speednumber1Drift speed multiplier. 0 holds the shafts still.
origin"top" | "bottom""top"Where the light comes from.

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 ↗