# Bank deposit

An isometric shadcn/ui hero illustration for banking and fintech sites: coins leap into a small bank one by one while a balance card counts up, in ink.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Banking and savings product heroes; Deposits, top-ups and round-ups feature sections; Fintech onboarding pages about funding an account; Empty states for balances and transactions
- **Category:** Finance · **Type:** Scenes · **Style:** Flat, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/bank-deposit) · [Screenshot](https://www.craftui.space/llms.md/preview/bank-deposit.e8dc7471.jpg)

![Bank deposit](https://www.craftui.space/llms.md/preview/bank-deposit.e8dc7471.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/bank-deposit.json
```

This is a paid item (ISO-RJJ8GD): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import BankDeposit from "@/components/isometric/bank-deposit";

export default function Page() {
  return <BankDeposit />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. The bank is a pastel of it. |
| `accent` | `IsoTone` | `"oklch(0.88 0.2 128)"` | Colour of the card. Default a lime green, `oklch(0.88 0.2 128)`. |
| `cardBrand` | `string` | `"wise"` | Wordmark printed top-right on the card, up to about 8 characters. |
| `coinTone` | `string` | `"oklch(0.8 0.16 80)"` | Colour of the coins. Default an amber, `oklch(0.8 0.16 80)`. |
| `glyph` | `string` | `"$"` | Glyph on the coins, one character. |
| `label` | `string` | `"Balance"` | Label above the balance, up to about 12 characters. |
| `start` | `number` | `1240` | Balance at the start of each cycle, in whole dollars. |
| `credit` | `number` | `25` | Credit per coin, in whole dollars. |
| `variant` | `IsoVariant` | `"ink"` | Flat ink drawing (default), soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `ink` 0.3 is a 1.3 px outline at any size. |
| `autoPlay` | `boolean` | `true` | Coins deposit while in view, five per cycle. Off holds the coins at their spots and the total on the card. |
| `shadow` | `"soft" \| "none"` | `"none"` | No shadow (default), or the soft cast shadow. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. Off by default for a hero. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `20` | How far it turns, in degrees: a number for both ways, or [min, max]. Default 20. |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

## Files

The install adds:

- `components/isometric/bank-deposit.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.