Skip to content

Ascending Shatter Section

A basalt stone breaks apart as you scroll, and its pieces rise up the beam of one cold lamp, tumbling slowly and thinning into ash. Scroll back and every piece falls home and the stone closes. The pointer loosens the pieces near it; a click sends a ring through the stone.

ProAttentionminimal

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
AeriumLithos / Basalt
220 pieces
Medium: none. Direction: up.

Weight, reversed.

Rooms where exactly one thing is wrong. In this one a stone has changed its mind about down, and only the stone.

Props

Hold progress
0.42
220
0.07
2.5
1
0.8
1
Pieces notice the pointer
Fracture readout
Pause control
Show sample copy
No runtime dependencies
"use client";

import { createContext, useContext, useEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";

/**
 * AscendingShatterSection: a stone breaks apart and its pieces rise, in a dry
 * cold room lit by one lamp. Scroll the section and the fracture front runs
 * down the stone, linearly, one piece after another lifting out of it, tumbling
 * slowly up the beam and thinning into ash. Scroll back and every piece falls
 * home and the stone closes. Nothing else in the room is wrong: the light is
 * one cone you could point at, the dust hangs in it, the floor takes the
 * shadow, and gravity, for this one stone, points up.
 *
 * HOW IT IS MADE. Hand-written WebGL2, no dependencies:
 *   1. FRACTURE (CPU, once at mount, about 25 ms for 220 pieces). A rock-like
 *      convex hull (72 noisy planes around a leaning ellipsoid) is cut into
 *      Voronoi cells by plane clipping: seeds are placed by best-candidate

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this section

A leaning basalt stone hangs in a dry, cold room under a single lamp. It is cut at mount into about 220 convex pieces by Voronoi plane clipping, small and dense at the crown and large in the core; the outside faces are rough stone, the inside faces are bone. Scroll, and the fracture front runs down the stone linearly: each piece lets go, lifts on a drag-limited buoyant rise, tumbles slowly and thins into ash, crown first and shell before core, so the bone core is laid bare in the middle. Scroll back and the pieces fall in and the stone closes, exactly, because every pose is computed from the progress alone. One shadow map from the lamp lets the pieces shade each other, drops a soft shadow on the floor and carves dark streaks out of the beam. Rest the pointer and nearby pieces drift loose and ease back; click and a ring runs through the stone. At rest it turns slowly with a few pieces already loose, never a still image.

Curator’s note

The anomaly is gravity, and it only works because everything else obeys it: the lamp is one cone you can point at, the dust hangs in it, the floor takes the stone's shadow, and the shadow breaks up as the pieces leave. The motion is a pure function of one number, so scrolling back is an exact reassembly, not a simulation that has drifted. The stone itself is data: change the half-axes in STONE and the same fracture, motion and shading apply to a different rock.

Related

Pairs well with

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

NewPro

A school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.

herowebgl3d
NewPro

A footer that is a concrete floor lit edge to edge by water light from a ceiling you cannot see, with rounded top corners. Sharks pass through it, in every direction, and there are no sharks, only their shadows. They swim like real animals: they can only move along their heading. A resting pointer is noticed and avoided or inspected, a click makes them bolt away smoothly, and hovering a link slows the nearest one. Switch to butterfly koi if you prefer.

footersectionwebgl
NewPro

One large jellyfish, centred low in a black void, lit only from inside. The bell is dark transparent glass with gonads, canals and frilled oral arms burning through it. Touch a tentacle and light runs up it to the bell; click and it jets upward and sinks back.

sectionwebgl3d