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"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
A modular controller for creative tools, machined from a single block of aluminum.
import { Card7 } from "@/components/beste/component/card7";
<Card7
src="https://images.unsplash.com/photo-1782252152135-f4fa52702e5f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
eyebrow="Hardware"
title="Meet the Atlas Deck"
description="A modular controller for creative tools, machined from a single block of aluminum."
/>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.
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
Summer in AlacatiAug 2026An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.
A 3D book cover card that swings open on hover to reveal page edges for ebooks, guides, and lead magnets.
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
A new themed set of sections lands every month, with free updates forever.
Learn moreA featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.
