Levitating School Hero
A 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.
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.
Specimen 01 / 6
Medium: air
Aquariums without the water.
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";
/**
* LevitatingSchoolHero: a school of butterfly koi hanging in the dry air of a
* concrete room, inside one shaft of light. The water they belong to is held
* in a square opening in the ceiling; the light falls through it, draws
* caustics on the floor and long streaks in the haze, and every fish casts a
* shadow through the beam and onto the lit patch. Nothing else in the room is
* wrong.
*
* HOW IT IS MADE. Hand-written WebGL2, four passes a frame, no dependencies:
* 1. a shadow map: the fish drawn from the light's point of view;
* 2. the fish: instanced meshes with a travelling-wave swim in the vertex
* shader, wet specular, scales, translucent veined fins, eyes;
* 3. the room: one full-screen pass that ray-casts an analytic box room,
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
Most hero backgrounds are moods. This one is a scene with exactly one thing wrong. A concrete room, formwork seams and tie holes on the walls, a square opening in the ceiling that holds water. Sunlight falls through the water as a single shaft. Inside it, a school of butterfly koi hangs in the dry air, long fins trailing: mostly red-and-white kohaku, now and then a metallic gold ogon. The shaft is ray-marched through the haze, and the streaks inside it are the real caustic filaments, which sharpen as the light falls. Every fish casts a shadow through the beam and onto the lit patch of floor, where the caustics split into three wavelengths. Bubbles sink from the water. About every eleven seconds one fish turns to look at the camera. Move the pointer and the room shifts a few degrees. Rest it, and the nearest fish swim over to see what it is. Click, and the fish under it bolts, shedding a few bubbles. The opening is a slow pour of light, never a flash, and a built-in Pause control stops the loop.
Curator’s note
The style's lead piece. The anomaly works because everything else is obedient: a real room, one motivated light, physically placed caustics, and fish whose shadows cut through the haze. Only the water is missing. The fish are lofted from a single profile function, so an agent can turn the school into goldfish, rays or paper boats without touching the light.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Shadow Shoal Footer
sectionsA 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.
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.