Agency
A one-page site for a creative / development studio: a sticky Lodestar pill header, an oversized editorial hero with a word-by-word blur reveal and a pulsing availability chip, a staggered selected-work grid of tilting Facet tiles with seeded procedural cover art and hover reveals, numbered services that expand to deliverables, Casebook client results, a pinned Drawbench process, the Guild team, a routed Parley contact form and a Tailstock wordmark footer — every string a prop, any section droppable, one vermilion accent flowing through every block.
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/agencyManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Marrow" | Studio name: nav wordmark, footer wordmark, copyright. |
| accentColor | string | "#ff6b4a" | Signature accent hex shared by every section, so the page reads as one brand. |
| header | AgencyHeaderConfig | false | Sticky pill header (composes lodestar). false hides it. | |
| hero | AgencyHeroConfig | false | Editorial hero. false hides it. | |
| work | AgencyWorkConfig | false | Selected-work grid (tiles compose facet). false hides it. | |
| services | AgencyServicesConfig | false | Numbered, expandable services list. false hides it. | |
| results | BlockConfig<CasebookProps> | Client results (composes casebook). false hides it. | |
| process | BlockConfig<DrawbenchProps> | Process (composes drawbench). false hides it. | |
| team | BlockConfig<GuildProps> | Team / studio (composes guild). false hides it. | |
| contact | BlockConfig<ParleyProps> | Closing contact section (composes parley). false hides it. | |
| footer | BlockConfig<TailstockProps> | Footer (composes tailstock). false hides it. | |
| scroller | React.RefObject<HTMLElement | null> | the window | Scroll container the page lives in (e.g. a boxed preview). The header sticks inside it, the process section pins inside it and nav links scroll it. |
| ref | React.Ref<AgencyTemplateHandle> | Imperative handle (replay(), scrollToSection()). React 19 ref-as-prop. | |
| className | string | Extra classes for the root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "results"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.