Kage Design logo kage
masterclass.com
masterclass.com hero component

Design analysis

A full-bleed video panel provides an immersive product sample, with a left-side category selector layered over a darkened frame and a visible pause control.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146212-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp
- Component on Kage: https://kage.design/component/masterclass-hero-2

## Before you start
Ask what the user's product, content, and brand are, then design a representative immersive preview rather than copying this one.

Build a full-bleed video highlight section with a large cinematic background frame, a dark translucent overlay, and a left-aligned heading followed by a vertical list of content categories. The categories should look like plain high-contrast text links with a clear hover/active accent, not boxed controls. Add a small pause/play control in the upper-right and ensure the text remains readable over motion using a left-to-right gradient. Use black overlays at 45–65%, white #f4f4f4 text, muted gray inactive items, and the brand's accent for active state. Give the section a 16:9 minimum visual height on desktop, crop responsively, and provide a poster fallback, captions, keyboard controls, and reduced-motion behavior.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components