Skip to content

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.

ProSpatial 3Dminimalplayful

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

Made to be
touched.

Move through the forms

Props

Pointer parts them
7.4
Show caption
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

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

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
Pro

Halo Mesh Field

backgrounds

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

backgroundwebglshader
Pro

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

backgroundwebglshader