# Golden Hour Features

> A feature section for a trip planner that plans around the light: four moments of one day (first light, midday, golden hour, after dark), each on a Golden Hour scene lit for its hour, with the plan's stop on a frosted card. Rest on a moment and its light moves on most of an hour.

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-features).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/golden-hour-features
- Screenshot: https://shadcn.exchange/shot/keyframeui/golden-hour-features/light.png
- Registry item: https://keyframeui.com/r/golden-hour-features.json
- Categories: blocks, feature-sections
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/golden-hour-features.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `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/feature-sections/golden-hour-features

## Files

### `registry/blocks/golden-hour-features.tsx`

```tsx
"use client";

import * as React from "react";

import { GoldenHour } from "@/components/ui/golden-hour";
import { cn } from "@/lib/utils";

/* ── Content ─────────────────────────────────────────────────
 * Everything you'd change to make the section yours: the copy
 * and the four moments of a planned day, each with the hour its
 * scene is lit for and the hills it's drawn with (`seed`).
 * ─────────────────────────────────────────────────────────── */

const EYEBROW = "Plans around the light";
const HEADLINE = "Every day is planned around sunrise and sunset.";
const SUBLINE =
  "Meander knows when the light is best, when it's gone and when the last train leaves, and builds each day around all three.";

type Moment = {
  light: string;
  time: string;
  title: string;
  detail: string;
  hour: number;
  seed: number;
  horizon: number;
  road?: boolean;
  wide?: boolean;
};

const MOMENTS: Moment[] = [
  {
    light: "First light",
    time: "06:52",
    title: "Sunrise from the north ridge",
    detail: "Leave the inn at 06:10. Forty minutes on the marked trail, headlamp optional.",
    hour: 6.5,
    seed: 11,
    horizon: 0.52,
    wide: true,
  },
  {
    light: "Midday",
    time: "12:30",
    title: "Lunch where the boatmen eat",
    detail: "Table for two at Casa Rio, booked.",
    hour: 12.6,
    seed: 5,
    horizon: 0.5,
    road: false,
  },
  {
    light: "Golden hour",
    time: "17:50",
    title: "The old mill at its best",
    detail: "Light is warmest until 18:20. Twelve minutes by car.",
    hour: 17.7,
    seed: 8,
    horizon: 0.5,
    road: false,
  },
  {
    light: "After dark",
    time: "19:48",
    title: "Last train back, then the stars",
    detail: "Platform 2 at Vila Brava. Clear skies forecast from 21:00.",
    hour: 21.4,
    seed: 2,
    horizon: 0.52,
    wide: true,
  },
];

/** Hours the light moves on while a visitor rests on a moment. */
const LINGER = 0.8;

/* ── Section ─────────────────────────────────────────────── */

export function GoldenHourFeatures() {
  const [resting, setResting] = React.useState<number | null>(null);

  return (
    <section
      aria-labelledby="golden-hour-features-title"
      className="bg-[#f3f1ec] text-zinc-950 dark:bg-zinc-950 dark:text-white"
    >
      <div className="mx-auto max-w-6xl px-6 py-24 sm:py-32">
        <div className="max-w-2xl">
          <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">{EYEBROW}</p>
          <h2
            id="golden-hour-features-title"
            className="mt-3 text-4xl/[1.05] font-medium tracking-[-0.035em] text-balance sm:text-5xl/[1.02]"
          >
            {HEADLINE}
          </h2>
          <p className="mt-5 max-w-xl text-base/7 text-pretty text-zinc-600 sm:text-lg/8 dark:text-zinc-400">{SUBLINE}</p>
        </div>

        <ul className="mt-14 grid gap-4 md:grid-cols-5">
          {MOMENTS.map((moment, index) => (
            <li
              key={moment.title}
              className={cn(moment.wide ? "md:col-span-3" : "md:col-span-2")}
              onPointerEnter={(event) => event.pointerType === "mouse" && setResting(index)}
              onPointerLeave={() => setResting((current) => (current === index ? null : current))}
              onFocus={() => setResting(index)}
              onBlur={() => setResting((current) => (current === index ? null : current))}
            >
              <GoldenHour
                time={moment.hour + (resting === index ? LINGER : 0)}
                seed={moment.seed}
                horizon={moment.horizon}
                road={moment.road ?? true}
                className="flex h-80 flex-col justify-between rounded-3xl p-4 sm:h-96 sm:p-5"
              >
                <p className="self-start rounded-full bg-zinc-950/25 px-3 py-1 text-xs font-medium text-white ring-1 ring-white/20 backdrop-blur-xl">
                  {moment.light}
                </p>
                <a
                  href="#plan"
                  className="block max-w-sm rounded-2xl bg-white/80 p-4 text-zinc-950 shadow-sm ring-1 ring-white/60 backdrop-blur-xl transition-[background-color] duration-200 outline-none hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-zinc-950 dark:bg-zinc-950/60 dark:text-white dark:ring-white/10 dark:hover:bg-zinc-950/70 dark:focus-visible:ring-white"
                >
                  <span className="flex items-baseline gap-2">
                    <span className="text-sm font-semibold tabular-nums">{moment.time}</span>
                    <span className="text-[15px] font-medium tracking-tight">{moment.title}</span>
                  </span>
                  <span className="mt-1 block text-sm/6 text-pretty text-zinc-600 dark:text-zinc-300">{moment.detail}</span>
                </a>
              </GoldenHour>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```