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.
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.
Halden · Wake light05:30
Wake tolight.
A lamp that brings the morning to you: thirty minutes of sunrise before your alarm, so you are already half awake when it goes off.
- Sunrise in 30 min
- 1,800 to 4,400 K
- Up to 300 lux
Good morning
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dawn Timeline Section
sectionsThe 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.
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.
Lathe Story Scroll
animationsA five-chapter scroll story that turns a single drawn line into a three-dimensional object: revolved, glazed, exploded into named parts and reassembled, with no three.js.