Hero 338 block design & features
Hero338 is a Shadcn UI section where images orbit the copy. A centered heading, short description, and primary button sit in the middle of a wide stage, with a soft halo behind them. Around them, two tilted elliptical rings of portrait images circle at different speeds and in opposite directions.
Each image scales up as it swings toward the viewer and shrinks, fades, and blurs as it swings away, so the rings read as true orbits. Images slip behind a soft halo as they pass the copy, so the headline stays readable. Hovering or focusing any image pauses the motion and shows a small title pill under it.
The block is playful and kinetic, a distinctive way to show off a range of products, people, or materials around a single message. It is moderately complex: all motion comes from one animation loop, and the ring radius, flattening, tilt, speed, and images are all props.
On phones the heading, description, and button sit above the rings rather than inside them, so the copy stays readable on a narrow stage.