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.
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.
Light, not noise.
Morning light · window · leaves
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Window Light Drift
backgroundsAfternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.
Ink Fluid Field
backgroundsA real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.