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/squall, working in your browser. Opens in a new tab. Also: Fieldcast.

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your colors, reflectivity palette, station name, coordinates, range, wind direction and clock start, with your fonts, logo, headline and buttons
  • 21 documented effect settings: seed, loop length, sweep turns, cells, intensity, rain, wind, drift, palette, afterglow, isobars, map, size, markers and labels
  • Dark ops screens or light paper charts, left, right or centered layouts, with the scope above the copy on phones
  • An SVG still picture 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

  • Weather alert, logistics and freight operations products can show an ops-screen radar with a station plate, range rings and a ticking UTC clock.
  • Farm forecasting and agriculture tools can use a light paper chart with a pale sea and a warm sweep instead of a dark screen.
  • Teams that want a serious instrument look, rather than a playful one, can set the station name, coordinates, range and wind direction.

Not for

  • Showing live or real weather data: the weather is generated, not measured
  • Playful or lifestyle brands: the look is an instrument by design
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A weather radar scope beside your headline. A sweep turns over a map of coastline and isobars while storm cells drift with the wind, grow and fade in reflectivity colors, drawn in range gates that update as the beam passes under a glowing afterglow. Range rings, bearing ticks, ringed storm cells with forecast tracks, a dBZ scale, a station plate and a ticking UTC clock make it read like a real instrument. Your agent sets the colors, palette, station, coordinates, wind and copy, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Weather Radar hero for Squall Ops, weather alerts for freight routes: navy ops screen, cyan sweep, station KSEA-2, headline 'See the storm before dispatch does.', and record a 12-second loop.

Similar Skills

View all
web
Aurora Curtain HeroClaude CodeCodexCursor+3 more agents
web
CRT Terminal 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 (one hand-written fragment shader) plus a 2D overlay, no librariesSeeded storm cells, pressure field and coastlineMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandReportingWeb design

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

Write a review

FAQ

Does it show live or real weather data?

No. The coastline, storm cells and pressure field are generated from a seed, not measured, so don’t present them as a real forecast. You choose the station name, coordinates, range and wind direction so the picture matches your region, and the clock is a time-lapse from a start time you set.

Which reflectivity palettes can I use?

Three palettes exist: nws, the familiar blue, greens, yellow, orange, reds and magenta; ember, browns to white-hot; and ice, blues to white. Ice fades to white and is lost on a light page, so the build refuses it there. On a light paper chart use nws or ember.

What do phones and reduced-motion visitors see?

On phones the scope comes first, above the words, without the station plate, range labels and color scale. Visitors who ask for reduced motion get one still frame of the live hero at 6.2 seconds, and browsers without WebGL get an SVG still, so the hero is never blank.

Which agents is Weather Radar 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 radar shader and overlay, 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.