# Golden Hour Hero > A hero for an AI trip planner, after the minimal split heroes of AI products: a three-line headline beside a quiet column with the button and a press strip, over a product window lit by a Golden Hour scene. In the window a frosted Footnote answers a traveler's question, numbering each claim from its source, and each example question relights the valley for its hour, running forward through the clock: golden hour, after dark, then sunrise. The sun goes down as the hero scrolls away. A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/golden-hour-hero). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/golden-hour-hero - Screenshot: https://shadcn.exchange/shot/keyframeui/golden-hour-hero/light.png - Registry item: https://keyframeui.com/r/golden-hour-hero.json - Categories: blocks, hero-sections - Listed: 2026-11-02, source last changed 2026-11-02 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/golden-hour-hero.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `motion` - Registry items: `https://keyframeui.com/r/footnote.json`, `https://keyframeui.com/r/golden-hour.json`, `utils` ## Notes from the registry Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/golden-hour-hero ## Files ### `registry/blocks/golden-hour-hero.tsx` ```tsx "use client"; import * as React from "react"; import { useReducedMotion } from "motion/react"; import { Footnote, type FootnoteClaim, type FootnoteSource } from "@/components/ui/footnote"; import { GoldenHour } from "@/components/ui/golden-hour"; import { cn } from "@/lib/utils"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the hero yours: the nav, the * copy, the names in the press strip, and the questions the * product answers in its window, each with the hour of day the * scene behind it is lit for. Keep the hours in the order of a * day, so each change runs forward through the clock. * ─────────────────────────────────────────────────────────── */ /** The one accent: the citation numbers, links and highlights in the answer. */ const ACCENT = { light: "#5b54d6", dark: "#a49dff" }; const BRAND = { name: "Meander", href: "#" }; const NAV_LINKS = [ { label: "How it works", href: "#how-it-works" }, { label: "Destinations", href: "#destinations" }, { label: "Pricing", href: "#pricing" }, ]; const SIGN_IN = { label: "Sign in", href: "#sign-in" }; const HEADLINE = "Trip plans that cite their sources."; const SUBLINE = "Meander reads the timetables, opening hours and local guides before it suggests a single stop, and links each one to where it found it. Ask in a sentence, check anything with a tap."; const PRIMARY_CTA = { label: "Plan a trip", href: "#plan" }; const SECONDARY_CTA = { label: "See a sample plan", href: "#sample" }; const NOTE = "Free for your first three trips."; /** Under the buttons: where it's been written about. Wordmarks set in type; swap in real logos. */ const PRESS_LABEL = "As seen in"; const PRESS: { name: string; className: string }[] = [ { name: "Wayfarer Weekly", className: "font-serif italic" }, { name: "NORTHBOUND", className: "font-mono text-[12px] tracking-[0.18em]" }, { name: "Slow Road", className: "font-semibold tracking-tight" }, { name: "field & fold", className: "font-medium lowercase" }, ]; /** The address in the product window's bar. */ const APP_URL = "meander.app/plan/brava-valley"; type Question = { /** The short label on the picker above the answer. */ label: string; question: string; /** Hour of the day (0–24) the scene is lit for while this answer shows. */ hour: number; read: number; sources: FootnoteSource[]; answer: FootnoteClaim[]; }; const QUESTIONS: Question[] = [ { label: "Train or car?", question: "Two days in the Brava Valley with a toddler: train or car?", hour: 17.6, read: 14, sources: [ { id: "rail", site: "valleyline.travel", title: "Valley Line timetable, winter 2026", href: "#valley-line", snippet: "Trains leave Porto Lume for Vila Brava every two hours from 07:10. The last train back leaves Vila Brava at 19:40.", quote: "The last train back leaves Vila Brava at 19:40", }, { id: "family", site: "smalltravelers.blog", title: "The Brava Valley with a two-year-old", href: "#small-travelers", snippet: "The valley road has eleven hairpins between Vila Brava and the river. Our daughter slept through the train and was carsick on the road.", quote: "eleven hairpins", }, { id: "estates", site: "bravaestates.org", title: "Wine estates: visits and bookings", href: "#estates", snippet: "Most estates open for visits at 10:00. At weekends, tastings must be booked at least a day ahead.", quote: "must be booked at least a day ahead", }, { id: "weather", site: "weatherdesk.io", title: "Vila Brava: October averages", href: "#october", snippet: "Afternoon highs average 19°C. Rain falls on about one day in four, mostly in the mornings.", quote: "about one day in four", }, ], answer: [ { text: "Take the train in and rent a car for one day.", cite: ["rail", "family"] }, { text: "Trains run every two hours; the last one back leaves at 19:40.", cite: "rail" }, { text: "The road has eleven hairpins, so plan the drive around a nap.", cite: "family" }, { text: "Book tastings a day ahead; estates open at 10:00.", cite: "estates" }, { text: "Expect around 19°C, with rain one day in four.", cite: "weather" }, ], }, { label: "Late dinner", question: "Somewhere good to eat after 9pm that isn't touristy?", hour: 20.4, read: 11, sources: [ { id: "kitchens", site: "localtable.guide", title: "Late kitchens in Vila Brava", href: "#late-kitchens", snippet: "Casa Rio takes its last orders at 22:30 and fills with boat crews after their shift.", quote: "takes its last orders at 22:30", }, { id: "reviews", site: "tablenotes.app", title: "Casa Rio: what 640 reviews mention", href: "#casa-rio", snippet: "Grilled fish and the river terrace come up most. Few of the reviews are in English.", quote: "Few of the reviews are in English", }, { id: "bus", site: "valleyline.travel", title: "Night buses", href: "#night-buses", snippet: "Bus 4 runs back to the upper town every 40 minutes until 00:20.", quote: "every 40 minutes until 00:20", }, ], answer: [ { text: "Try Casa Rio by the bridge: the kitchen takes orders until 22:30, and the boat crews eat there after work.", cite: "kitchens" }, { text: "Reviews mostly mention the grilled fish and the river terrace, and few are in English.", cite: "reviews" }, { text: "Bus 4 brings you back up the hill every 40 minutes until 00:20.", cite: "bus" }, ], }, { label: "Easy sunrise", question: "Where can we watch the sunrise without a hard climb?", hour: 7.3, read: 9, sources: [ { id: "trail", site: "serraalta.trails", title: "North Ridge viewpoint", href: "#north-ridge", snippet: "A 900 m path from the upper car park reaches the North Ridge viewpoint, with 60 m of gentle climb and a bench facing east.", quote: "60 m of gentle climb", }, { id: "sun", site: "sunclock.app", title: "Sunrise and sunset in Vila Brava", href: "#sun-times", snippet: "On 24 October the sun rises at 07:41 and sets at 18:32.", quote: "the sun rises at 07:41", }, { id: "parking", site: "bravaparks.org", title: "Upper car park: opening hours", href: "#car-park", snippet: "The upper car park opens at 06:30 from April to October, and at 07:00 through the winter.", quote: "opens at 06:30 from April to October", }, ], answer: [ { text: "Go to the North Ridge viewpoint: fifteen minutes from the upper car park, with only 60 m of climb.", cite: "trail" }, { text: "Sunrise is at 07:41, so leave the inn by 07:00.", cite: "sun" }, { text: "The car park opens at 06:30 until the end of October.", cite: "parking" }, { text: "Bring a layer: the bench faces east and catches the wind.", cite: "trail" }, ], }, ]; /** How long a finished answer stays before the next question plays, in ms. Resting on the window holds it; picking a question, or reduced motion, stops it. */ const NEXT_AFTER = 7000; /* ── Hero ────────────────────────────────────────────────── */ const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 dark:focus-visible:outline-white"; export function GoldenHourHero() { const [index, setIndex] = React.useState(0); const [finished, setFinished] = React.useState(-1); const [resting, setResting] = React.useState(false); const [picked, setPicked] = React.useState(false); const reduced = useReducedMotion(); const current = QUESTIONS[index]; // Once an answer has finished, the next question plays after a pause, unless the visitor is // reading it or has picked one themselves. React.useEffect(() => { if (finished !== index || resting || picked || reduced) return; const timer = window.setTimeout(() => setIndex((i) => (i + 1) % QUESTIONS.length), NEXT_AFTER); return () => window.clearTimeout(timer); }, [finished, index, resting, picked, reduced]); return (
{BRAND.name} {SIGN_IN.label}

{HEADLINE}

{SUBLINE}

{PRIMARY_CTA.label} {SECONDARY_CTA.label}

{NOTE}

{PRESS_LABEL}

    {PRESS.map((name) => (
  • {name.name}
    • ))}
{/* The product window: the valley lit for the question's hour, and the answer over it. */}
event.pointerType === "mouse" && setResting(true)} onPointerLeave={() => setResting(false)} onFocus={() => setResting(true)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) setResting(false); }} >

{APP_URL}

{QUESTIONS.map((q, i) => ( ))}
} onComplete={() => setFinished(index)} className="bg-white/75 shadow-2xl shadow-zinc-950/25 ring-white/60 backdrop-blur-xl dark:bg-zinc-950/60 dark:ring-white/15" />
); } /* ── Icons ───────────────────────────────────────────────── */ function MeanderMark({ className }: { className?: string }) { return ( ); } function ArrowIcon({ className }: { className?: string }) { return ( ); } ```