Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/erg-lumen, working in your browser. Opens in a new tab. Also: Sandglass.

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your sand, shade, sky and sun colors, fonts, logo, headline, buttons and a corner field line
  • 22 documented effect settings: seed, loop length, dune relief, sun height and side, horizon, five colors, wind, ripples, haze, glints, cloud wisps, camera sway and height, grain, copy wash, render quality, caption
  • Dark dusk or pale misty-dawn grounds, left, right or centered layouts, with the dunes above the copy on phones
  • An illustrated SVG still for no WebGL or reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Desert camps, retreats and travel brands can set their headline beside a low sun over dunes, with long shadows and sand blowing off the crests.
  • Meditation, sleep and focus apps get a calm, slow hero whose camera drifts on a closed loop of 8 to 16 seconds.
  • Teams who want a launch video can record a seamless 1080p loop of the desert, with the same frames on any machine.

Not for

  • Showing a real place: the dunes are generated, not photographed
  • Low-power devices at full quality: the ray march is heavy, so lower the quality setting there
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A sea of dunes at golden hour beside your headline. Sharp crests with long shadows run to a hazy horizon under a low sun, wind ripples travel across the slopes, sand streams off the crests in thin plumes, and grains glint as the light catches them, while the camera drifts slowly on a closed loop. The dunes are ray-marched in a hand-written shader, so the light, shadows and haze are worked out per pixel. Your agent sets the sand, shade, sky and sun colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Sand Dune hero for Erg Lumen, a desert camp: plum dusk sky, amber sand, low sun on the right, headline 'Stay for the last light.', and record a 12-second loop.

Similar Skills

View all
web
Isometric City HeroClaude CodeCodexCursor+3 more agents
web
Lava Lamp HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated WebGL hero · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL1 (two hand-written fragment shaders, no libraries)Ray-marched height field with soft sun shadowsMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaWeb design

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

Write a review

FAQ

Is the desert a real place?

No. The dunes are generated, not photographed or mapped, so they set a mood rather than show a location. Each seed from 1 to 9999 (default 7) stands you somewhere else in the same desert, and the corner field line shows only the text you write.

Will it run on phones and older laptops?

It needs WebGL, and the ray march is heavy. Lower quality (0.5 to 1, default 1) to draw the desert at a lower resolution, or set wind to 0 to skip the plumes. On phones the sky and the sun come first, then the words over the near dunes.

What do visitors who ask for reduced motion see?

They get one still frame of the live hero at 6 seconds instead of the moving desert. If the browser has no WebGL or blocks the script, visitors see an illustrated SVG still of the dunes, so the hero is never blank.

Which agents is Sand Dune 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: the Motion Heroes kit, the ray-marched dune shader, the still picture and the examples. No third-party code is included. 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.