# Paint Reveal: About the Founder

> A studio's about section. With `autoPlay`, the brush drifts over the portrait by itself until the pointer takes over, so the color keeps moving through it while you read.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/paint-reveal-founder-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/paint-reveal-founder-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/paint-reveal-founder-demo-light-5a7b2672b5ddd7e8.png
- Registry item: https://keyframeui.com/r/paint-reveal-founder-demo.json
- Categories: image, hover, canvas
- Listed: 2026-10-15, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/paint-reveal-founder-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/paint-reveal.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/paint-reveal#paint-reveal-founder-demo

## Files

### `registry/demos/paint-reveal-founder-demo.tsx`

```tsx
import { PaintReveal } from "@/components/ui/paint-reveal";

const portrait = (grade = "") =>
  `https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&crop=faces&w=900&h=1125&q=80${grade}`;

export function PaintRevealFounderDemo() {
  return (
    <section className="grid w-full max-w-4xl items-center gap-8 sm:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] sm:gap-12">
      <PaintReveal
        src={portrait("&sat=-100&con=8")}
        alt="Portrait of Noor Haddad"
        revealSrc={portrait()}
        autoPlay
        brushSize={150}
        softness={0.75}
        fadeMs={1100}
        className="aspect-[4/5] w-full rounded-2xl"
      />
      <div>
        <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">About the founder</p>
        <blockquote className="mt-4 text-2xl leading-snug font-medium tracking-tight text-balance text-zinc-900 sm:text-3xl dark:text-zinc-50">
          “Every brand guide I was handed was a PDF nobody opened. So we build the system into the
          tools people already use.”
        </blockquote>
        <div className="mt-6 flex items-center gap-3">
          <span className="h-px w-8 bg-zinc-300 dark:bg-zinc-700" />
          <p className="text-sm text-zinc-600 dark:text-zinc-400">
            <span className="font-medium text-zinc-900 dark:text-zinc-100">Noor Haddad</span>,
            founder of Mera Studio
          </p>
        </div>
        <p className="mt-6 max-w-md text-sm leading-relaxed text-pretty text-zinc-600 dark:text-zinc-400">
          Twelve years in brand teams at Spotify and Monzo, then a studio of six in Amsterdam. Mera
          designs identities that ship as code, type and templates on day one.
        </p>
      </div>
    </section>
  );
}
```