# Expanding Frame Hero

> A pinned scroll hero for an architecture studio built on the expanding-frame component: a huge two-line semibold headline sits above and below a small rounded photograph, and as the page scrolls the lines part to the left and right while the photograph grows to fill the whole screen, its corners easing square and the picture settling from a close zoom to its full view. Once the photograph is full, the studio line, an intro, an Arrow Pill and an underline link settle in at the lower left over a soft shade. Every frame setting passes through the frame prop. Reduced motion shows the full photogr…

A paid shadcn/ui block sold by the [@beste-ui](https://ui.beste.co/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/beste-ui/hero253).

- Page, with a preview: https://shadcn.exchange/r/beste-ui/hero253
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/beste-ui/hero253-light-24e5667517d4f02b.png
- Listed: 2026-10-13

## Buy and install

@beste-ui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/beste-ui/hero253

## Dependencies

- npm packages: `clsx`, `framer-motion`, `lucide-react`, `tailwind-merge`
- Registry items: `button`