Atelier
A monochrome-elegant portfolio one-pager: oversized editorial hero, an indexed selected-work list with a cursor-following gradient art panel, services strip, studio statement, and a magnetized contact footer — all props-driven with one brass accent.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/atelierManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Atelier Vasa" | Studio name, rendered lowercase in the nav and oversized in the hero. |
| logo | React.ReactNode | the Vasa monogram | Inline logo mark (should be a 1em-scalable SVG using currentColor). |
| tagline | string | "Considered interfaces." | Short kicker line above the hero name. |
| statement | string | Hero statement paragraph, revealed word by word. | |
| nav | AtelierNavItem[] | Top navigation links. | |
| projects | AtelierProject[] | Portfolio entries for the selected-work list. | |
| services | AtelierService[] | Service line items. | |
| about | string | Studio statement paragraph in the about section. | |
| contactEmail | string | "hello@ateliervasa.studio" | Contact email rendered as the oversized footer link. |
| socials | AtelierSocial[] | Footer social links. | |
| footerNote | string | Closing footer line. | |
| accent | string | "#c4a265" | The single accent color (warm brass by default) used for hairline rules, hover states, and the contact glow. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.