---
title: "Coalesce"
canonical_url: "https://framerhub.io/components/coalesce"
last_updated: "2026-06-15T14:46:29.075Z"
---

## Coalesce

Create a hypnotic visual center with Coalesce. This effect features thousands of geometric particles spiraling inward, creating a sense of depth and focus that draws the user's eye to the center of your screen.

## Features

**Geometric Spirals**
Particles aren't just dots—they are rotated squares that leave trails, creating a unique structure to the chaos.

**Focus Inducing**
The inward motion naturally guides viewer attention to the center, making it perfect for framing key messages or logos.

**Rich Compositing**
Uses multiple blur layers and additive blending to create a glowing, ethereal look that feels organic and high-tech.

## Use Cases

**Hero Backgrounds** — Create a mesmerizing focal point that draws attention.

**Landing Pages** — Guide users visually toward your call-to-action.

**Loading States** — Keep users engaged with hypnotic particle animation.

**Product Showcases** — Frame your product with dynamic energy.

![Coalesce Preview](/framerhub/img/components/control/coalesce.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 Coalesce 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

Customize the appearance and behavior using Framer's property controls.

**Color Settings**

- Base Hue: Starting hue color (0-360)
- Hue Range: Color variation from base
- Saturation: Color intensity (0-100%)
- Lightness: Color brightness (0-100%)

**Particle Settings**

- Intensity: Particle count multiplier
- Base Size / Size Range: Particle dimensions
- Base Speed / Speed Range: Movement speed

**Effects**

- Blur 1 & 2 Amount: Dual glow layer strengths
- Opacity: Overall transparency

### Quick Tips

**Best Performance** — Keep intensity at 1 or below for smooth animation.

**Color Combinations** — Orange/red hues (10-30) with wide range create fire-like effect. Blue hues (200-240) feel more cosmic.

**Layering** — Place content above the component. Center your logo or CTA for maximum impact.

**Blur Settings** — Higher blur creates softer glow, lower blur creates sharper particles.

## License

**Free Component** — Use freely in personal and commercial projects.

## 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!

## Credits

[Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743).

---