Installation

npm install @react-three/fiber three
npx kinetic-ui-cli@latest add webgl-ribbon-bg

How It Works

This component uses react-three-fiber to render a high-density planeGeometry. We apply a custom shaderMaterial that displaces the vertices on the Z-axis using a 3D Simplex noise function mixed with a sine wave to create flowing, organic ribbons.

The fragment shader mixes three distinct colors based on the displaced Z height and time to create an iridescent, glowing specular effect.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { WebGLRibbonBg } from "@/components/creative/webgl-ribbon-bg";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { WebGLRibbonBg } from "@/components/creative/webgl-ribbon-bg";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <WebGLRibbonBg
      />
    </div>
  );
}