Shader Image

import { ShaderImage } from '@/components/ui/shader-image'

import { ShaderImage } from '@/components/ui/shader-image'

const programs = [
  { effect: 'ripple', note: 'radiating refraction' },
  { effect: 'pixelate', note: 'mosaic under the pointer' },
  { effect: 'sway', note: 'autonomous slow drift' },
] as const

export default function ShaderImageDemo() {
  return (
    <section className="bg-background py-16 sm:py-24">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Lab · WebGL material
        </p>
        <h2 className="mt-4 max-w-2xl text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-4xl">
          One plate, three optics.
        </h2>
        <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground sm:text-base">
          The same token-inked drafting plate run through three displacement programs, move
          across each surface. Touch devices receive the slow sway; browsers without WebGL get
          the plain image.
        </p>
        <div className="mt-10 grid gap-6 sm:grid-cols-3">
          {programs.map(({ effect, note }, i) => (
            <figure key={effect}>
              <ShaderImage
                effect={effect}
                className="aspect-[4/5] w-full rounded-2xl border border-border/60"
              />
              <figcaption className="mt-3 flex items-baseline justify-between gap-3">
                <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-foreground">
                  {`0${i + 1} · ${effect}`}
                </span>
                <span className="text-xs text-muted-foreground">{note}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  )
}