Shadow Shoal Footer
A footer that is a concrete floor lit edge to edge by water light from a ceiling you cannot see, with rounded top corners. Sharks pass through it, in every direction, and there are no sharks, only their shadows. They swim like real animals: they can only move along their heading. A resting pointer is noticed and avoided or inspected, a click makes them bolt away smoothly, and hovering a link slows the nearest one. Switch to butterfly koi if you prefer.
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.
Aerium
Commission a roomNothing in here is swimming.
Rooms where exactly one thing is wrong. Built for lobbies, galleries and one very patient client.
Props
"use client";
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* ShadowShoalFooter: a footer laid on a concrete floor, seen from above. One
* clean rectangle of light falls on it from an opening in a ceiling you cannot
* see, and across that light glide the shadows of sharks. There are no sharks.
* The water they would swim in is held in the ceiling too, and it draws the
* caustics on the floor. (Set species to "Koi" for a shoal of butterfly koi.)
*
* Your pointer is the shadow of one more. It swims after the cursor on a
* spring, and the others accept it and follow it loosely. A click or tap
* scatters them for about three seconds, then they re-form. Hover a link and
* they slow down.
*
* HOW IT IS MADE. One full-screen WebGL2 fragment pass, no dependencies.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A footer where the floor is the layout. You look straight down on slate concrete: saw-cut joints, pores, a slow mottle. Cool light covers all of it, edge to edge, falling off gently at the rim, with rounded top corners like a sheet rising from the page. Inside it, caustics braid slowly with faint red and blue fringes. Then the shadows swim in. Each shark enters from just outside the footer at a random edge and crosses all of it at a random angle in fourteen to twenty-four seconds, curving gently, then leaves and comes again from somewhere else. From above you see the planform: a torpedo body, large rigid swept pectorals, a thin vertical tail blade, a faint dorsal sliver, and a slow travelling wave that barely moves the head and swings the tail. Deeper sharks are larger and softer. The caustic light shows through every penumbra. Movement is non-holonomic: a shark can only go where it points, steering is rate-limited, speed comes from tail beats, and nothing ever pushes it sideways. Rest the pointer near one and it curves round it or comes for a slow look. Click and the nearby ones beat their tails and turn away, then settle. Hover a link and the nearest shark glides slower. Every piece of copy sits on the lit water in dark ink, and a small mono placard states it deadpan: Shadows 5, Fish 0. A prop swaps sharks for butterfly koi, and another makes the cursor a swimmer too.
Curator’s note
The footer is the one place on a page nobody expects to be art directed, which is why the anomaly lands. The shadows are analytic: a shark is a torpedo body, a pointed snout, a tall dorsal whose shadow is thrown sideways, swept pectorals and a crescent tail, softened by an unseen height, so a deeper shark casts a larger, softer, fainter shadow with no shadow-map machinery. The simulation runs on a fixed 60 Hz step and is drawn interpolated, so it stays smooth at any refresh rate. The light's rectangle is published as CSS variables, so the dark-ink half of your footer can sit on it, and the caustics relax under every link so contrast holds.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Levitating School Hero
heroesA school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.
Ascending Shatter Section
sectionsA basalt stone breaks apart as you scroll, and its pieces rise up the beam of one cold lamp, tumbling slowly and thinning into ash. Scroll back and every piece falls home and the stone closes. The pointer loosens the pieces near it; a click sends a ring through the stone.
Dry Caustic Room
backgroundsA high-key white gallery room, seen into one corner. Rippling water light plays down both walls and across the glossy floor, with soft prismatic fringes, and there is no water anywhere. Touch the pointer to the unseen surface and slow rings spread; the caustics bend around them.