Search blocks by description or jump to a page.
A left aligned hero for an image library with a two line headline, a lede and two pills over a CSS 3D coverflow of five photographs.
The source for every Modern SaaS block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Asset Carousel is a left aligned hero for a product that is about pictures. A transparent navbar sits on the page, the two line headline, lede and pills sit on the content column, and below them five bare photographs stand on a convex curve: the center photo faces the reader and each side turns its outer edge away, the far photos smaller and steeper, their outer edges landing on the column's edges.
The curve turns on its own every four seconds, one photo at a time, and loops without end. It pauses under the pointer and while a photo has keyboard focus, it can be dragged or swiped, the arrow keys step it, and clicking a side photo brings it to the center. Anyone who prefers reduced motion gets a still curve.
It is the shadcn Carousel with Embla's autoplay plugin. As the slides move, each photo is turned and pushed back by its distance from the center in real CSS 3D, measured in container units, so a photo travels the curve smoothly and the whole shape scales with the column. On small screens the curve runs wider than the viewport, so the center photo stays large and the outer ones bleed off the edges.
Use it for a digital asset manager, a stock or brand library, a portfolio tool or any product where the work itself is the best argument. The photographs do the showing, so the copy can stay short and plain.
A natural flow around it on a Modern SaaS page:
Before
After
public/blocks and edit the photos array: a source, alt text and an
object-position that keeps each subject in its 440 by 336 frame.STOPS holds the pull, depth, turn and opacity one, two and
three photos from the center, in pixels of a 1232 wide column. Change the
turns for a flatter or deeper curve.Autoplay, and
duration in the carousel options sets how quickly a turn travels.Tip: shoot or pick the five photos as one set. A shared grade and grain makes the curve read as one library rather than five unrelated images.