---
title: "Ocean Hero 3D — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Lucas · Sections. A real FFT ocean with a live buoy"
canonical: "https://framer.elliotli.dev/component/ocean-hero-3d"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Ocean Hero 3D

# Ocean Hero 3D

A real FFT ocean with a live buoy

[View on Framer](https://framer.com/marketplace/components/ocean-hero-3d/?via=elliot-li)

![Ocean Hero 3D preview image 1](https://framer.elliotli.dev/og/component/ocean-hero-3d/a1e207a30c2e3d0c/1600x933.jpg)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4649

## Details

- **Author**: Lucas
- **Price**: $15.00
- **Published**: 2026-08-14
- **Updated**: 2026-08-14
- **Added**: 2026-08-14
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes