3D Tilt Card
Hardware
Meet the Atlas Deck
A modular controller for creative tools, machined from a single block of aluminum.
A modular controller for creative tools, machined from a single block of aluminum.
A 3D tilt card that rotates in perspective toward the cursor with a moving glare for product showcases.
The import and the props worth knowing about, in one place.
import { Card7 } from "@/components/beste/component/card7";
// The whole card becomes a link when href is set.
<Card7
src="/products/atlas-deck.jpg"
eyebrow="Hardware"
title="Meet the Atlas Deck"
description="A modular controller for creative tools."
href="/products/atlas-deck"
/>
<Card7
src="/products/keyboard.jpg"
title="Muted mechanical"
maxTilt={14} // tilt strength in degrees (default 10)
tone="foreground" // eyebrow: "primary" (default) | "foreground"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Move the pointer over it | The card tilts towards the cursor; `maxTilt` is how far it is willing to lean. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Image shown at the top of the card |
eyebrow | string | — | Monospace eyebrow above the title |
title* | string | — | Card title |
description | string | — | Card body text |
href | string | — | If set, the whole card links to this href |
maxTilt | number | — | Maximum tilt in degrees (defaults to 10) |
tone | "primary" | "foreground" | — | Eyebrow color |
className | string | — | Additional classes merged onto the root |
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
