Hero Section With Morphing Photo Arc

Pro

A 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

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

More hero sections