$5

Swirl

Animated bands of color twisting

Details

Category

Last update

Suggest improvement or report a bug

Swirl — Framer component

About this Component

Animated bands of color twisting into vortex-like spirals, arcs, and flowing circular patterns — up to 10 colors, fully controllable from tight sectoral wedges to deep, hypnotic whirlpools.

Features

  • Up to 10 colors — build rich, multi-band color wheels instead of a flat 2-color swirl

  • Band Count — set the number of color bands, or drop to 0 for concentric ripple rings instead of a swirl

  • Twist control — go from straight, pie-chart-like sectoral shapes to a full vortex twist

  • Center offset — control how far from the middle the swirl colors start appearing

  • Noise layer — add noise distortion with its own frequency control for a rougher, less mechanical pattern

  • Fully animated — smooth, continuous motion by default, with full control over speed

  • Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

  • Colors

  • Background Color

  • Band Count

  • Twist

  • Center

  • Proportion

  • Softness

  • Noise

  • Noise Frequency

  • Speed

  • Scale / Rotation / Offset

How to use

  1. Add the Swirl component onto your canvas

  2. Add up to 10 colors to build your color wheel

  3. Set Band Count for the number of color bands, or 0 for concentric ripples instead of a swirl

  4. Adjust Twist to go from flat sectoral wedges to a deep vortex effect

  5. Fine-tune Center and Proportion to control where and how the colors distribute

  6. Add Noise and Noise Frequency for a rougher, organic feel

  7. Set Speed to control animation pace, or set it to 0 to freeze on a single frame

Shader powered by Paper Shaders.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.