Noise Dissolve Reveal

Shaders 51

About

Noise dissolve page transition in WebGL: a coloured veil over your content burns away along a fractal-noise threshold, holes spreading into ragged islands until the page is bare, with fibrous edges instead of a wipe or fade. Use as a page gate or looping showcase. React only.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Noise Dissolve Reveal to your project and fits it to your theme.

Code

How Noise Dissolve Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import NoiseDissolveReveal from "@/components/ui/noise-dissolve-reveal"

export default function Demo() {
  return (
    <NoiseDissolveReveal loop veilColor="#000000">
      <div className="flex h-full w-full flex-col justify-center bg-white px-[6vw] text-black">
        <h1 className="text-[clamp(3rem,13vw,11rem)] font-black uppercase leading-[0.82] tracking-[-0.03em]">
          Make
          <br />
          <span className="italic">Something</span>
        </h1>
        <p className="mt-8 max-w-md font-mono text-xs uppercase tracking-[0.2em] text-neutral-500">
          The veil dissolves along a noise threshold
        </p>
      </div>
    </NoiseDissolveReveal>
  )
}