xiry.

Development · Web app

React Bits — Prism

Rotating glowing 3D prism animated background component for React.

From the Xiry library · Updated 10 October 2026

Visit reactbits.dev ↗

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.

What it's 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
Topic
UI Components
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: A standout, customizable hero background component with copyable code, CLI install and configurable animation/color parameters.

Compare

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated