Tailstock
Big site footer: link columns that collapse to 2-up then <details> accordions via container queries, a labelled async newsletter form, social row, live status pill and legal row — signed by an oversized wordmark that rises through a clip-path curtain with a letter stagger and one sheen sweep. Compact variant drops the wordmark.
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/tailstockManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark | string | "Studio" | Oversized wordmark text that rises through a curtain reveal at the foot of the footer. Ignored when compact. |
| tagline | React.ReactNode | Short line under the small brand name at the top-left. | |
| columns | TailstockColumn[] | Link columns. Omit for a sample Product / Resources / Company set. | |
| onSubscribe | (email: string) => void | Promise<unknown> | Called with the submitted email. Return a Promise to hold the button in its pending state — resolve shows the success state, reject shows the rejection's message (or a generic one) inline. The newsletter form is always rendered; without a handler it succeeds immediately. | |
| newsletterTitle | React.ReactNode | "Stay in the loop" | Heading above the newsletter field. |
| status | TailstockStatus | false | { label: "All systems normal", tone: "operational" } | Status pill config, or false to hide it. |
| socials | TailstockSocial[] | Social icon links. Omit for a generic sample row; pass [] to hide. | |
| legal | TailstockLink[] | Privacy / Terms / Cookies | Legal-row links. |
| copyright | React.ReactNode | "© 2026 {wordmark}. All rights reserved." | Copyright line in the legal row. |
| compact | boolean | false | Drop the oversized wordmark for a tighter, utility footer. |
| accentColor | string | "#c4b5fd" | Accent hex for the subscribe button, focus rings, hovers and the wordmark sheen. |
| ref | React.Ref<TailstockHandle> | Imperative handle (replay(), focusNewsletter()). React 19 ref-as-prop. | |
| className | string | Extra classes for the <footer> root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"footer">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.