Liquid Ocean

A mesmerizing Three.js animated ocean scene featuring flowing waves, floating boxes, and a rotating camera. Built with React Three Fiber, replicating the “Little Boxes” experiment.

Install using CLI

Install Manually

npm install three @react-three/fiber @react-three/drei clsx tailwind-merge

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

"use client";

import React, { useRef, useMemo, useEffect } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { RectAreaLightUniformsLib } from "three/examples/jsm/lights/RectAreaLightUniformsLib.js";
import * as THREE from "three";
import { cn } from "@/lib/utils";

// Initialize RectAreaLight uniforms
if (typeof window !== "undefined") {
RectAreaLightUniformsLib.init();
}

// ... Full component source available via CLI install

Usage

1import { LiquidOcean } from "@/components/ui/liquid-ocean"
2
3// Basic usage - exact original appearance
4export function Example() {
5return (
6  <div className="relative h-[500px] w-full">
7    <LiquidOcean>
8      <h1 className="text-white text-6xl">Liquid</h1>
9    </LiquidOcean>
10  </div>
11);
12}
13
14// Custom theme colors
15export function CustomColors() {
16return (
17  <LiquidOcean
18    backgroundColor={0x0a1a1a}
19    accentColor={0x00ffff}
20    boatCount={7}
21  />
22);
23}

Examples

Minimal Ocean (No Boats, No Grid)

Cyan Theme

Purple Theme

Sunset Theme

Matrix Theme

Calm Waters

High Detail Mode

Props

Features

3D Animated Ocean: Flowing wave animation with configurable speed and amplitude

Floating Boxes: Animated boxes that bob and tilt with the waves

Fully Customizable: Change colors, wave settings, boat count, and more

Multiple Themes: Create any color scheme with hex color props

React Three Fiber: Built with modern React 3D patterns for optimal performance

Overlay Support: Add any content on top of the ocean scene