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.
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.
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
// ---------------------------------------------------------------
}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
Matched on shared tags and category — the entries most likely to be used alongside this one.
Mirror Pool Footer
sectionsA footer whose giant chrome wordmark stands on the waterline of a dark pool that mirrors it: a real wave simulation rings under the pointer and takes a drop every ten seconds, bending the reflection as it ripples.
Aurora Rise Footer
sectionsA footer where the lights come out as the page ends: scroll raises the aurora from behind the city's roofline, widens it into violet and rose and lights more windows under a large lit wordmark.
Pedestal Footer
sectionsA footer where the product comes to rest: as it scrolls into view the dial floats down onto a mirror floor, its parts closing up as it lands, over a large wordmark lit from the object's key light.