---
title: "Swirl"
canonical_url: "https://framerhub.io/components/swirl"
last_updated: "2026-06-15T14:46:31.770Z"
---

## Swirl

Add dynamic motion with Swirl. Particles flow across the screen following noise-based patterns, leaving glowing trails that create organic, ever-changing compositions.

## Features

**Noise-Based Flow**
Particles follow simplex noise patterns, creating natural, unpredictable movement paths.

**Trail Lines**
Each particle leaves a glowing trail, building up intricate visual patterns over time.

**Customizable Colors**
Set a base color and variation range to create your perfect palette.

## Use Cases

**Hero Backgrounds** — Create dynamic, flowing visual interest.

**Music/Audio Sites** — Perfect for representing sound waves and rhythm.

**Creative Portfolios** — Add artistic flair to your work showcase.

**Event Pages** — Create energy and excitement.

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

**Intensity**

- Controls the number of particles

**Base Color**

- Primary color of the swirl particles

**Color Variation**

- Hue spread from base color

### Quick Tips

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

**Color Combinations** — Purple/pink hues create dreamy effects. Cyan/green feels digital.

**Layering** — Component has transparent background. Layer content above.

**Dark Backgrounds** — Works best on dark backgrounds for maximum glow effect.

## 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).

---