The page this skill built from examples/saltmarrow, working in your browser. Opens in a new tab. Also: Swellnote.

12-second example rendered by this skill from examples/saltmarrow · 1280×720

Example settingswhat each example above was built from

examples/saltmarrowhero.json

Brand: Saltmarrow Sailing
Headline: Learn to sail by last light.
Badge: Evening courses, May to September
Colors: background #111a33 · ink #fdf4e7 · accent #ffb661
Mode: dark
Fonts: Fraunces and DM Sans

examples/swellnotehero.json

Brand: Swellnote
Headline: Catch the good hour.
Badge: Forecasts refreshed every hour
Colors: background #080d22 · ink #eef3ff · accent #8fd3ff
Mode: dark
Fonts: Space Grotesk and Inter

What you get

A self-contained index.html hero and an embed.html to paste into an existing site
An open sea of summed Gerstner waves, a long swell under wind waves, in your sun, sky and water colors
18 documented settings: loop length, swell, chop, wave direction, sun height, glitter, foam, haze, clouds, camera height, horizon, stars, moon and a corner caption
Golden hour, dusk after sunset, or a moonlit night with stars and a silver path
Left, right or centered layouts, with the sky, sun and horizon above the copy on phones
A seamless loop of 8 to 20 seconds, and an illustrated SVG still for reduced motion or no WebGL
Contrast and layout checks at 390, 768, 1024 and 1440 px
A frame-perfect MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
Open-source licenses for every part it builds on

Good fit

Sailing and surf schools, charters and coastal hotels can open their site with a low sun laying a glitter path across a rolling swell.
Surf forecast, wellness and travel apps can choose a moonlit night with stars and a silver path, with the copy on either side.
Teams launching on social can record a seamless video loop of 8 to 20 seconds, stepped frame by frame, that comes out the same on any machine.

Not for

Light or midday brands: the build only accepts a dark background, the sky at the top of the hero
Full landing pages below the hero (see the Landing Pages series)
Showing a real beach or coastline: the sea is generated, with no land or boats

About this skill

A hero section over the open sea at golden hour. A long, slow swell rolls in under shorter wind waves, the water mirrors the sky, and a low sun lays a glitter path that sparkles close up and smooths into a bright column toward the horizon. Light glows through the backlit crests, foam breaks on the steepest ones, haze melts the far water into the sky, and a moonlit night version has stars and a silver path. The sea loops seamlessly. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a smooth 1080p video of it.

Example request

Build an Ocean Swell hero for Saltmarrow Sailing, our evening sailing school: deep dusk blue sky, apricot sun low over the sea with a glitter path, headline 'Learn to sail by last light.', the wind and sunset time in the corner, and record a 12-second loop for Instagram.

How it works

You ask
Build an Ocean Swell hero for Saltmarrow Sailing, our evening sailing school: deep dusk blue sky, apricot sun low over the sea with a glitter path, headline 'Learn to sail by last light.', the wind and sunset time in the corner, and record a 12-second loop for Instagram.
Your agent
1. 1
  Collect the brand
  Every claim, price, date, place and number in the copy must come from the person.
2. 2
  Write hero.json
  Copy the closer example and replace everything: examples/saltmarrow/hero.json (an evening sailing school, copy on the left, golden hour: a low sun, apricot sky, a glitter path, a caption) or examples/swellnote/hero.json (a surf-forecast app, copy on the right, blue-hour dusk under the moon: a lavender horizon, stars, a bigger swell, a silver path).
