---
title: "Chroma Flux"
canonical_url: "https://framerhub.io/components/chroma-flux"
last_updated: "2026-06-15T14:46:28.876Z"
---

## Stunning 3D Torus Shader for Framer

Transform your Framer projects with ChromaFlux – a mesmerizing twisted torus shader that responds to mouse movement with smooth, fluid animations. Perfect for hero sections, loading screens, and creative backgrounds.

## Features

**Interactive Hover Mode**
The torus follows your cursor with buttery-smooth inertia, creating an engaging and responsive experience that captivates visitors.

**Auto-Spin Animation**
Enable continuous rotation with customizable speed for a hypnotic, hands-free animation that works perfectly for background elements.

**Fully Customizable Geometry**
Fine-tune every aspect of the torus shape – from twist intensity and radius to thickness and scale – to match your design vision.

**Rich Visual Effects**
Apply glow, bloom, saturation adjustments, and hue shifting to create vibrant, eye-catching color schemes that pop.

**Always Transparent**
The component renders with a transparent background, making it easy to layer over any content or background.

## Use Cases

**Hero Sections** — Create an unforgettable first impression with an interactive 3D element that responds to visitor movement.

**Loading States** — Transform boring loading screens into mesmerizing visual experiences.

**Background Elements** — Add depth and movement to any page with a subtle, animated background.

**Creative Portfolios** — Showcase your design skills with a modern, interactive component.

![Chroma Flux Preview](/framerhub/img/components/control/chroma-flux.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 ChromaFlux 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

ChromaFlux offers extensive customization through organized property groups:

**Geometry**

- Twist: Control the spiral intensity (0-10)
- Radius: Adjust the torus size
- Thickness: Change the tube thickness
- Scale: Overall size multiplier

**Visual Effects**

- Glow: Light emission intensity
- Bloom: Post-processing bloom effect
- Saturation: Color vibrancy
- Hue Shift: Rotate the color spectrum
- Color Frequency: Pattern complexity
- Noise: Add grain texture

**Animation**

- Mode: Switch between Interactive (hover) and Auto Spin
- Speed: Animation speed multiplier
- Wobble: Enable organic movement

**Performance**

- Max DPR: Limit pixel density for better performance

### Quick Tips

**Best Performance** — On lower-end devices, reduce Max DPR to 1 for smoother animation.

**Color Combinations** — Use Base Color with Hue Shift to create dynamic color palettes without manual color picking.

**Layering** — The transparent background lets you place text or other content directly over the component.

**Subtle Effects** — For background use, reduce Glow and Bloom for a more understated look.

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

ChromaFlux brings high-end 3D shader effects to Framer without any coding. The interactive hover mode creates memorable experiences, while the extensive customization options ensure it fits any design style.

---