Mirror Pool Footer
A 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.
WebGL20 deps1 file · 23 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties } from "react";
/**
* MirrorPoolFooter — a footer that ends on water.
*
* Link columns sit above a giant chrome wordmark standing on the
* waterline of a dark pool that mirrors it. The pool is a real wave
* simulation stepped at 60 Hz: move the pointer across it and the surface
* rings, the reflection bending with every ripple and the ripple faces
* catching the horizon's light; every ten seconds a drop falls somewhere
* along it. A glint follows the pointer along the letters. One WebGL2
* canvas draws both, so the reflection meets the letters exactly.
*
* Without WebGL2, a CSS chrome wordmark over a still, fading mirror.
* Reduced motion stops the drops and the pointer's ripples.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The page ends on water. Link columns, a line about the release and the legal line sit above a giant chrome wordmark standing on the waterline of a dark pool, and the pool mirrors it. The pool is a real wave simulation: a height grid stepped with the discrete wave equation at a fixed 60 Hz, so ripples travel at the same speed on every screen. Move the pointer across the pool and the surface rings where you pass, the mirrored letters bending with every ripple and the ripple faces turned toward the horizon catching its light; every ten seconds a drop falls somewhere along it. A glint follows the pointer along the letters above. One WebGL2 canvas draws the wordmark and the pool, so the reflection meets the letters exactly at the waterline. The wordmark is measured in the display face to span the band. Without WebGL2, a CSS chrome wordmark stands over a still, fading mirror.
Curator’s note
The Liquid Chrome kit's footer (slot 9), cut from liquid-chrome-site. Pro rather than the usual Free footer: a CPU wave simulation stepped at 60 Hz feeding a WebGL2 refraction shader that draws the wordmark and its reflection in one canvas.
