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

Website: https://reactbits.dev/backgrounds/color-bends

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 27 October 2025](https://x.com/davidhaz/status/1982766402135347315): Drop-in animated shader-style background for hero sections and landing pages with wide visual range from prop tweaks.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to Magic UI](https://xiry.app/alternatives/magic-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/react-bits-color-bends

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.