KeyframeUI

Golden Hour

Sunset Scene Background for React

A painted valley lit for an hour of the day. Every color comes from that hour: the sky, the sun and its glow, the light along each ridge, the road and the stars. Change it and the sun travels there through the hours in between, so noon to night passes golden hour and dusk on the way. It can follow the visitor's own clock, or go down as the page scrolls.

  • Background
  • Hero
  • SVG

Uses motion, clsx, tailwind-merge

Open in ChatGPTOpen in Claude
horizon0.58
roadtrue
treestrue
grain0.50
seed3
introtrue(replays the demo)
parallaxtrue
parallaxShift18px
duration0.70s
<GoldenHour />

replays the demo when you let go.

5:36 PM · Golden hour

Take this demo to your coding agent.
Add this moment from KeyframeUI to our project and adapt it to our content.

Golden Hour: A painted valley lit for an hour of the day. Every color comes from that hour: the sky, the sun and its glow, the light along each ridge, the road and the stars. Change it and the sun travels there through the hours in between, so noon to night passes golden hour and dusk on the way. It can follow the visitor's own clock, or go down as the page scrolls.
This demo, Any Hour: Drag the dial through the day: the sun climbs and sets, the light along the ridges turns from white to gold, and the road's lights come on after dusk. "Your time" jumps to your own clock.

