Skip to content

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

Preview

Props

4

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

Pairs well with

Pro
Pro
Pro