Future UI

Fractal Glass Shimmer

✦ Effects

Ribbed glass overlay with a traveling wave swell and fractal noise grain. Layer it over images, gradients, or videos.

effectsglassshimmerbackdrop-filtergsapwave

No preview available

CSS + GSAP ~ Traveling Wave Glass

Controls

#ff0033
#cb581a
1
27
24
1

Effects / React Component

About Fractal Glass Shimmer

Ribbed glass overlay with a traveling wave swell and fractal noise grain. Layer it over images, gradients, or videos.

Category Effects
Framework React + TypeScript
Dependencies gsap
Tags effects, glass, shimmer, backdrop-filter, gsap, wave

Install Fractal Glass Shimmer in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/fractal-glass-shimmer.json?key=YOUR_LICENSE_KEY"

Usage example

import { FractalGlassShimmer } from '@/components/effects/fractal-glass-shimmer';

// Place inside any relative container
<div className="relative h-[400px] bg-neutral-900">
  <FractalGlassShimmer />
</div>

// Over an image with text on top
<div className="relative h-[400px]">
  <img src="/hero.jpg" className="absolute inset-0 size-full object-cover" />
  <FractalGlassShimmer direction="down" ribWidth={16} />
  <h1 className="relative z-30 text-white p-8">Content on top</h1>
</div>

// Subtle overlay on video
<div className="relative h-[400px]">
  <video src="/bg.mp4" autoPlay muted loop className="absolute inset-0 size-full object-cover" />
  <FractalGlassShimmer opacity={0.5} speed={0.5} />
</div>

// Card with rounded corners
<div className="relative rounded-2xl h-[300px] overflow-clip border border-white/10">
  <img src="/photo.jpg" className="absolute inset-0 size-full object-cover" />
  <FractalGlassShimmer blurStrength={16} />
  <div className="relative z-30 p-6 flex flex-col justify-end h-full">
    <h3 className="text-white text-xl font-bold">Card Title</h3>
  </div>
</div>