@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/hero-video-in-type/HeroVideoInType.tsx

@@ -0,0 +1,374 @@
+"use client"
+
+import * as React from "react"
+import { Pause, Play, VolumeX } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Video-in-Type Hero.
+ *
+ * A film launch on a `primary` band: a "now playing" line behind a red dot,
+ * a huge two-line word with the footage playing inside its letters, a
+ * playback bar under it, and a paragraph with two buttons.
+ *
+ * Desktop keeps the line, the word and the bar in the start column and sets
+ * the paragraph and buttons in a 430px column at the end, its foot 48px above
+ * the bar's. Tablet and Mobile stack everything in that order, the bar at full
+ * width; the word steps down from 9XL to 7XL, and Mobile also steps the
+ * paragraph down and stacks the buttons at full width.
+ *
+ * The footage is a real video, muted and looping, and plays inside the
+ * letters. Under it lies the poster, its first frame. The word is the `h1`,
+ * real text, set twice over the video: an unseen copy multiplies it (white
+ * letters keep the footage, the black ground removes it), then the heading
+ * screens the result (its black letters let the footage through, its ground,
+ * the section's own colour, shows exactly). Black and white are the blend's
+ * two constants, not paint: neither ever shows. So the band and the space
+ * round the letters are the same token, and the letters are the footage.
+ *
+ * The band is `primary` in light mode. In dark mode `primary` turns light and
+ * bright footage would not read against it, so the band stays dark there:
+ * `background`, with `foreground` text and a light playback bar.
+ *
+ * The video starts on its own unless the visitor asks for reduced motion;
+ * then the letters hold the poster, still, until they press play. Figma's
+ * playback bar is the real control: its button plays and pauses the video,
+ * and the time and the track follow the video's own position and length.
+ * Without a video there is nothing to play: the letters hold the poster, or
+ * `muted` without one, and the bar is left out. The footage is decoration
+ * and hidden from assistive technology; the heading carries the words.
+ *
+ * In Arabic the columns mirror: the word and the bar sit on the right and the
+ * paragraph on the left, and the track fills from the right, as Figma draws
+ * it. The play glyph is never flipped, the time stays left to right, and the
+ * footage is never mirrored.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the switch every Hero block shares, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroVideoInTypeAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroVideoInTypeVideo {
+  src: string
+  /** The file's MIME type, such as `video/webm`. Lets the browser skip a format it can't play. */
+  type?: string
+}
+
+export interface HeroVideoInTypePoster {
+  src: string
+  /**
+   * Describes the frame. The footage sits inside the headline as decoration
+   * and is hidden from assistive technology, so this is not announced here.
+   */
+  alt: string
+}
+
+export interface HeroVideoInTypeCopy {
+  /** The line beside the red dot, above the word. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The word the footage plays in, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The paragraph beside the word. */
+  description: React.ReactNode
+  /** The light button. */
+  primaryAction: HeroVideoInTypeAction
+  /** The ghost button beside it. Hidden when null. */
+  secondaryAction: HeroVideoInTypeAction | null
+  /** The label at the end of the playback bar: the footage has no sound. */
+  mutedLabel: React.ReactNode
+  /** The playback bar's accessible name. */
+  controlsLabel: string
+  /** The play button's accessible name while the video plays. */
+  pauseLabel: string
+  /** Its accessible name while the video is paused. */
+  playLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroVideoInTypeCopy> = {
+  en: {
+    eyebrow: (
+      <>
+        NOW PLAYING — NORTHFIELD FILM <bdi dir="ltr">01</bdi>
+      </>
+    ),
+    headline: "IN\nMOTION",
+    description: "A year of work, cut to four minutes — the studio, the arguments, the launches that stuck.",
+    primaryAction: { label: "Watch full film", href: "#film" },
+    secondaryAction: { label: "Credits", href: "#credits" },
+    mutedLabel: "muted",
+    controlsLabel: "Film playback",
+    pauseLabel: "Pause the film",
+    playLabel: "Play the film",
+  },
+  ar: {
+    eyebrow: (
+      <>
+        يُعرض الآن، فيلم شمال <bdi dir="ltr">01</bdi>
+      </>
+    ),
+    headline: "في\nحركة",
+    description: "عام من العمل في أربع دقائق: الاستوديو، والنقاشات، والإطلاقات التي بقيت.",
+    primaryAction: { label: "شاهد الفيلم كاملًا", href: "#film" },
+    secondaryAction: { label: "فريق العمل", href: "#credits" },
+    mutedLabel: "صامت",
+    controlsLabel: "تشغيل الفيلم",
+    pauseLabel: "إيقاف الفيلم مؤقتًا",
+    playLabel: "تشغيل الفيلم",
+  },
+}
+
+/** The word's type, shared by the heading and its unseen copy so their letters land on the same pixels. */
+const WORD = "whitespace-pre-line text-7xl font-semibold [@container(min-width:90rem)]:text-9xl"
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+  if (typeof window.matchMedia !== "function") return () => {}
+  const query = window.matchMedia(REDUCED_MOTION)
+  query.addEventListener("change", onChange)
+  return () => query.removeEventListener("change", onChange)
+}
+
+/** Whether the visitor asks for reduced motion, kept up to date. False on the server and while hydrating. */
+function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches,
+    () => false
+  )
+}
+
+/** Seconds as `mm:ss`. Nothing known yet reads as `00:00`. */
+function clock(seconds: number) {
+  const whole = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0
+  return `${String(Math.floor(whole / 60)).padStart(2, "0")}:${String(whole % 60).padStart(2, "0")}`
+}
+
+export interface HeroVideoInTypeProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroVideoInTypeCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The footage that plays inside the letters: muted, looping, and started
+   * on its own unless the visitor asks for reduced motion. None by default:
+   * the letters hold the poster, and the playback bar is left out.
+   * @default none: the poster, still
+   */
+  video?: HeroVideoInTypeVideo
+  /**
+   * The video's first frame, shown inside the letters until it plays, under
+   * reduced motion, and in place of a missing video. None by default: the
+   * letters show the `muted` colour in its place.
+   * @default none: a `muted` placeholder
+   */
+  poster?: HeroVideoInTypePoster
+}
+
+export function HeroVideoInType({
+  locale = "en",
+  eyebrow,
+  headline,
+  description,
+  primaryAction,
+  secondaryAction,
+  mutedLabel,
+  controlsLabel,
+  pauseLabel,
+  playLabel,
+  video,
+  poster,
+  className,
+  ...props
+}: HeroVideoInTypeProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const reduced = usePrefersReducedMotion()
+  const videoRef = React.useRef<HTMLVideoElement>(null)
+  /** Set once the visitor pauses: the video then waits for them, whatever the motion setting does. */
+  const heldRef = React.useRef(false)
+  const [playing, setPlaying] = React.useState(false)
+  const [time, setTime] = React.useState({ current: 0, duration: 0 })
+  const label = eyebrow ?? copy.eyebrow
+  const word = headline ?? copy.headline
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const src = video?.src
+
+  // Starts the footage once mounted, never under reduced motion, and stops it
+  // when the visitor turns reduced motion on. The query is read here, not from
+  // the hook: while hydrating the hook still says false, and the video would
+  // play for a frame before stopping.
+  React.useEffect(() => {
+    const element = videoRef.current
+    if (!element) return
+    if (window.matchMedia?.(REDUCED_MOTION).matches) {
+      element.pause()
+      return
+    }
+    if (heldRef.current) return
+    element.muted = true
+    element.play().catch(() => {
+      // The browser refused to start it: it stays on the poster, and the
+      // button offers play.
+    })
+  }, [reduced, src])
+
+  /** Reads the position and length off the video. */
+  const sync = (element: HTMLVideoElement) => setTime({ current: element.currentTime, duration: element.duration })
+
+  const toggle = () => {
+    const element = videoRef.current
+    if (!element) return
+    if (element.paused) {
+      heldRef.current = false
+      element.muted = true
+      element.play().catch(() => {})
+    } else {
+      heldRef.current = true
+      element.pause()
+    }
+  }
+
+  const progress = time.duration > 0 ? Math.min(100, (time.current / time.duration) * 100) : 0
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-primary dark:bg-background", className)} {...props}>
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="mx-auto grid w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] content-start gap-10 px-4 py-8 [@container(min-width:48rem)]:gap-12 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:min-h-[800px] [@container(min-width:90rem)]:grid-cols-[minmax(0,1fr)_26.875rem] [@container(min-width:90rem)]:gap-x-8 [@container(min-width:90rem)]:gap-y-0 [@container(min-width:90rem)]:px-[110px] [@container(min-width:90rem)]:py-[110px]">
+        {label ? (
+          <p className="flex items-center gap-3 text-sm font-medium text-primary-foreground/75 dark:text-foreground/75 [@container(min-width:90rem)]:col-start-1">
+            <span aria-hidden className="size-[9px] shrink-0 rounded-full bg-destructive" />
+            <span>{label}</span>
+          </p>
+        ) : null}
+
+        {/*
+           * The word, hugging its letters. Bottom to top: the footage, the
+           * unseen copy that multiplies it (white letters on black), and the
+           * heading that screens the result (black letters on `primary`). In
+           * forced colours the blends are gone, so the footage and the copy
+           * step aside and the heading reads as plain text.
+           */}
+        <div className="relative isolate w-fit max-w-full overflow-hidden [@container(min-width:90rem)]:col-start-1 [@container(min-width:90rem)]:mt-[50px]">
+          <div aria-hidden className="absolute inset-0 bg-muted forced-colors:hidden">
+            {video ? (
+              <video
+                key={video.src}
+                ref={videoRef}
+                poster={poster?.src}
+                muted
+                loop
+                playsInline
+                preload="metadata"
+                tabIndex={-1}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onLoadedMetadata={(event) => sync(event.currentTarget)}
+                onDurationChange={(event) => sync(event.currentTarget)}
+                onTimeUpdate={(event) => sync(event.currentTarget)}
+                className="absolute inset-0 size-full object-cover"
+              >
+                <source src={video.src} type={video.type} />
+              </video>
+            ) : poster ? (
+              <img src={poster.src} alt={poster.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+            ) : null}
+          </div>
+          <p aria-hidden className={cn("absolute inset-0 bg-[black] text-[white] mix-blend-multiply forced-colors:hidden", WORD)}>
+            {word}
+          </p>
+          <h1 id={headingId} className={cn("relative bg-primary text-[black] mix-blend-screen dark:bg-background", WORD)}>
+            {word}
+          </h1>
+        </div>
+
+        {video ? (
+          <div
+            role="group"
+            aria-label={controlsLabel ?? copy.controlsLabel}
+            className="flex h-8 min-w-0 items-center gap-4 rounded-full bg-primary-foreground/95 pe-4 ps-2 text-xs text-primary dark:bg-foreground/95 dark:text-background [@container(min-width:90rem)]:col-start-1 [@container(min-width:90rem)]:mt-[94px] [@container(min-width:90rem)]:w-fit"
+          >
+            {/* Figma's play glyph, as the real button: it plays and pauses the footage. */}
+            <Button
+              type="button"
+              variant="ghost"
+              tone="primary"
+              size="icon-sm"
+              radius="rounded"
+              aria-label={playing ? pauseLabel ?? copy.pauseLabel : playLabel ?? copy.playLabel}
+              onClick={toggle}
+              className="-me-2 dark:text-background hover:dark:bg-background/10 hover:dark:text-background active:dark:bg-background/10 active:dark:text-background"
+            >
+              {playing ? (
+                <Pause aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth fill="currentColor" />
+              ) : (
+                <Play aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth fill="currentColor" />
+              )}
+            </Button>
+            <p className="whitespace-nowrap font-medium tabular-nums">
+              <bdi dir="ltr">
+                {clock(time.current)} / {clock(time.duration)}
+              </bdi>
+            </p>
+            {/* The track follows the video; the time beside it says the same in words. */}
+            <div
+              aria-hidden
+              className="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-primary/25 dark:bg-background/25 [@container(min-width:90rem)]:w-[220px] [@container(min-width:90rem)]:flex-none"
+            >
+              <div className="h-full rounded-full bg-primary dark:bg-background" style={{ width: `${progress}%` }} />
+            </div>
+            <p className="flex shrink-0 items-center gap-1 whitespace-nowrap">
+              <VolumeX aria-hidden="true" size={12} strokeWidth={1.5} absoluteStrokeWidth className="size-3" />
+              {mutedLabel ?? copy.mutedLabel}
+            </p>
+          </div>
+        ) : null}
+
+        <div className="flex min-w-0 flex-col gap-5 [@container(min-width:90rem)]:col-start-2 [@container(min-width:90rem)]:row-span-3 [@container(min-width:90rem)]:row-start-1 [@container(min-width:90rem)]:mb-12 [@container(min-width:90rem)]:self-end">
+          <p className="text-pretty text-base text-primary-foreground dark:text-foreground [@container(min-width:48rem)]:text-lg">{description ?? copy.description}</p>
+          <div className="flex flex-col gap-3 [@container(min-width:48rem)]:flex-row">
+            <a href={primary.href} className={buttonVariants({ variant: "secondary", size: "lg" })}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a
+                href={secondary.href}
+                // Figma sets the ghost label in `primary-foreground` to read on
+                // the band; the hover tint follows it, so the label stays legible.
+                className={buttonVariants({
+                  variant: "ghost",
+                  tone: "secondary",
+                  size: "lg",
+                  className: "text-primary-foreground hover:bg-primary-foreground/10 active:bg-primary-foreground/10 dark:text-foreground hover:dark:bg-foreground/10 active:dark:bg-foreground/10",
+                })}
+              >
+                {secondary.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroVideoInTypeCopy = COPY

package/registry/blocks/hero-video-in-type/index.ts

@@ -0,0 +1,9 @@
+export {
+  HeroVideoInType,
+  heroVideoInTypeCopy,
+  type HeroVideoInTypeAction,
+  type HeroVideoInTypeCopy,
+  type HeroVideoInTypePoster,
+  type HeroVideoInTypeProps,
+  type HeroVideoInTypeVideo,
+} from "./HeroVideoInType"

package/registry/blocks/hero-video-spotlight/HeroVideoSpotlight.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Video Spotlight Hero.
+ *
+ * A film in the spotlight: a centred headline between two thin rules, a
+ * line about the film, and one large card holding it. Before it plays the
+ * card shows the poster, a round play button in its middle, a small panel
+ * with the film's title and a line about it at the bottom start, and a chip
+ * with its running time at the bottom end.
+ *
+ * It is a real player. The play button starts the film with sound, since the
+ * visitor chose to play it, hides the poster and its labels, and hands over
+ * to the browser's own controls: keyboard operable, with a captions menu when
+ * `captions` are passed, and full screen. Focus moves to the player, so it
+ * is not lost with the button. It never plays by itself, so reduced motion
+ * needs nothing more. Without a `video` the card is a still: the poster and
+ * its labels, no button.
+ *
+ * Desktop draws the rules beside the headline and the card 560px tall, its
+ * labels 24px from the edges. Tablet keeps the rules, the card 400px tall and
+ * the labels 16px in. Mobile drops the rules and the title panel, sets the
+ * headline at the start as Figma does, and keeps the card 220px tall with the
+ * running time.
+ *
+ * In Arabic the title panel moves to the right and the running time to the
+ * left. The running time stays left to right. The poster and the film are
+ * never flipped, and neither is the play triangle: it names the direction a
+ * film runs, not the direction of reading.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container and everything inside, its padding included, follows it. Mobile
+ * is the base; `[@container(min-width:48rem)]:` is Figma's Tablet (768) and
+ * `[@container(min-width:90rem)]:` its Desktop, from 1440px, the width Figma
+ * draws it at. Narrower, the wide card turns into a letterbox, so Tablet's
+ * layout covers 768 to 1439.
+ */
+
+export interface HeroVideoSpotlightVideo {
+  src: string
+  /** The file's media type, such as "video/webm". Lets the browser skip a format it cannot play. */
+  type?: string
+  /**
+   * The video's CORS mode. Set it when the captions come from another origin:
+   * a browser loads a cross-origin caption track only when the video asks
+   * for CORS, and the video's own server then has to allow it too.
+   */
+  crossOrigin?: "anonymous" | "use-credentials"
+}
+
+export interface HeroVideoSpotlightPoster {
+  src: string
+  /** Describes the still. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroVideoSpotlightCaptions {
+  /** A WebVTT file. From another origin it needs CORS headers, and the video's `crossOrigin` set. */
+  src: string
+  /** The captions' language, such as "en" or "ar". */
+  srcLang: string
+  /** The name the player's captions menu shows. */
+  label: string
+  /** Turns these captions on from the start. */
+  default?: boolean
+}
+
+export interface HeroVideoSpotlightCopy {
+  /** The headline, an `h1`. */
+  headline: React.ReactNode
+  /** The line under the headline. */
+  description: React.ReactNode
+  /** The film's title, in the panel at the card's bottom start. Also the player's name. Hidden when empty. */
+  videoTitle: React.ReactNode
+  /** The line under the title. Hidden when empty. */
+  videoDescription: React.ReactNode
+  /** The running time, in the chip at the card's bottom end. Shown left to right. Hidden when empty. */
+  duration: React.ReactNode
+  /** The play button's accessible name. */
+  playLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroVideoSpotlightCopy> = {
+  en: {
+    headline: "Make every team calm",
+    description: "Four minutes on why we think work should feel quieter — and what we built to get there.",
+    videoTitle: "The Northfield story",
+    videoDescription: "Our founders on calm software",
+    duration: "4:12",
+    playLabel: "Play the film",
+  },
+  ar: {
+    headline: "اجعل كل فريق هادئًا",
+    description: "أربع دقائق عن سبب إيماننا بأن العمل يجب أن يكون أهدأ، وما بنيناه لنصل إلى ذلك.",
+    videoTitle: "قصة شمال",
+    videoDescription: "مؤسسونا يتحدثون عن البرمجيات الهادئة",
+    duration: "4:12",
+    playLabel: "شغّل الفيلم",
+  },
+}
+
+export interface HeroVideoSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroVideoSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The film. None by default: the card is a still, with no play button.
+   * @default none: a still card
+   */
+  video?: HeroVideoSpotlightVideo
+  /**
+   * The still shown before the film plays, usually its first frame. None by
+   * default: the card shows the `muted` colour in its place.
+   * @default none: a `muted` placeholder
+   */
+  poster?: HeroVideoSpotlightPoster
+  /**
+   * Caption tracks, one per language, offered in the player's captions menu.
+   * @default none
+   */
+  captions?: HeroVideoSpotlightCaptions[]
+}
+
+export function HeroVideoSpotlight({
+  locale = "en",
+  headline,
+  description,
+  videoTitle,
+  videoDescription,
+  duration,
+  playLabel,
+  video,
+  poster,
+  captions,
+  className,
+  ...props
+}: HeroVideoSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const titleId = React.useId()
+  const panelId = React.useId()
+  const durationId = React.useId()
+  const title = videoTitle ?? copy.videoTitle
+  const subtitle = videoDescription ?? copy.videoDescription
+  const time = duration ?? copy.duration
+  const hasPanel = Boolean(title || subtitle)
+
+  const videoRef = React.useRef<HTMLVideoElement>(null)
+  // The film that was started. A new `video` reads as not started, so the
+  // poster and its button come back without clearing any state.
+  const [startedSrc, setStartedSrc] = React.useState<string | null>(null)
+  const started = video !== undefined && startedSrc === video.src
+
+  const play = () => {
+    const player = videoRef.current
+    if (!player || !video) return
+    setStartedSrc(video.src)
+    // Inside the click, so the browser counts it as the visitor's choice and
+    // lets the film play with sound. If it still refuses, the player's own
+    // controls are showing by then to start it.
+    player.play().catch(() => {})
+  }
+
+  // The button is gone once the film starts: keep focus on the player.
+  React.useEffect(() => {
+    if (started) videoRef.current?.focus()
+  }, [started])
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background", className)} {...props}>
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="mx-auto flex w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col gap-10 px-4 py-8 [@container(min-width:48rem)]:gap-12 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:gap-8 [@container(min-width:90rem)]:px-20 [@container(min-width:90rem)]:pb-16 [@container(min-width:90rem)]:pt-20">
+        <div className="flex items-center gap-6">
+          {/* A plain 1px line where Figma draws its Separator. Swap in Separator once it is built. */}
+          <div aria-hidden className="hidden h-px min-w-8 flex-1 bg-border [@container(min-width:48rem)]:block" />
+          <h1
+            id={headingId}
+            className="min-w-0 text-balance text-4xl font-semibold text-foreground [@container(min-width:48rem)]:text-center [@container(min-width:48rem)]:text-5xl [@container(min-width:90rem)]:text-6xl"
+          >
+            {headline ?? copy.headline}
+          </h1>
+          <div aria-hidden className="hidden h-px min-w-8 flex-1 bg-border [@container(min-width:48rem)]:block" />
+        </div>
+
+        <p className="text-balance text-center text-base text-muted-foreground [@container(min-width:48rem)]:text-lg">
+          {description ?? copy.description}
+        </p>
+
+        <div
+          className={cn(
+            "relative h-[220px] w-full overflow-hidden rounded-xl shadow-lg [@container(min-width:48rem)]:h-[400px] [@container(min-width:90rem)]:h-[560px]",
+            // Playing, the film is shown whole, on a dark band in both modes
+            // where its shape differs from the card's.
+            started ? "bg-background-inverse dark:bg-muted" : "bg-muted"
+          )}
+        >
+          {video ? (
+            <video
+              key={video.src}
+              ref={videoRef}
+              crossOrigin={video.crossOrigin}
+              preload="metadata"
+              playsInline
+              controls={started}
+              tabIndex={started ? 0 : -1}
+              aria-hidden={started ? undefined : true}
+              aria-labelledby={title ? titleId : undefined}
+              className={cn("absolute inset-0 size-full", started ? "object-contain" : "object-cover")}
+            >
+              <source src={video.src} type={video.type} />
+              {captions?.map((track) => (
+                <track key={track.src} kind="captions" src={track.src} srcLang={track.srcLang} label={track.label} default={track.default} />
+              ))}
+            </video>
+          ) : null}
+
+          {started ? null : poster ? (
+            <img src={poster.src} alt={poster.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+          ) : video ? (
+            <div aria-hidden className="absolute inset-0 bg-muted" />
+          ) : null}
+
+          {/* No display class on this wrapper, so `hidden` hides it. Kept in the DOM: the title names the player. */}
+          <div hidden={started}>
+            {hasPanel ? (
+              <div
+                id={panelId}
+                className="absolute bottom-4 start-4 hidden max-w-[60%] flex-col gap-1 rounded-lg bg-background px-4 py-3 shadow-md [@container(min-width:48rem)]:flex [@container(min-width:90rem)]:bottom-6 [@container(min-width:90rem)]:start-6"
+              >
+                {title ? (
+                  <p id={titleId} className="text-sm font-semibold text-foreground">
+                    {title}
+                  </p>
+                ) : null}
+                {subtitle ? <p className="text-xs text-muted-foreground">{subtitle}</p> : null}
+              </div>
+            ) : null}
+            {time ? (
+              <p
+                id={durationId}
+                className="absolute bottom-4 end-4 whitespace-nowrap rounded-full bg-background px-2.5 py-1 text-xs text-muted-foreground [@container(min-width:90rem)]:bottom-6 [@container(min-width:90rem)]:end-6"
+              >
+                <bdi dir="ltr">{time}</bdi>
+              </p>
+            ) : null}
+          </div>
+
+          {video && !started ? (
+            <button
+              type="button"
+              onClick={play}
+              aria-label={playLabel ?? copy.playLabel}
+              aria-describedby={[hasPanel ? panelId : "", time ? durationId : ""].filter(Boolean).join(" ") || undefined}
+              className="absolute inset-0 m-auto size-[84px] cursor-pointer rounded-full bg-background text-foreground shadow-lg transition-colors duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)] [outline:none] motion-reduce:transition-none hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring forced-colors:border forced-colors:border-[ButtonText]"
+            >
+              {/*
+                 * Figma's triangle: 34 × 36 with 4px corners, its centre of
+                 * mass on the circle's centre. Drawn 4px inside its edge and
+                 * stroked 8px with round joins, which rounds the corners.
+                 */}
+              <svg aria-hidden viewBox="0 0 84 84" className="absolute inset-0 size-full">
+                <path
+                  d="M35.5 30.7 56.4 42 35.5 53.3Z"
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeWidth={8}
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroVideoSpotlightCopy = COPY

package/registry/blocks/hero-video-spotlight/index.ts

@@ -0,0 +1,9 @@
+export {
+  HeroVideoSpotlight,
+  heroVideoSpotlightCopy,
+  type HeroVideoSpotlightCaptions,
+  type HeroVideoSpotlightCopy,
+  type HeroVideoSpotlightPoster,
+  type HeroVideoSpotlightProps,
+  type HeroVideoSpotlightVideo,
+} from "./HeroVideoSpotlight"