# Imprint: Product Hero

> A product hero on the default wall. Move across it and the dent follows with a trail that fills back in; press and hold to push the floor deeper and send a ring out.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/imprint-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/imprint-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/imprint-demo-light-815cd56260dfd6bd.png
- Registry item: https://keyframeui.com/r/imprint-demo.json
- Categories: background, interaction, canvas, 3d
- Listed: 2026-10-23, source last changed 2026-10-23

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/imprint-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/imprint.json`

## Notes from the registry

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

## Files

### `registry/demos/imprint-demo.tsx`

```tsx
import { Imprint } from "@/components/ui/imprint";

export function ImprintDemo() {
  return (
    <Imprint className="flex h-[var(--demo-height,36rem)] w-full flex-col items-center justify-center rounded-2xl border border-border px-6 text-center text-foreground">
      <span className="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
        Softform 2.0 · now in beta
      </span>
      <h2 className="mt-6 max-w-[14ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.02]">
        Interfaces that give a little
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Softform turns your design system into components that answer the hand. They press,
        settle and spring back, out of the box.
      </p>
      <div className="mt-9 flex items-center gap-3">
        <a
          href="#"
          className="h-11 rounded-full bg-foreground px-6 text-sm/[2.75rem] font-medium text-background shadow-sm transition-transform active:scale-[0.97]"
        >
          Start building
        </a>
        <a
          href="#"
          className="h-11 rounded-full border border-border bg-background px-6 text-sm/[2.75rem] font-medium shadow-sm transition-transform active:scale-[0.97]"
        >
          Read the docs
        </a>
      </div>
    </Imprint>
  );
}
```