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

## Swirl Sphere - 3D Kinetic Typography

Create captivating 3D text effects with the Swirl Sphere component. Text swirls across a rotating sphere, creating a mesmerizing visual experience.

## Features

**3D Sphere Geometry**
Your text is dynamically mapped onto a sphere using Three.js shaders, creating stunning swirl effects.

**Transparent Background**
Seamlessly overlays on any background in your Framer project.

**Smooth Animation**
Watch text flow across the sphere with adjustable animation speed.

**Auto Rotation**
Enable automatic rotation for a constantly evolving 3D display.

## Use Cases

**Hero Sections** — Create immersive 3D headlines.

**Brand Experiences** — Elevate your brand with premium 3D visuals.

**Creative Portfolios** — Showcase innovative typography.

**Landing Pages** — Make a lasting first impression.

![Swirl Sphere Preview](/framerhub/img/components/control/swirl-sphere.jpg)

## How to Use

### Installation

1. Copy the component URL
2. Open your Framer project
3. Paste the component (Cmd/Ctrl + V)

### Customization

**Content**

- Text: Your display text
- Font: Extended font controls

**Colors**

- Text Color: Color of the text (default: white)
- Sphere Color: Color of the rotating sphere (default: blue)

**Animation**

- Animation Speed: Swirl speed
- Camera Distance: View distance
- Auto Rotate: Toggle rotation

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

---