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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Sunrise
Thirty minutes of morning, before the alarm.
- EmberA deep red glow, too low to wake you, that starts your body's morning.
- GlowAmber, and rising slowly: the light a sunrise gives through closed eyes.
- DaylightNeutral white at full output, so you wake into a lit room, not a dark one.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dawn Scrub Hero
heroesA 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.
Exploded View Section
sectionsThe product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.
Ember Rest Footer
sectionsA footer where the day ends: as it rises into view the room above the links, rendered live, loses its daylight, the lamp dims to an ember, and the whole footer goes from paper to night under a closing line.