Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/ocean-waves.jsonUsage
import { OceanWaves } from "@/components/asciicn/ocean-waves";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<OceanWaves intensity={0.6} className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The view is out to sea on a clear night. Long swells roll in slowly toward you, small and crowded at the horizon and wide near the bottom of the box, with a run of ~ along every crest. Where a crest spills it comes apart into foam: *, ', . and `, lighter the further it breaks. A full moon hangs over the water and lays a path of glints that shimmer as the waves pass through it, each glint on its own slow beat. Thin clouds drift across the sky, lit at their edges near the moon.
swell sets the size of the swells, from a flat calm at 0 to heavy seas at 1. wind adds chop on top, brings foam to more of the crests and moves the clouds faster. Turn moon off for a dark night with only starlight and foam.
It draws in standard glyphs and truecolor by default. The charset sets the glyphs for the sky, clouds and water shading. With a ramp charset the crests, foam and glints are drawn as line glyphs on top; braille and quadrants draw everything from their own sub-cell dots. In mono mode every glyph takes the ink, or a phosphor. intensity thins every glyph at once. Lower it to around 0.5 under a headline.
Examples
Behind a headline
intensity={0.5} with a low swell and little wind keeps the sea quiet behind the text.
Gale on a blueprint phosphor
moon={false}, swell={1} and wind={0.9}: a moonless night with foam on nearly every crest, in cyan on dark glass with a light CRT finish.
Props
| Prop | Type | Default |
|---|---|---|
| swell How big the rolling swells are, from 0 (a flat calm) to 1 (heavy seas). | Type: number | Default 0.6 |
| wind How hard the wind blows, from 0 to 1: more chop, more foam on the crests, faster clouds. | Type: number | Default 0.4 |
| moon Show the moon and its glittering path on the water. | Type: boolean | Default true |
| intensity How much of the scene shows, from 0 (empty paper) to 1. Lower it under text. | Type: number | Default 1 |
| charset Which glyphs draw the sky, clouds and water. See Charsets. Ramps also get line-glyph crests and foam. | Type: CharsetName | Default "standard" |
| chars A custom ramp from empty to dense, such as " .oO@". Wins over charset. | Type: string | Default – |
| colorMode truecolor keeps the night's colours. mono draws every glyph in the ink or phosphor. | Type: "truecolor" | "mono" | Default "truecolor", or "mono" with a phosphor |
| phosphor A CRT ink and glass that replace the ink and paper. | Type: "p1" | "p3" | "ibm" | "blueprint" | Default – |
| background "transparent" draws the glyphs only, over your own surface. | Type: "paper" | "transparent" | Default "paper" |
| fx CRT finish: scanlines, bloom, curvature, glitch, flicker and vignette, each 0 to 1. | Type: PostFx | Default – |
| cell Height of one glyph cell in CSS pixels. | Type: number | Default 12 |
| speed How fast the swells roll and the clouds drift. | Type: number | Default 1 |
| animate false holds one still frame. | Type: boolean | Default true |
| stillTime The moment drawn when motion is off or reduced, in seconds. | Type: number | Default 6 |
| handle Filled with a handle that reads back the current frame, for export to text, ANSI, SVG or PNG. | Type: RefObject<AsciiHandle | null> | Default – |
| className Size and position. The scene fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- It ignores the pointer, so moving the mouse over it changes nothing.
- With reduced motion turned on, it draws one still frame at
stillTimeand stops. - It draws on the CPU at up to 30 fps and pauses when scrolled out of view or when the tab is hidden. Far out the swells fade into a calm sheen before they crowd closer than a glyph row, so the horizon stays steady instead of shimmering.