Hero Section With Morphing Photo Arc
ProA light studio hero that opens on a ring of twenty photographs. It scrolls in its own container: that scroll morphs the ring into a bottom arc and walks the deck past a rail.
When to use Hero Section With Morphing Photo Arc
Use this when the product is a set of pictures, not a sentence. The ring of twenty stills is drawn on the first frame, so a visitor who lands here sees the work rather than an empty page assembling itself. Scrolling inside the section, not the page, opens that ring into a bottom arc and walks the deck so the edit can be read without leaving the first screen. The section nudges itself open once so nobody scrolls past without learning it moves, and a rail under the deck says how much is left. Nothing reacts to hover: the photographs are the message and a card that turns over on contact only takes one of them away.
Skip it when you have three product shots and a claim that has to be readable in the first second. The page stands still until the deck runs out and hands the scroll back, and a mid range phone is decoding twenty photographs at once, which is a second or two of placeholders on a cold visit. Replace the default frames with your own stills before this goes to production. The surface is a warm off-white with no dark variant, so it belongs on a studio, magazine, or campaign site rather than an enterprise dashboard.
Block details
- Category
- Hero Sections
- Renders
- JavaScript animation. Paints first, then animates
- Theme
- Fixed light surface. No dark variant
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxframer-motiontailwind-merge- Source
- 610 lines, 24 KB in one file
- Install
wensity add hero-section-with-morphing-photo-arc --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- light, photos, arc, scroll, ring, gallery, studio
- Last updated

