Hero 333 block design & features
Hero333 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 one chapter at a time. Three thin progress bars sit over the top of the picture. Each bar fills while that clip runs, then the next chapter starts on its own. Tapping a bar jumps to that clip. The active chapter label sits under the bars, and a caption repeats under the player.
The page stays light with dark type. A short fade at the top of the frame keeps the bars and label readable. The player uses a hairline border, large corner radius, and a sixteen-by-nine crop. Bars use a light fill over a faint track.
It reads like a story reel more than a tabbed teaser. Auto-advance is the distinctive piece: the tour moves without a click, and the bars show how far the current clip has gone. Complexity is moderate: you need a headline, two CTA labels, and a labeled clip for each chapter.
On small screens the buttons stack and the player stays full width.