# React Bits — Prism

> Rotating glowing 3D prism animated background component for React.

Prism is an animated WebGL background component from React Bits built with OGL. It renders a customizable, glowing triangular prism with shifting colors, film-grain noise, and optional mouse-tilt interactivity. Developers can copy the source code directly or install it via CLI to use behind landing page heroes.

Website: https://reactbits.dev/backgrounds/prism

## What it is for

- Add a glowing animated 3D background behind a website hero section
- Customize animation speed, glow intensity, and color frequencies for a landing page theme
- Implement mouse-responsive hover tilt effects on background canvases

## Features

- Three animation modes including rotate, hover tilt, and full 3drotate
- Configurable shader parameters for glow, bloom, noise, hue shift, and color frequency
- Fine-tuned sizing controls for apex height, base width, scale, and canvas offset
- Performance optimization via suspendWhenOffscreen to pause rendering out of view
- Transparent canvas option to overlay seamlessly over existing page layouts
- Built using the lightweight OGL WebGL library

## Pricing

Free and open source component; optional Pro tier available for React Bits

## 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: Code library
- For: React and Next.js developers building modern animated landing pages.
- Alternative to: Aceternity UI, Magic UI
- Tags: react, webgl, ogl, backgrounds, animation, shaders

## Why it was saved

- [@davidhaz, 20 August 2025](https://x.com/davidhaz/status/1958101554491273407): A standout, customizable hero background component with copyable code, CLI install and configurable animation/color parameters.

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

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.