Perigee

Move the cursor over the footer and a small lens magnifies the moonlit water behind the glass. Along the rim the sky and sea bend inward, and at the border the image lines up with the scene outside it.

react
typescript
vite
tailwind
three.js

Format: Interactive experience
Platform: Desktop + Mobile
Engine: React + WebGL
Type: Concept

How It Works

Every frame

Sample

The footer's shader reads the same video element the page plays and maps it through the page's cover crop, so each pixel inside the glass samples what sits directly behind it.

Every frame

Bend

Along the rim the image shifts inward on a curve that is zero at the border and zero at the inner edge of the band, so nothing jumps where the glass meets the scene.

Interactive

Magnify

Under the cursor an eased lens samples closer to the pointer than the pixel is, which magnifies it, and the lens fades out near the border. With reduced motion on, the lens is off and the rim stays.

Continuous

Loop

The background clip ends on a crossfade back into its opening frames, so each restart reads as continuous motion.

Engineering

Refraction that stays aligned
My first version shifted the image right at the border, so anything crossing the edge of the glass jumped. I rebuilt the displacement so every offset falls to zero at the edge, including the cursor lens, which can sit right against the border. Then I cross-correlated the pixel rows just above and just below the border, and zero shift scores within 1% of the best fit.
A loop that hides its seam
The clip's last frame differed from its first by 2.5 times the brightness change between two ordinary neighboring frames, so I blended its closing frames into its opening ones, and the seam now measures 1.3.
Fail-closed subpath build
I build the page as a separate app and serve it from a subpath of this site. The build script adds the canonical link and structured data, then refuses to copy anything if a placeholder string, a missing copy line, or a root-relative media path reaches the bundle.