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.

WebGL20 deps1 file · 30 KB TSXreduced-motion aware

ProSpatial 3Dminimalplayful
Preview

Props

Pointer parts them
7.4
Show caption

The source is part of Pro

$27/month or $179 once. See Pro

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
  // ---------------------------------------------------------------
}
Details

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

Pro
Pro
Pro