Chroma Flux

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.

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.