A learn-by-piloting descent · css keyframes · easing · timing

Abyssal Currentlight the dark by hand

Pilot a glowing submersible through pitch-black trenches. There are no bulbs down here — only the animations you wire yourself. Get the keyframes, the timing, the easing wrong, and the light gutters out.

DRIFT
Field Guide

What the current teaches

Four ideas run every animation you'll wire below. Watch each one move before you touch a single control — the water tells you more than any label could.

Keyframes

A keyframe is a state at a moment in time — 0%, 50%, 100%. The browser draws everything in between for you. Watch the orb swell as it passes the 50% buoy.

0%50% peak100%

Easing = current shape

Linear cuts straight across, no push or pull. Ease-in-out swells and settles like a real current. Same distance, same duration — different feeling entirely.

linearease-in-out

Duration

Duration is how long one full pass takes. Too short and a glow reads as a nervous flicker. Too long and it reads as barely alive. Compare the two speeds.

1.0s3.4s

Fill-mode

When an animation finishes, does it snap back to its starting state, or hold its final pose? forwards keeps the last keyframe. Click to replay.

click to replayfill-mode: forwards
DEPTH –120m  ·  LEVEL 1 / 5
OXYGEN100%

Loading trench data…

READING CURRENT… 0%

01Timeline reel — drag the buoys

buoy 1
0
0
Adjust the reel, then test the current.