Skip to content

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.

ProModern Minimalminimal

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.

Preview

Light, not noise.

Morning light · window · leaves

Props

1
0.8
Pointer turns the sun
Show caption
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Afternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.

backgroundcanvaslight
Trending
Pro

Ink Fluid Field

backgrounds

A 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.

backgroundwebglfluid
Pro

A 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.

backgroundwebglshader