Dawn Scrub Hero
A first screen that is night until you scroll it into morning: the hero pins and the scroll is the dawn, bound with no easing, as a live-rendered room goes from dark to paper white and the lamp from ember to daylight.
WebGL20 deps1 file · 35 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* DawnScrubHero — a first screen that is night until you scroll it into morning.
*
* The hero pins while the page scrolls through it, and the scroll is the
* dawn, bound with no easing: the room (rendered live in WebGL2) goes from
* dark to paper white, the lamp from an ember at 1,800 K to daylight at
* 4,400 K, and the copy turns from paper to ink as the room passes it. A
* clock reads 05:30 to 07:00 and three specs arrive at their moments. Drive
* it by `progress` to hold a moment. Without WebGL2 a CSS lamp stands in.
* Inside a scrolling frame, provide the frame through ScrollRootContext.
*
* Part of the Modern Minimal kit: a paper-white room (#f5f5f2, surfaces
* #ffffff, ink #141412) and one light, dawn #ffa64d, only ever as light.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The first screen of a consumer device, told as a sunrise you control. The hero pins while the page scrolls through it, and the scroll position is the dawn, bound to it directly with no easing so it feels like scrubbing a film rather than watching an animation play. The room is rendered live: a frosted-glass lamp on a ceramic base whose light warms the whole room, from an ember at 1,800 K to daylight at 4,400 K, while the window's light rises until the room is paper white. The copy turns from paper to ink as the room brightens past it, a mono clock reads 05:30 to 07:00, and three specs arrive at their moments. Set progress to hold a moment instead.
Curator’s note
The Modern Minimal kit's hero (slot 1, Featured), cut from modern-minimal-site. Pro: a pinned scroll scrub driving a raymarched WebGL2 room (a sphere light with a colour temperature, window daylight, soft shadows) and the copy, bound to the scroll with no easing.