1. Install it:
   npx shadcn@latest add @keyframeui/golden-hour-demo
   (If the CLI can't find @keyframeui, use https://keyframeui.com/r/golden-hour-demo.json instead.)
   It adds the demo, components/golden-hour-demo.tsx, and the component, components/ui/golden-hour.tsx.

2. Make it ours: our copy, data, images and colors. Keep the structure the motion depends on. If we only need the effect, use <GoldenHour> on its own.

3. These props set its feel. Change them before you change the file:
   - horizon (default 0.58): Where the far ridge meets the sky, as a share of the height from the top. Raise it to leave room for a headline in the sky.
   - road (default true): The winding road from the bottom edge over the near hill. Its center line lights up at night.
   - trees (default true): Trees on the slopes in front and along the middle ridge.
   - grain (default 0.5): Strength of the film grain, from `0` (none) to `1`.
   - seed (default 3): Reshapes the hills, the trees and the stars. Any whole number.
   - intro (default true): The first time the scene shows, settle the ridges into place, back to front, while the light moves on half an hour to the hour asked for.
   - parallax (default true): Let the ridges drift against the mouse, nearer ones more. Touch leaves them still.
   - parallaxShift (default 18): Pixels the front ridge drifts sideways with the pointer at the scene's edge. Farther ridges drift less, and the up-and-down drift scales with it.
   - duration (default 0.7): Seconds the sun takes to travel to a new `time`, plus 0.05s for every hour on the way.

4. Don't change, in components/ui/golden-hour.tsx:
   - Every color, the sun and the layer offsets are written straight to the SVG from motion values, batched into one `frame.render` per frame, so nothing re-renders while the light moves.
   - The markup is drawn once from `initial` (read in `useState`) and the paint effect finds each node by its `data-gh` key; later renders never repaint the colors it keeps current.
   - Layers move by `transform` only, one per `LAYERS` entry back to front: the pointer drift through `translate3d` and the first-view rise through `translateY`.
   - A new `time` travels the short way round the clock (`shortWay`) through every hour between, so noon to night passes golden hour and dusk.
   - Reduced motion skips the settling and the pointer drift and jumps to a new time; the scroll sunset still runs, on raw `scrollYProgress` instead of the spring. Touch never drifts.
   Its timing is all in the TIMING block at the top of that file.

Docs: https://keyframeui.com/components/golden-hour.md

Installation

Add the component on its own with the CLI, or copy the file in by hand.

The CLI writes components/ui/golden-hour.tsx and installs motion, clsx and tailwind-merge. It needs the @keyframeui registry in components.json; add it once per project.

npx shadcn@latest add @keyframeui/golden-hour

Examples

Finished sections built with Golden Hour. Each one installs whole, with the component included.

Sunset Sign-Up

A newsletter's closing section. The sun sets as it comes into view, and subscribing brings the night and the moon out.

Long Light · Fridays

One slow email a week, sent at sunset.

Five places worth the detour, and the hour to be there. Read by 18,000 people who would rather be outside.

No spam. Unsubscribe in one click.

Take this demo to your coding agent.
Add this moment from KeyframeUI to our project and adapt it to our content.

Golden Hour: A painted valley lit for an hour of the day. Every color comes from that hour: the sky, the sun and its glow, the light along each ridge, the road and the stars. Change it and the sun travels there through the hours in between, so noon to night passes golden hour and dusk on the way. It can follow the visitor's own clock, or go down as the page scrolls.
This demo, Sunset Sign-Up: A newsletter's closing section. The sun sets as it comes into view, and subscribing brings the night and the moon out.

1. Install it:
   npx shadcn@latest add @keyframeui/golden-hour-cta-demo
   (If the CLI can't find @keyframeui, use https://keyframeui.com/r/golden-hour-cta-demo.json instead.)
   It adds the demo, components/golden-hour-cta-demo.tsx, and the component, components/ui/golden-hour.tsx.

2. Make it ours: our copy, data, images and colors. Keep the structure the motion depends on. If we only need the effect, use <GoldenHour> on its own.

3. These props set its feel. Change them before you change the file:
   - horizon (default 0.58): Where the far ridge meets the sky, as a share of the height from the top. Raise it to leave room for a headline in the sky.
   - road (default true): The winding road from the bottom edge over the near hill. Its center line lights up at night.
   - trees (default true): Trees on the slopes in front and along the middle ridge.
   - grain (default 0.5): Strength of the film grain, from `0` (none) to `1`.
   - seed (default 3): Reshapes the hills, the trees and the stars. Any whole number.
   - intro (default true): The first time the scene shows, settle the ridges into place, back to front, while the light moves on half an hour to the hour asked for.
   - parallax (default true): Let the ridges drift against the mouse, nearer ones more. Touch leaves them still.
   - parallaxShift (default 18): Pixels the front ridge drifts sideways with the pointer at the scene's edge. Farther ridges drift less, and the up-and-down drift scales with it.
   - duration (default 0.7): Seconds the sun takes to travel to a new `time`, plus 0.05s for every hour on the way.

4. Don't change, in components/ui/golden-hour.tsx:
   - Every color, the sun and the layer offsets are written straight to the SVG from motion values, batched into one `frame.render` per frame, so nothing re-renders while the light moves.
   - The markup is drawn once from `initial` (read in `useState`) and the paint effect finds each node by its `data-gh` key; later renders never repaint the colors it keeps current.
   - Layers move by `transform` only, one per `LAYERS` entry back to front: the pointer drift through `translate3d` and the first-view rise through `translateY`.
   - A new `time` travels the short way round the clock (`shortWay`) through every hour between, so noon to night passes golden hour and dusk.
   - Reduced motion skips the settling and the pointer drift and jumps to a new time; the scroll sunset still runs, on raw `scrollYProgress` instead of the spring. Touch never drifts.
   Its timing is all in the TIMING block at the top of that file.

Docs: https://keyframeui.com/components/golden-hour.md

Studio Clocks

A design studio's contact card lit for the local time in each city. Switching from Lisbon to Tokyo carries the sun through the hours between.

Tinta · Lisbon studio

--:--

6 in the studio

Rua das Flores 28

Book a call
Take this demo to your coding agent.
Add this moment from KeyframeUI to our project and adapt it to our content.

Golden Hour: A painted valley lit for an hour of the day. Every color comes from that hour: the sky, the sun and its glow, the light along each ridge, the road and the stars. Change it and the sun travels there through the hours in between, so noon to night passes golden hour and dusk on the way. It can follow the visitor's own clock, or go down as the page scrolls.
This demo, Studio Clocks: A design studio's contact card lit for the local time in each city. Switching from Lisbon to Tokyo carries the sun through the hours between.

1. Install it:
   npx shadcn@latest add @keyframeui/golden-hour-studios-demo
   (If the CLI can't find @keyframeui, use https://keyframeui.com/r/golden-hour-studios-demo.json instead.)
   It adds the demo, components/golden-hour-studios-demo.tsx, and the component, components/ui/golden-hour.tsx.

2. Make it ours: our copy, data, images and colors. Keep the structure the motion depends on. If we only need the effect, use <GoldenHour> on its own.

3. These props set its feel. Change them before you change the file:
   - horizon (default 0.58): Where the far ridge meets the sky, as a share of the height from the top. Raise it to leave room for a headline in the sky.
   - road (default true): The winding road from the bottom edge over the near hill. Its center line lights up at night.
   - trees (default true): Trees on the slopes in front and along the middle ridge.
   - grain (default 0.5): Strength of the film grain, from `0` (none) to `1`.
   - seed (default 3): Reshapes the hills, the trees and the stars. Any whole number.
   - intro (default true): The first time the scene shows, settle the ridges into place, back to front, while the light moves on half an hour to the hour asked for.
   - parallax (default true): Let the ridges drift against the mouse, nearer ones more. Touch leaves them still.
   - parallaxShift (default 18): Pixels the front ridge drifts sideways with the pointer at the scene's edge. Farther ridges drift less, and the up-and-down drift scales with it.
   - duration (default 0.7): Seconds the sun takes to travel to a new `time`, plus 0.05s for every hour on the way.

4. Don't change, in components/ui/golden-hour.tsx:
   - Every color, the sun and the layer offsets are written straight to the SVG from motion values, batched into one `frame.render` per frame, so nothing re-renders while the light moves.
   - The markup is drawn once from `initial` (read in `useState`) and the paint effect finds each node by its `data-gh` key; later renders never repaint the colors it keeps current.
   - Layers move by `transform` only, one per `LAYERS` entry back to front: the pointer drift through `translate3d` and the first-view rise through `translateY`.
   - A new `time` travels the short way round the clock (`shortWay`) through every hour between, so noon to night passes golden hour and dusk.
   - Reduced motion skips the settling and the pointer drift and jumps to a new time; the scroll sunset still runs, on raw `scrollYProgress` instead of the spring. Touch never drifts.
   Its timing is all in the TIMING block at the top of that file.

Docs: https://keyframeui.com/components/golden-hour.md

Props

time

Type"dawn" | "morning" | "noon" | "afternoon" | "golden" | "sunset" | "dusk" | "night" | number | "auto"Default"golden"

The hour the scene is lit for: a preset, an hour from 0 to 24 (17.5 is half past five in the evening), or "auto" for the visitor's own clock. A new value carries the sun there through the hours in between, the short way round the clock.

sunset

Typeboolean | numberDefaultfalse

Let the sun go down as the page scrolls on, from where the scene sat when the page loaded until it leaves the top. true moves it on 2 hours; a number sets the hours.

horizon

TypenumberDefault0.58

Where the far ridge meets the sky, as a share of the height from the top. Raise it to leave room for a headline in the sky.

road

TypebooleanDefaulttrue

The winding road from the bottom edge over the near hill. Its center line lights up at night.

trees

TypebooleanDefaulttrue

Trees on the slopes in front and along the middle ridge.

grain

TypenumberDefault0.5

Strength of the film grain, from 0 (none) to 1.

seed

TypenumberDefault3

Reshapes the hills, the trees and the stars. Any whole number.

intro

TypebooleanDefaulttrue

The first time the scene shows, settle the ridges into place, back to front, while the light moves on half an hour to the hour asked for.

parallax

TypebooleanDefaulttrue

Let the ridges drift against the mouse, nearer ones more. Touch leaves them still.

parallaxShift

TypenumberDefault18

Pixels the front ridge drifts sideways with the pointer at the scene's edge. Farther ridges drift less, and the up-and-down drift scales with it.

duration

TypenumberDefault0.7

Seconds the sun takes to travel to a new time, plus 0.05s for every hour on the way.

children

TypeReact.ReactNode

Content laid over the scene, like a product shot or a headline. The root is relative, so it can be placed with absolute, or laid out with flex classes on className.

className

Typestring

Classes for the root, which sizes the scene: give it a height or an aspect ratio, and the rounded corners. The horizon stays at the same share of the height in any shape.

Used in blocks