Hero Cinematic

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1800&q=80&auto=format&fit=crop`

type Finish = {
  id: string
  label: string
  color: string
  image: string
  alt: string

A dark, centered product hero whose glow, gradient headline and wide image all change with the selected finish. Below the image sit the finish name, round swatches, a Buy button and a Watch the film link. It always renders dark, which suits a flagship product launch.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/hero-cinematic

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks hero-cinematic

Manual

1. Add the pieces it builds on: Button, Toggle Group.

2. Copy the source into components/blocks/hero-cinematic.tsx:

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1800&q=80&auto=format&fit=crop`

type Finish = {
  id: string
  label: string
  color: string
  image: string
  alt: string

3. Update the import paths to match your project.

Usage

import { HeroCinematic } from "@/components/blocks/hero-cinematic"

<HeroCinematic />

Edit finishes; each has an id, label, CSS color, image and alt text, and the color drives both the glow and the headline gradient. Change the headline inline, give Buy a handler and point #film at your video.

Notes

The finish name is announced when the selection changes. Images are Unsplash placeholders.