ChromaFlux
Transform your Framer projects with ChromaFlux – a mesmerizing twisted torus shader that responds to mouse movement with smooth, fluid animations. Perfect for hero sections, loadin
Make it with Workshop
Build your own component with AI
Transform your Framer projects with ChromaFlux – a mesmerizing twisted torus shader that responds to mouse movement with smooth, fluid animations. Perfect for hero sections, loadin
Make it with Workshop
Build your own component with AI
Transform your Framer projects with Chroma Flux – a mesmerizing, twisted torus shader that responds to mouse movement with smooth, fluid animations. Perfect for hero sections, loading screens, and creative backgrounds.
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.
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.
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
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!
Chroma Flux 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.
