# Assets

> Reference for @apricot/assets: ready-made objects (Apple, Peach, Coin, MoneyStack, Car, Card, Trees, Ground, ContactShadow, Backdrop, StudioFloor) with every prop and default, their factory functions, and constants such as CARD_SIZE, CARD_FINISHES, CAR_DIMENSIONS and WHEEL_NAMES.

```ts
import { Apple, Backdrop, Car, Card, Coin, ContactShadow, Ground, MoneyStack, Peach, StudioFloor, Trees } from "@apricot/assets";
```

Ready-made objects drawn with code: no files to download, a draw call or two each. Every component also takes transform props (`position`, `rotation`, `scale`) and frees its object on unmount. Changing an option rebuilds the object.

## Components

### Food

| Component | Props (default) | Notes |
| --- | --- | --- |
| `Apple` | `size` diameter (`1`), `color` skin (`"#e8343a"`), `leaf` (`true`) | One mesh. `userData.radius` is set for `<Pile>` |
| `Peach` | `size` width (`1`), `leaves` (`true`), `detail` smoothness 0–1 (`1`) | One mesh. Lower `detail` for many small or blurred copies |

### Money

| Component | Props (default) | Notes |
| --- | --- | --- |
| `Coin` | `radius` (`0.5`), `thickness` (`0.08`), `color` (`"#f2c14e"`) | Lies flat: a cylinder along y. Rotate `[Math.PI / 2, 0, 0]` to face the camera |
| `MoneyStack` | `bills` (`40`), `seed` (`1`), `width` (`2.4`), `depth` (`1.05`), `thickness` per bill (`0.022`), `band` paper band, `true` or a colour (`true`), `colors` `Partial<BanknoteColors>` | One draw call for the whole stack. Base at y = 0 |

`BanknoteColors`: `{ base, ink, highlight, paper }`; defaults in `DEFAULT_BANKNOTE_COLORS` (`#7cc47f`, `#3f8f46`, `#c8e6c9`, `#eef3e2`).

### Vehicles

| Component | Props (default) | Notes |
| --- | --- | --- |
| `Car` | `color` body (`"#f24b3f"`), `glass` windows (`"#bfe3ff"`) | Emoji-style toy car facing +z, wheels on y = 0, wheel nodes named for `<Vehicle>`. Sized for `<Vehicle>`'s defaults |

### Product

| Component | Props (default) | Notes |
| --- | --- | --- |
| `Card` | `finish` `CardFinish` (`"brushed-steel"`), `art` engraving mask texture (`null`), `chip` (`true`) | A payment card centred on the origin, front facing +z. Changing `finish` or `art` swaps materials without rebuilding |
| `Backdrop` | `size` `[w, h]` (`[30, 30]`), `colors` centre and edge (`["#262a31", "#0e0f12"]`), `lines` (`true`) | An unlit studio wall facing +z. Glass needs something behind it to show; place it at `[0, 0, -3]` |
| `StudioFloor` | `radius` (`8`), `colors` centre and edge (`["#30343b", "#0e0f12"]`) | A round, unlit floor at y = 0 that fades into the background. Match the edge colour to the scene's `background` |

`CardFinish`: `"brushed-steel" | "chrome" | "gold" | "rose-gold" | "matte-black" | "glossy-paint" | "glass"`. Engraving looks: darker on bare metal, bright steel on matte black, white ink on paint, frosted on glass.

### Scenery

| Component | Props (default) | Notes |
| --- | --- | --- |
| `Ground` | `size` (`400`), `tile` checker size (`4`), `colors` (`["#a3d77f", "#97cf72"]`) | Flat checkered grass at y = 0 |
| `Trees` | `count` (`120`), `area` `[minX, minZ, maxX, maxZ]` (`[-80, -80, 80, 80]`), `clearing` free radius at the origin (`8`), `scale` size range (`[0.8, 1.4]`), `seed` (`1`) | Round and pine trees: two draw calls for the forest. Here `scale` is the size range, not a transform |
| `ContactShadow` | `width` along x (`1`), `length` along z (`1`), `opacity` at the centre (`0.35`) | A soft shadow blob on the ground. Put it inside the object's group (or `<Vehicle>`) so it follows. Cheaper than real shadows |

## Factories

Each component has a factory that returns a plain three.js object, for `<Primitive>`, `<Instances object>` or three.js code. Objects you create are yours: free them with `disposeObject` from `@apricot/core`.

| Factory | Returns |
| --- | --- |
| `createApple(options)`, `createPeach(options)`, `createCoin(options)` | `THREE.Mesh` |
| `createMoneyStack(options)`, `createCar(options)`, `createCard(options)` | `THREE.Group` |
| `createTrees(options)`, `createGround(options)`, `createContactShadow(options)`, `createBackdrop(options)`, `createStudioFloor(options)` | `THREE.Object3D` |
| `createSedan()` | A stylised sedan for testing kits: Italian part names (`carrozzeria`, `cofano`, `bagagliaio`, `porta_ant_sx`…, `ruota_*`) and materials (`vernice`, `vetro`, `gomma`, `cerchio`, `luce`…). `sx` is left (+x) |
| `createLaptop()`, `createLaptopAnimation()` | A closed laptop (parts `base`, `keyboard`, `trackpad`, `lid`; lid origin at the hinge) and its `"LidOpen"` clip |
| `createWheelGeometry(radius?)`, `createRoundTreeGeometry()`, `createPineTreeGeometry()` | `THREE.BufferGeometry` |
| `createCardMaterials(finish, art?)`, `setCardFinish(card, finish, art?)` | Card materials; switch a card's finish in place |
| `createBanknoteMaterial(aspect, colors?)` | The banknote shader material |

## Constants

| Constant | Value |
| --- | --- |
| `CARD_SIZE` | `{ width: 3.37, height: 2.125, thickness: 0.032, radius: 0.125 }` |
| `CARD_FINISHES` | `Record<CardFinish, FinishSpec>`: `{ label, preset, color, metalness, roughness, physical?, engraving }` per finish |
| `CAR_DIMENSIONS` | `{ length: 2.1, width: 1.1, wheelRadius: 0.3, wheelBase: 1.4, track: 1.04 }` |
| `WHEEL_NAMES` | `["wheel_fl", "wheel_fr", "wheel_rl", "wheel_rr"]` |
| `SEDAN_DIMENSIONS` | `{ length: 4.5, width: 1.8, height: 1.47, wheelRadius: 0.34 }` |
| `LAPTOP_DIMENSIONS` | `{ width: 3, depth: 2.1, base: 0.12, lid: 0.08 }` |
| `DEFAULT_BANKNOTE_COLORS` | See Money above |

## Related

- [card-tilt recipe](https://matthiasbrandolin.dev/apricot/recipes/card-tilt), [drive-joystick recipe](https://matthiasbrandolin.dev/apricot/recipes/drive-joystick), [falling-pile recipe](https://matthiasbrandolin.dev/apricot/recipes/falling-pile).
- [Custom geometry](https://matthiasbrandolin.dev/apricot/guides/custom): how these are built.