Hero Showreel

npx shadcn@latest add https://framebrick.co/r/flip-button.json https://framebrick.co/r/showreel.json

npx shadcn@latest add https://framebrick.co/r/blocks/tokens.json

import { FlipButton } from "@/components/ui/flip-button";
import { Showreel } from "@/components/ui/showreel";
import { cn } from "@/lib/utils";

/*
 * Hero Showreel — a short line beside a display heading, then a text block with a corner mark and two buttons, and a
 * small showreel of your work that cuts to the next image every two seconds, with its caption.
 * Source: marcframe/kalme → components/sections/HomeHeroSection.tsx (+ design-system Showreel, Button).
 *
 * Layout kept from Framer: below 1024px the line sits above the heading; from 1024px it takes a 150px column beside
 * the heading (up to 750px), 48px apart. Under them, 32px apart (48px from 768px): on phones the showreel first, full
 * width (5:3), and the text under it; from 768px the text at the left and the showreel (250px wide, 300px from 1024px)
 * at the right, aligned to the top (to the bottom from 1024px, where the text is indented by 200px). The text block:
 * a 14px corner mark (two 2px lines, top and right), then the text (up to 325px) and the two buttons.
 * Motion kept: the showreel cuts to the next image every 2s with no transition, starting over after the last
 * (showreel); it holds the first image with reduced motion. The buttons roll their label (flip-button).
 * Dropped: Kalme's dot on the buttons. The showreel images are decorative.
 */

export type HeroShowreelProps = {
  /** Heading level: h1 when the hero opens the page. */
  as?: "h1" | "h2";
  /** Short line beside (or above) the heading. */
  label?: string;
  title?: string;
  text?: string;
  /** Filled and outlined buttons. */
  actions?: { label: string; href: string }[];
  /** Images the showreel cycles through (decorative). */
  images?: string[];
  /** Two short lines under the showreel. */
  caption?: [string, string?];
  /** Milliseconds each image stays. */
  interval?: number;
  className?: string;
};

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

const defaults = {
  label: "Digital marketing that drives growth",
  title: "Lift your brand with work people remember",
  text: "From creative campaigns to data-led strategy, we help you reach, engage and convert — wherever your customers are.",
  actions: [
    { label: "Start a project", href: "/contact" },
    { label: "Our case studies", href: "/projects" },
  ],
  images: [
    photo("photo-1504674900247-0877df9cc836"),
    photo("photo-1534438327276-14e5300c3a48"),
    photo("photo-1441986300917-64674bd600d8"),
    photo("photo-1523275335684-37898b6baf30"),
  ],
  caption: ["Studio showreel", "(Clients — 2018/2026)"] as [string, string?],
};

export function HeroShowreel({
  as: Heading = "h1",
  label = defaults.label,
  title = defaults.title,
  text = defaults.text,
  actions = defaults.actions,
  images = defaults.images,
  caption = defaults.caption,
  interval = 2000,
  className,
}: HeroShowreelProps) {
  const [primary, secondary] = actions;
  return (
    <section className={cn("py-(--section-y)", className)}>
      <div className="mx-auto flex max-w-(--container) flex-col gap-8 px-(--gutter) md:gap-12">
        <div className="flex flex-col items-start gap-2.5 lg:flex-row lg:gap-12">
          {label && <p className="text-muted-foreground lg:w-37.5 lg:shrink-0 lg:pt-4">{label}</p>}
          <Heading className="font-heading text-display font-semibold tracking-tight text-balance md:max-w-175 lg:w-187.5 lg:max-w-none">
            {title}
          </Heading>
        </div>

        <div className="flex flex-col gap-12 md:flex-row md:items-start md:justify-between lg:items-end">
          <div className="order-2 flex items-start gap-2.5 md:order-1 lg:pl-50">
            <span aria-hidden className="shrink-0 pt-1.5 pr-4">
              <span className="block size-3.5 border-t-2 border-r-2 border-foreground" />
            </span>
            <div className="flex max-w-81.25 flex-col items-start gap-7.5">
              {text && <p className="text-lead text-pretty">{text}</p>}
              {actions.length > 0 && (
                <div className="flex flex-wrap items-center gap-2.5">
                  {primary && <FlipButton href={primary.href}>{primary.label}</FlipButton>}
                  {secondary && (
                    <FlipButton href={secondary.href} variant="outline">
                      {secondary.label}
                    </FlipButton>
                  )}
                </div>
              )}
            </div>
          </div>

          {images.length > 0 && (
            <div className="order-1 flex w-full flex-col items-start gap-1.5 md:order-2 md:w-62.5 lg:w-75">
              <Showreel
                interval={interval}
                className="aspect-[5/3] w-full rounded-xl"
                items={images.map((src) => (
                  <img key={src} src={src} alt="" className="object-cover" />
                ))}
              />
              {caption[0] && (
                <div className="text-sm text-muted-foreground">
                  <p>{caption[0]}</p>
                  {caption[1] && <p>{caption[1]}</p>}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}