Lazy-uiLazy UI
Star0

Ribbed Mesh

A mesh-gradient blob field seen through fluted glass — repeating ribs refract the drifting blobs sideways and shade a highlight/shadow pair per rib, with an independent scroll speed for the fluting. Vertical or horizontal ribs. Pauses when off-screen.

Lazy-ui
Ribs refract, blobs drift

Color, seen
through glass.

A mesh gradient of drifting blobs, read through a bank of glass ribs. Each rib bends the field sideways and shades its own highlight and shadow — the fluting scrolls independently of the color underneath.

Customize

Palette
Direction
Rib width36px
Blob speed0.90x
Distortion0.060
Reflect0.32
Shadow0.08
Rib flow28px

Usage

import { RibbedMesh } from "@/components/lazy-ui/ribbed-mesh";

export function Demo() {
  return (
    <RibbedMesh
      colors={["#f5f5f7", "#e11bf0", "#6d28d9", "#22d3ee"]}
      direction="vertical"
      lineSize={40}
      speed={1}
      distortion={0.015}
      reflect={0.15}
      shadow={0.18}
      flow={18}
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1 className="text-center text-5xl font-light tracking-tight text-neutral-900">
          Color, fluted.
        </h1>
      </main>
    </RibbedMesh>
  );
}