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/starling-atlas, working in your browser. Opens in a new tab. Also: Halden dome.

14-second example rendered by this skill from examples/starling-atlas · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your cloud, storm, ring and moon colors, tilt and lighting, fonts, logo, headline, buttons and a corner sky line
  • 31 documented effect settings: seed, loop length, size, tilt, axis lean, sun angle and phase, bands, turbulence, flow, storm, five planet colors, ring density and width, two ring colors, moons, moon size and color, stars, nebula and its color, glow, grain, copy wash, render quality, caption
  • Deep space on dark grounds or a printed-plate look on light ones, left, right or centered layouts, with the planet above the copy on phones
  • An SVG still of the planet 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

  • Sky-guide apps, planetariums, observatories and space-themed launches can hang a ringed planet beside the headline with moons crossing in front and behind.
  • Brands can recolor the clouds, storm, rings and moons, so a warm Saturn-like giant becomes a teal ice giant on a light printed-plate page.
  • Teams that want a tunable scene get 31 documented settings, from ring tilt and sun angle to bands, nebula and render quality.

Not for

  • Scientific accuracy: the planet is an illustration, not a model of Saturn or any real body
  • Showing real mission imagery or photographs
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A ringed gas giant hanging beside your headline in a field of stars. Its cloud bands drift in alternating jets and a great storm turns in one belt; its rings, tilted open toward you with fine ringlets and a dark gap, pass in front of the planet below and behind it above, throw a shadow band across its face, and lose a wedge to the planet's shadow on the night side. Moons circle once a loop, crossing in front of the planet and slipping behind it, while stars twinkle and a faint nebula drifts. Your agent sets the cloud, ring and moon colors, the tilt and the light, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Ringed Planet hero for Starling Atlas, a sky-guide app: near-black navy, warm Saturn-like planet with two moons, gold accent, headline 'Find the rings from your balcony.', and record a 14-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 (one hand-written fragment shader, no libraries)Analytic sphere, ring and moon intersections with shadows between themMotion 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 planet an accurate model of Saturn?

No. It is an illustration, not a model of Saturn or any real body, and its colors, bands, storm and moons are yours to set. The rings, their shadows and the moon crossings follow the light, but it shows no real mission imagery or photographs.

Will it run on an old laptop or phone?

It is one WebGL shader with no libraries. If it runs slowly, lower quality: 0.7 renders at 70% resolution, and the range goes down to 0.5. On phones the planet sits above the copy. Without WebGL, or with reduced motion, visitors see a still of the planet.

How long is the loop, and how do I change the rings?

One loop is 8 to 16 seconds (default 14): the moons circle once and the storm turns once, so it repeats without a seam. Tilt opens the rings from 8 to 40 degrees, ringWidth sets their outer edge from 1.8 to 2.6 planet radii, and setting rings to 0 removes them.

Which agents is Ringed Planet 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 ringed planet 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.