Page•Premium

Waterlight

A hero over living pool caustics: light nets drift across the water, and the surface ripples and bends wherever the pointer moves.

Make waves.

Move across the water and watch the light follow.

Customize

HeadlineCell density3.2Flow speed1Light intensity1Ripple strength1Deep waterShallow waterLightAuto ripples

Move across the water to leave ripples; click for a bigger wave. The surface pauses offscreen and shows a still frame for reduced motion.

Overview

About the Waterlight

A hero over living pool caustics: light nets drift across the water, and the surface ripples and bends wherever the pointer moves. It is delivered as editable TypeScript for React. Self-contained, instance-scoped CSS and one WebGL shader. Tailwind CSS is not required. No animation package required. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Launch and landing heroes for travel, wellness, swim and outdoor brands.
Calm, tactile backgrounds that reward visitors for moving the cursor.

What’s included

Files in the product ZIP

Waterlight source

components/waterlight.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { Waterlight } from "@/components/waterlight";

Minimum example

export default function Hero() {
  return (
    <Waterlight
      title="Swim before sunrise."
      description="Book a lane at any of our pools. The first swim is on us."
      primaryAction={{ label: "Book a lane", href: "/book" }}
      secondaryAction={{ label: "Find a pool", href: "/pools" }}
    />
  );
}

Props

Component API

Prop	Type	Default	Description
eyebrow / title / description	ReactNode	— / "Make waves." / default line	Centered hero copy. Omit eyebrow to hide it.
primaryAction / secondaryAction	{ label: string; href: string } \| null	Get started / See how it works	Pill button and arrow link. Pass null to hide either.
children	ReactNode	—	Replaces the default copy and actions with your own content.
deepColor / shallowColor / lightColor	string	"#06302f" / "#1b8379" / "#a8ffe9"	Water depth gradient and caustic light color. Any CSS color.
textColor	string	"#ffffff"	Copy color; also the primary button background.
scale	number	3.2	Caustic cell density, 0.5–12. Higher values make smaller cells.
speed	number	1	Flow speed, 0–4. Zero freezes the surface while ripples still play.
intensity	number	1	Brightness of the light lines, 0–3.
rippleStrength	number	1	Pointer ripples and the lens under the cursor, 0–3. Zero disables them.
interactive	boolean	true	Ripple on pointer movement and a bigger wave on press.
autoRipple	boolean	false	Drop ripples on their own for idle showcases.
paused	boolean	false	Show one still frame and stop the animation loop.
height	number \| string	560	Section height; numbers are CSS pixels.
className / style	string / CSSProperties	—	Root section class and inline styles.

Rendering uses one WebGL fragment shader on a single full-screen triangle; pixel ratio is capped at 1.5. The loop pauses offscreen and in hidden tabs. Reduced motion shows a still frame. Without WebGL, or after a lost context, the section falls back to a CSS gradient in the same colors. Vertical touch scrolling stays native.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Self-contained, instance-scoped CSS and one WebGL shader. Tailwind CSS is not required. No animation package required.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Waterlight ZIP, place the source file at src/components/waterlight.tsx, and copy the example into your own page or feature folder.

Target path

src/components/waterlight.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Requires a browser with WebGL 1. Without it, or after a lost context, the section shows a CSS gradient in the same colors.
The animation pauses offscreen and in hidden tabs; prefers-reduced-motion renders a single still frame.
Pass your own copy through title, description and the actions, or replace them entirely with children. Use a Client Component wrapper when passing children with event handlers in Next.js App Router.
No third-party code, media, or fonts are redistributed. React and React DOM are host dependencies under their respective MIT licenses.