---
title: "Bokeh Orbs"
canonical_url: "https://framerhub.io/components/bokeh-orbs"
last_updated: "2026-06-15T14:46:28.911Z"
---

## Bokeh Orbs

Create an elegant atmosphere with soft, floating bokeh orbs. Perfect for adding subtle motion to backgrounds without distracting from content.

## Features

**Elegant Motion**
Smooth sine-wave based floating animation that feels natural and calming.

**Color Modes**
Choose between a vibrant **Rainbow** mode where each orb gets a unique hue, or **Single** mode to match your brand color.

**Customizable**
Adjust the orb count, size, opacity, and animation speed to dial in the perfect look.

**Performance Optimized**
Automatic canvas/preview optimization reduces GPU load during design time.

## Use Cases

**Hero Sections** — Add ambient movement to landing page backgrounds.

**About Pages** — Create a subtle, calming atmosphere.

**Loading States** — Provide visual interest while content loads.

**Event Pages** — Set a festive or elegant mood.

![Bokeh Orbs Preview](/framerhub/img/components/control/bokeh-orbs.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Bokeh Orbs in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Colors**

- Set the background to match your section
- Choose Rainbow for multi-colored orbs or Single for brand-matched colors

**Animation**

- Adjust Speed for faster/slower floating
- Modify Amplitude for larger/smaller vertical movement
- Change Spread to control horizontal spacing

### Quick Tips

**Best Performance** — Keep orb count between 5-10 for smooth animation on most devices. Reduce to 3-5 on mobile for optimal performance.

**Color Combinations** — Dark backgrounds (black or deep blue) make orbs pop. Try matching orb color to your accent color for cohesion.

**Layering** — Place content above the component. White text with subtle shadows provides best readability.

**Speed Settings** — Start with default speed (1.0). Slower speeds (0.5-0.8) feel more elegant, faster speeds (2.0+) add energy.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Bokeh Orbs brings that dreamy, out-of-focus light effect seen in professional photography to your web designs—without the complexity of WebGL coding. Just drop it in and customize.

---