Liquid Wallpaper Field 2.0
Folded liquid silk lit like a studio product shot, with rolled hems, satin bands, a drifting softbox and thin-film sheen. It leans toward the pointer, ripples on a click, and draws your panes as real refracting glass in every browser.
WebGL20 deps1 file · 36 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* LiquidWallpaperField2 — folded liquid silk, lit like a product shot, with
* real glass refraction built in.
*
* Version 2.0 of the Liquid Wallpaper Field. The folds are no longer flat
* bands: every sheet is a lit 3D surface. Its edge rolls over in a hem that
* catches a studio softbox as a travelling glint, satin bands follow the
* contour down its face, the light shines through the thin hem, and a
* thin-film sheen turns the highlights iridescent at grazing angles. The
* softbox drifts across the loop, so the glints wander over the folds.
*
* The field answers the pointer. The nearest folds lean toward the cursor
* like silk drawn by a fingertip, the sheets shift by depth (parallax), and a
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
The first Liquid Wallpaper Field drew flat bands of colour with sharp edges for glass to bend. Version 2.0 lights them. Every sheet is a 3D surface now: its edge rolls over in a hem that catches a studio softbox as a travelling glint, satin bands follow the contour down its face, light glows through the thin hem, and a thin-film sheen turns the highlights iridescent at grazing angles. The softbox drifts across the loop, so the glints wander from fold to fold. Move the pointer and the nearest folds lean toward it on a spring, the sheets shift by depth, and a click sends a ripple running along every edge. The glass is built in: mark any child with data-lwf2-lens and the same GPU pass draws it as a real pane, refracting the field through a rounded bezel with RGB dispersion, frosting it with a true blur of the live silk, and lighting the rim with the same key light. Because it is drawn in WebGL rather than with SVG backdrop filters, the refraction works in Safari and Firefox too. Each pixel shades only the one or two sheets it can see; it draws at 30 frames a second at rest and 60 while you interact, creates its context only near the viewport, pauses off-screen, handles context loss and falls back to a CSS gradient with CSS glass panes.
Curator’s note
Version 2.0 of the Glassmorphism kit's signature wallpaper. Pro because it is a two-pass WebGL2 engine: lit 3D silk with a studio reflection model, pointer physics, and a glass compositor that refracts, frosts and splits the live field under any element you mark.
