# Imprint: Studio Card

> A studio's closing card in stone, with big boxes and `falloff={0}`: every box in reach drops to the same floor, like a row of keys going down, and the floor glows orange through `accentClassName`.

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-studio-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/imprint-studio-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/imprint-studio-demo-light-1413fb4ac3c52488.png
- Registry item: https://keyframeui.com/r/imprint-studio-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-studio-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-studio-demo

## Files

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

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

const services = ["Product design", "Design systems", "Motion", "Prototyping"];

export function ImprintStudioDemo() {
  return (
    <Imprint
      cell={64}
      depth={64}
      reach={110}
      falloff={0}
      boxClassName="text-stone-100 dark:text-stone-900"
      accentClassName="text-orange-500"
      className="w-full max-w-3xl rounded-2xl border border-stone-200 text-stone-900 dark:border-stone-800 dark:text-stone-100"
    >
      <div className="flex min-h-[26rem] flex-col justify-between gap-12 p-8 sm:p-12">
        <span className="text-sm font-medium tracking-tight">Kiln Studio</span>
        <div>
          <h2 className="max-w-[16ch] font-serif text-4xl/[1.05] tracking-tight text-balance sm:text-5xl/[1.02]">
            We make the parts people touch.
          </h2>
          <ul className="mt-6 flex flex-wrap gap-2">
            {services.map((s) => (
              <li
                key={s}
                className="rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-xs text-stone-600 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-400"
              >
                {s}
              </li>
            ))}
          </ul>
        </div>
        <div className="flex items-end justify-between gap-6">
          <a
            href="#"
            className="rounded-full bg-orange-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-transform active:scale-[0.97]"
          >
            Start a project
          </a>
          <span className="text-right text-xs text-stone-500">Booking from March</span>
        </div>
      </div>
    </Imprint>
  );
}
```