Personal
A warm, elegant personal home base: an intro hero with a monogram avatar and a live "now" line, a set of big tappable link rows, a "currently" highlight grid, a recent-writing list, and a magnetized contact footer — link-in-bio meets personal homepage, entirely props-driven with one warm 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/personalManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Nadia Ferrin" | Full name, oversized in the hero. |
| monogram | string | "NF" | Two-or-three-letter monogram used when no avatar is supplied. |
| avatar | React.ReactNode | Optional avatar node (e.g. an <img>); replaces the monogram disc entirely. | |
| role | string | "designer & writer" | Role / one-liner shown beside the avatar. |
| bio | string | Short intro paragraph, revealed word by word. | |
| now | string | Present-tense status line ("now" line) beside the pulse dot. | |
| location | string | "Lisbon, PT" | Location string in the hero meta row. |
| nav | PersonalNavItem[] | Top navigation links. | |
| links | PersonalLink[] | Prominent home-base links (big tappable rows). | |
| currently | PersonalCurrent[] | "Currently" highlight facts. | |
| posts | PersonalPost[] | Recent-writing entries. | |
| contactEmail | string | "hi@nadiaferrin.com" | Contact email, rendered as the magnetized footer link. |
| socials | PersonalSocial[] | Footer social links. | |
| footerNote | string | Quiet closing line in the footer. | |
| accent | string | "#e2a06a" | The single warm accent used for the avatar ring, the now-dot, hover rules and links. |
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.