Soft Form Field
A background of soft forms raymarched live in WebGL2: rounded cubes, capsules and rings in ceramic, titanium and polymer drift, melt into one another where they meet and part around the pointer.
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.
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* SoftFormField — a background of soft forms, raymarched live.
*
* Seven primitives (rounded cubes, capsules, rings, spheres) in ceramic,
* titanium and polymer, with one lit copper ring, drift on slow orbits and
* melt into one another where they meet, their finishes blending across the
* join; the pointer parts them and they flow back. The kit's studio rig, at
* 30fps and only on screen. Content goes on top as children.
*
* Part of the Spatial 3D kit: a dark studio (#0a0a0d, panels #101114 and
* #16171b, ink #f2f1ee) with anodised copper #ff7a3d only as light, and
* one object in three finishes (titanium, ceramic, soft-touch polymer) under
* one rig: key, fill and rim, soft shadows, occlusion and a softbox
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
A background in the Spline register, rendered live rather than baked. Seven soft forms (rounded cubes, capsules, rings and spheres) in ceramic, titanium and soft-touch polymer, with one thin ring of copper light, drift on slow orbits of the page clock and melt into one another where they touch, their finishes blending across each join. Move the pointer through them and they part around it and flow back. It uses the same studio rig as the kit's object, so soft shadows fall between the forms and the metal ones reflect the softbox. It renders at 30fps and only on screen, and content goes on top as children.
Curator’s note
The Spatial 3D kit's surface (slot 2), cut from spatial-3d-site: the kit's engine with a scene of seven blended forms. Pro for the raymarcher.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
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.
Halo Mesh Field
backgroundsA quiet WebGL field for the body of a page: two grained pools of colour drift across warm bone like light through tinted glass, and a warm lamp gathers under the pointer where you rest.
Aurora Curtain Field
backgroundsThe kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.