Wensity

Glass Stripes

Pro

Diagonal glass stripes refract a slow, glowing light that follows your pointer.

3dwebglshaderglassstripesgradientbackground
Glass Stripes component preview

Overview

Glass Stripes is a React and Tailwind CSS animated WebGL background where diagonal glass flutes refract a soft glow that follows the pointer, in Next.js or any React app, built on React Three Fiber and a drei transmission material. Set background, shadow, midtone, and highlight hex colors, and tune flute count, angle, light size, spread, refraction, thickness, blur, and dispersion. Quality presets trade samples and resolution for speed, touch scrolling stays native, and it pauses in hidden tabs and for reduced motion. It defaults to 520px tall, so pass height or use a sized parent.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add glass-stripes

Usage

Import GlassStripes from @/components/wensity/glass-stripes and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { GlassStripes } from "@/components/wensity/glass-stripes";


export default function Example() {
  return (
    <GlassStripes
      height={560}
      stripeCount={14}
      angle={36}
      colors={{ shadow: "#b5122e", midtone: "#ff6b81", highlight: "#fff1ee" }}
      glass={{ refraction: 1.5, thickness: 1, blur: 0.35, dispersion: 2.5 }}
      quality="balanced"
    >
      <div className="grid h-full place-items-center text-center">
        <h1 className="text-5xl font-semibold text-white">Your headline</h1>
      </div>
    </GlassStripes>
  );
}

Props

PropTypeDefaultDescription
childrenReactNode-Content layered above the glass, such as a hero headline. It fills the container and the light keeps following the cursor across it.
heightCSSProperties["height"]520Container height. Use 100% to fill a parent with an explicit height.
colorsGlassStripesColorsCrimsonHex colors for background, shadow, midtone, and highlight. Each field is optional.
stripeCountnumber14Glass flutes across the scene, clamped to 6 to 40.
anglenumber36Counterclockwise glass rotation in degrees. Zero makes vertical stripes.
lightScalenumber1Scale of the light behind the glass, clamped to 0.5 to 2.
spreadnumber0.1How far a faint wash of light reaches toward the corners, clamped to 0 to 1. Zero keeps a tight centered glow.
glassGlassStripesGlassSee descriptionOptional refraction (1.5), thickness (1), blur (0.35), dispersion (2.5), and fringe ("spectral"). Set fringe to "tinted" for palettes that mix red and blue, such as purple, so dispersion never splits off red.
interactivebooleantrueLet the light drift toward the pointer within this component. Touch scrolling stays native.
pointerStrengthnumber0.3How far the light follows the pointer, clamped to 0 to 1.
pausedbooleanfalseFreeze the light and pointer motion at their current position. Reduced motion also pauses automatically.
quality"low" | "balanced" | "high""balanced"Controls refraction samples, render-target resolution, and capped device pixel ratio.
styleCSSProperties-Inline container styles, including border radius or sizing overrides.

Related components

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

Featured in React 3D components and React animated backgrounds.