AnimatedWash

WebGL grain-gradient shader wash, colored by currentColor with a hover lift.

AnimatedWash is the registry’s shader component: a color gradient rising from the bottom edge, dithered with animated grain that breathes cell by cell. Adapted from paper-design/shaders (Apache-2.0), rebuilt as a single-purpose fork — the GLSL lives in animated-wash-shader.ts, the React mount in animated-wash.tsx.

It reads currentColor at mount (the same contract as NeonLoader), so a text-primary or text-destructive on any ancestor colors it, and it rethemes with the token contract. Hovering the nearest interactive ancestor — or any element marked data-wash-hover — lifts and warms the field.

ready

error

stopped

import { cn } from "@/lib/utils";

import { AnimatedWash } from "./animated-wash";
import { washTints } from "./fixtures";

export const AnimatedWashDemo = () => (
  <div className="grid w-full max-w-lg gap-3 sm:grid-cols-3">
    {washTints.map((wash) => (
      <div
        className={cn(
          "relative isolate h-32 overflow-hidden rounded-lg border border-border/60 bg-card transition-colors hover:border-border",
          wash.tint
        )}
        data-wash-hover
        key={wash.label}
      >
        <AnimatedWash className="absolute inset-0" />
        <span className="absolute top-2 left-2 font-mono text-[10px] text-muted-foreground">
          {wash.label}
        </span>
      </div>
    ))}
  </div>
);

export default AnimatedWashDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/animated-wash.json

Usage

import { AnimatedWash } from "@/components/neon-ui/animated-wash";

<div className="relative isolate overflow-hidden text-primary" data-wash-hover>
  <AnimatedWash className="absolute inset-0 -z-10" />
  {content}
</div>;

Wiring to Neon

The typed example tints a panel from a compute endpoint’s state (active → primary, idle → muted) — since the wash reads currentColor, the class on the wrapper is the entire integration.

Props

PropType

speed?number

Grain refresh speed multiplier; 0 freezes the field.

Typenumber

Default1

intensity?number

0-1 strength of the smooth gradient under the grain.

Typenumber

Default0.2

noise?number

0-1 grain strength over the gradient.

Typenumber

Default0.35

grainSize?number

Grain cell size in device pixels; bigger reads chunkier.

Typenumber

Default3

Playground

Drag the props live — speed at 0 freezes the field, intensity fills in the smooth gradient, noise and grain shape the speckle, and the tint (preset or any hex) proves the currentColor contract:

hover to lift

dials

speed1.00intensity0.20noise0.35grain3

tint

Composition

AppCard accepts it through the wash slot, where the status vocabulary supplies the tint automatically.

Accessibility

The canvas is decorative (aria-hidden) and renders a single static frame under prefers-reduced-motion — no lift, no grain movement.