Gummy Pile Footer
A dark footer whose huge wordmark is a pile of gummy letters with weight: grab one and throw it, and it tumbles, bounces off the walls and the other letters, squashes where it lands and settles into a pile.
WebGL20 deps1 file · 51 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* GummyPileFooter — a footer whose wordmark is a pile of gummy letters you can throw.
*
* The page's one dark stage. Every letter of the name is a firm soft body
* with weight: grab one and throw it and it tumbles, bounces off the walls
* and the other letters, squashes where it lands and settles into a pile;
* tap one on a touch screen and it jumps. Tidy up puts them back. WebGL2,
* asleep once the pile settles; plain type without it.
*
* Part of the Tactile Maximalism kit: dough #f7f0e4, warm ink #17130f and
* one loud accent, bubblegum #ff2d78, filled once per screen; grain fixed to
* the material; soft shadows tinted by what casts them, never a hard offset.
* Everything soft keeps its area as it squashes and settles inside 450ms.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The end of the page, and the loudest thing on it. The footer is the site's one dark stage: a closing line, link columns, and the brand's name along the bottom in huge dough capitals, one of them bubblegum. Every letter is a firm soft body with weight. Grab one with the mouse and throw it: it tumbles, bounces off the walls, the ceiling and the other letters, squashes where it lands and settles into a pile, and the pile holds its shape. On a touch screen a tap makes a letter jump, and the page still scrolls. "Tidy up" puts the name back together. The simulation sleeps once the pile is still.
Curator’s note
The Tactile Maximalism kit's footer (slot 9), cut from tactile-maximalism-site. Pro: the kit's soft-body engine with gravity, walls and collisions between bodies, drawn in WebGL2. It runs the engine, so it moves to the middle phase (38) and the form to the last.


