Dawn Timeline Section
The sunrise laid out on a timeline and scrubbed by the scroll: the section pins, 05:30 to 07:00 runs with the scroll, the lamp rendered live rises along its curve, and the time, colour, output and phase follow.
WebGL20 deps1 file · 31 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* DawnTimelineSection — the sunrise laid out on a timeline and scrubbed by the scroll.
*
* The section pins and the scroll is the time, 05:30 to 07:00, bound with
* no easing. The lamp, rendered live, rises from an ember to daylight along
* its curve (slow at first, like a real dawn) while the window light comes
* up; beside it a minute scale with a marker, the time, colour temperature
* and output, the current phase lit, and the curve with a dot where you are.
*
* Part of the Modern Minimal kit: a paper-white room (#f5f5f2, surfaces
* #ffffff, ink #141412) and one light, dawn #ffa64d, only ever as light.
* Two-layer shadows from one light above; scroll binds values directly,
* with no easing. Inter Tight through var(--font-inter-tight) for display
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
A features section that explains the product by running it. The section pins while the page scrolls through it, and the scroll is the time, from 05:30 to 07:00, bound with no easing. On the left the lamp, rendered live in its room, rises from a faint ember to neutral daylight along its curve, slow at first like a real dawn, while the window light comes up behind it. On the right a minute scale with a lit marker, the time, the colour temperature and the output as large figures, the three phases (ember, glow, daylight) with the current one lit, and the curve itself with a dot at the current minute. Everything is written straight to the page on scroll, so it moves exactly with your hand.
Curator’s note
The Modern Minimal kit's feature section (slot 7), cut from modern-minimal-site. Pro: a pinned scroll scrub driving the kit's WebGL2 room and a set of figures, a scale and a curve, all written on scroll.
