Skip to content

component

Ocean Hero 3D

By Lucas

Details

Summary

A real FFT ocean with a live buoy

Description

A real ocean simulation - the same FFT wave spectrum used in games - running live in your hero. Three cascades of waves interfere, sharpen into crests and break into foam; a buoy rides the swell with genuine buoyancy, leaning into every wave. Drop in your own GLB model and it floats instead. Three scene styles, one click apart: Realistic (procedural sky with clouds and horizon haze), Super 8 (warm vintage film grade with fine grain and scratches), and Cartoon (true cel-shading with inked outlines and a saturated, storybook palette). The Simple panel drives the essentials - wind, wave height, foam, crest colour, sun and horizon. An Advanced panel opens the full engine: per-cascade FFT resolutions, choppiness, wind alignment, foam sharpness, cel tones. The physics runs in a Web Worker and the renderer adapts its resolution to keep any machine smooth. Three.js under the hood, everything procedural, nothing loaded from outside. Honours prefers-reduced-motion, and shows a still ocean frame on the Framer canvas.

Introduction

A real FFT ocean with a live buoy

Rank history

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

12001400145168/158/228/309/79/15
  • All · #4516