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.
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 } 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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Molten Chrome Hero
heroesA first screen whose title is molten chrome in WebGL: the lit room it reflects turns with the pointer, the metal swells toward it, fast moves and clicks send ripples through the letters, and it stands on a mirror floor.
Horizon Light Footer
sectionsA footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.
Holo Foil Field
backgroundsA full-bleed sheet of crumpled holographic foil in WebGL: its thin-film colours follow Newton's series, each face flashes silver or falls dark as it turns, and tilting it with the pointer sweeps the colour across the sheet.