Hero 334 block design & features
Hero334 is a centered hero built with shadcn/ui. A large headline and supporting paragraph sit above paired buttons. Below the intro, a framed video plays the active chapter. A frosted filmstrip dock sits as a right-centered overlay on the picture. Each still is a sixteen-by-nine crop with a chapter label and a thin progress track. The active thumb uses a light ring. When a clip ends the next chapter starts on its own. Clicking a thumb jumps to that clip.
The page stays light with dark type. The dock uses a muted glass fill, soft shadow, and sixteen-by-nine stills stacked vertically. The main player uses a sixteen-by-nine crop.
It reads as a product tour you can scrub by picture instead of by tab label. The vertical glass dock on the right is the distinctive piece. Complexity is moderate: you need a headline, two CTA labels, and a clip plus still for each chapter.
On small screens the buttons stack and the filmstrip stays three high, still overlaid on the player.