Development · Web app
React Bits — Color Bends
Animated Three.js shader background component for React with customizable flow and colors
Color Bends is an animated React background component from the React Bits library powered by Three.js. It renders fluid, ribbon-like color gradients and waves that can be heavily customized through props like warp strength, speed, noise, and custom palettes. It also includes built-in interactive features like pointer influence and parallax shifts.
What it's for
- Add an interactive, fluid gradient background to a hero section
- Create dynamic backdrop effects for dark-mode landing pages
- Customize reactive shader animations using standard React component props
Features
- Supports custom palettes of up to 8 hex colors
- Interactive mouse influence and parallax shift options
- Configurable wave frequency, warp strength, and iteration passes
- Built-in subtle noise grain and auto-rotation settings
- Alpha channel support for transparent overlays
Pricing
Open source. Free open-source component; optional React Bits Pro tier available for additional blocks and templates
Details
- Type
- Web app
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Web, Code library
- For
- React and frontend developers building visual landing pages
- Alternative to
- Aceternity UI, Magic UI
- Tags
- react, threejs, shaders, ui components, webgl, animation, backgrounds
Why it was saved
- @davidhaz: Drop-in animated shader-style background for hero sections and landing pages with wide visual range from prop tweaks.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated