Morning Light Field
A background of morning light through a window, on paper: six panes of warm light fall across the wall with leaves moving slowly in them, rendered live, and the pointer turns the sun a little.
WebGL20 deps1 file · 17 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* MorningLightField — a background of morning light through a window, on paper.
*
* The light of a six-pane window falls across a paper wall from the upper
* left, its edges softening with distance, and the leaves of a tree outside
* move slowly in it (a drift of forty seconds and more). The pointer turns
* the sun a little. WebGL2 at 30fps and only on screen, untoned so the paper
* stays the page's own colour. Content goes on top as children.
*
* 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 background
The quiet background of a light page, done as real light rather than a gradient. The light of a six-pane window falls across a paper wall from the upper left, sheared by the sun's angle, its edges softening with distance the way a real penumbra does, and the leaves of a tree outside move slowly in it, drifting over forty seconds and more. Move the pointer and the sun turns a little, so the patch slides and leans. It renders live in WebGL2 at 30fps and only while on screen, without a tone curve, so where no light falls the wall is exactly the page's own paper. Content goes on top as children.
Curator’s note
The Modern Minimal kit's surface (slot 2), cut from modern-minimal-site. Pro: a WebGL2 scene (a projected window with softening edges and an fbm leaf gobo) at 30fps, kept linear so the paper is the page's own colour.
