Skip to content

component

Ocean Points

By Lucas

Details

Summary

A 3D ocean that answers the cursor

Description

Thousands of luminous points form a rolling 3D ocean — real perspective math, layered sine swell, and a two-pass bloom that makes the crests glow. No WebGL, no libraries: it is all hand-rolled Canvas2D, which means it loads instantly and runs anywhere. It answers the cursor three ways: the camera leans as you move across the frame (parallax you can dial down to zero), a local swell rises under the pointer and follows it, and a click launches a circular wave that spreads across the surface and dies out. Glow colour, wave height, speed, point density, bloom strength, mouse parallax — all adjustable from the panel. Canvas and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and shows a still frame of the ocean on the Framer canvas.

Introduction

A 3D ocean that answers the cursor

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600178348/148/228/309/79/15
  • All · #7386