3. 3
  Build
  It lists every problem in hero.json at once (missing fields, text over its limit, a setting out of range, colours that don't contrast, a light background, a sun too dim to glow, water lighter than the sky) and writes nothing until they're fixed.
4. 4
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text (the build has already checked the text against the horizon band, the water and, when centred, the sun's glow behind the copy), names on every link and button, one h1.
5. 5
  Look at it
  They save out/still-1440x900.png and out/still-390x844.png, the live sea at 6 seconds.
6. 6
  Record the video
  It steps the hero through 12 seconds at 30 fps at 1920×1080, drawing each frame at exactly its time, and writes out/preview.mp4 (H.264, for X, LinkedIn, Product Hunt or a README) and out/poster.png (the frame at 6 s).
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
You get
- out/index.html
- out/embed.html
- out/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png

What you need

Node.js 18 or newer. Nothing to install.
Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set CHROME_PATH if they don't).
ffmpeg, for the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_PATH).
At runtime, WebGL and three.js r180, which the page loads from jsDelivr, pinned and checked with subresource-integrity hashes. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts. Without WebGL, or if three.js can't load, visitors see the illustrated still.

Last checked Nov 7, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change; colour problems suggest a colour that works.
theme.background must be dark
The background is the sky at the top of the hero. Pick a deep dusk blue, ink or plum.
The headline crosses the bright horizon
Raise theme.scrim, move horizon up or down so the band misses the headline, or lower haze for a thinner warm band.

What’s in the download

SKILL.md15.3 KB
examples/
examples/saltmarrow/2.05 KBan evening sailing school at golden hour · 2 files
examples/swellnote/2.01 KBa surf-forecast app under the moon · 2 files
scripts/
scripts/effect/the sea itself: effect.mjs (its settings, checks, the caption and the illustrated still), effect.js (the three.js scene: a sky shader and an ocean shader on a polar grid that reaches the horizon), effect.css (the caption).
scripts/effect/effect.css922 B
scripts/effect/effect.js23.5 KB
scripts/effect/effect.mjs10.5 KB
scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs, cdp.mjs), the pinned three.js (three.json) and fonts (fonts.json), and KIT.md, which explains them.
scripts/kit/build.mjs34.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/fonts.json5.42 KB
scripts/kit/KIT.md16.0 KB
scripts/kit/record.mjs8.11 KB
scripts/kit/runtime.js15.1 KB
scripts/kit/shell.css9.48 KB
scripts/kit/three.json6.35 KB
scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
scripts/check.mjs9.73 KBLookbk's checks, screenshots, colour maths and HTML writer.
scripts/chrome.mjs3.63 KB
scripts/color.mjs1.40 KB
scripts/inline.mjs1.67 KB
scripts/markup.mjs6.15 KB
scripts/record.mjs255 B
scripts/screenshot.mjs1.79 KB
NOTICE.md2.55 KBwhere the effect comes from, and the libraries and fonts it loads.
TESTED.json870 B

26 files · 182 KB · installs to ~/.claude/skills/ocean-swell-hero for Claude Code and ~/.agents/skills/ocean-swell-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Event Horizon Hero+3

New

Dye Drop Hero+3

Details

Output: Animated three.js hero · page + embed + 1080p video
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series: Motion Heroes · 80 skills
For: Founder Marketer Designer Ecommerce seller
Updated: Nov 10, 2026
Checked: Nov 7, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

three.js r180 with sky and ocean shaders written for this skillMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg

Uses tools

WebGL three.js FFmpeg Chrome Node.js

Good forProduct launch Brand Web design

Picked inthree.js hero sections

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Is it real footage or a real forecast?

No. The sea is drawn live in the browser from summed waves, seeded from 1 to 9999, with no video or photo. A corner caption of up to 64 characters can show your position, wind or swell, but it is text you supply, not live data.

Can I make a night or daytime version?

A night version, yes: set moon to true for a pale disc, a silver path and stars, or lower the sun below the horizon for the afterglow. Daytime, no: the build only accepts a dark background, and the text must reach 7:1 on it.

What do visitors see on a phone, with reduced motion or without WebGL?

On phones the sky, the sun and the horizon come first, then the words over the water, and the navigation pill is hidden. With reduced motion visitors get one frame of the live sea at 6 seconds. Without WebGL they see an illustrated SVG still.

Which agents is Ocean Swell Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package from scratch: the sky and ocean shaders, the illustrated still, the Motion Heroes kit and the examples. The waves follow the public Gerstner wave equations; three.js (MIT) loads from a pinned CDN with SRI. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.