Anamorphic Heading 2.0
A heading shattered into lit, extruded shards at different depths that close up into the exact words from one viewpoint. The camera swings into place as it scrolls in, you can drag to look around, and it locks with a light sweep and copper-lit cracks.
WebGL20 deps1 file · 48 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* AnamorphicHeading2 — a heading shattered into solid shards that only
* line up into the words from one exact point of view.
*
* Version 2.0 of the Anamorphic Heading. The letters are cut into Voronoi
* shards, and every shard is a real extruded slab floating at its own depth
* and tilt in a lit WebGL2 scene. Each slab's outline is the projection of
* its piece of the type from the viewpoint, so from straight ahead the
* shards close up into the heading with hairline cracks between them; from
* anywhere else they come apart into a cloud of lit fragments over a
* perspective floor, drifting along their sight lines. As the heading rises
* into view the camera swings round to the viewpoint and the words resolve;
* the pointer leans the view and you can drag to look around. Near the
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
The first Anamorphic Heading moved whole letters to different depths with CSS. Version 2.0 breaks the type itself. The heading is cut into Voronoi shards, and every shard is a solid slab with real side walls, floating at its own depth and tilt over a perspective floor. Each slab's outline is the projection of its piece of the type from one viewpoint, so from there the shards close up into the exact glyphs with hairline cracks between them; from anywhere else they come apart into a deep cloud of lit fragments, drifting along their sight lines and catching a studio softbox on their faces and chamfers. As the heading scrolls in, the camera swings round to the viewpoint and the words assemble; the pointer leans the view and a drag lets you look around, then it swings back. Near the viewpoint it clicks into place on a detent spring: a band of light sweeps across the faces and the cracks fill with copper light, as if the heading were lit from behind. A readout underneath shows the view angle and how close you are to aligned. Three finishes: ceramic, titanium and soft-touch polymer. It creates its WebGL context only near the viewport, compiles off the main thread, stops drawing once locked, and handles context loss.
Curator’s note
Version 2.0 of the Spatial 3D kit's text effect. Pro because it is a WebGL2 scene: the type is cut into Voronoi shards, each a lit, extruded slab placed by projective geometry, under the kit's key, fill and rim rig.
