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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A 12-second jump story: rest, spool-up, streaks, drop-out flash and ring, arrival
  • A shaded gas giant or ice world with rings and a glowing limb, or no planet
  • 16 documented effect settings: seed, stars, top speed, head and tail colors, nebula, planet, rings, copy dimming and the readout
  • A readout under the copy that shows the speed or counts up through each jump
  • An SVG still for no WebGL, and one real frame for reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-exact 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

  • Edge networks, deploy tools and other infrastructure products can tell a speed story, with a readout counting regions live or requests served.
  • Sci-fi podcasts, audio dramas and games can open on a ringed planet or an ice world before the stars stretch into streaks.
  • Brands with a near-black background and one bright accent suit it best, since the build refuses light or pastel backgrounds.

Not for

  • Light or pastel brands: the build only accepts a near-black background
  • Showing a real product photo or 3D model: the scene is space, not a product
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section that jumps to lightspeed beside your headline. It starts in a calm starfield with a ringed planet. Then stars stretch into streaks racing out of a vanishing point, blue at their heads and trailing your color through a tunnel of light. A flash and a ring mark the drop-out, the streaks snap back to points and the planet swings in again, every 12 seconds. A readout under the copy follows the jump, as a speed or a count you choose. Your agent sets your colors, planet, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

Example request

Build a Starfield Warp hero for Kestrel Edge, our edge network: violet streaks on blue-black, a ringed gas giant, headline 'Deploys that jump, not crawl.', a readout counting up to 212 regions live, and record the launch video.

Similar Skills

View all
New
web
Ringed Planet HeroClaude CodeCodexCursor+3 more agents
New
web
Aurora Curtain 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 WebGL 1 shaders (no libraries)Seeded star volume and integrated speed curveMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Can I use a light or white background?

No. The stars and streaks add light onto the background, so it must be near-black, and the build refuses anything lighter. Try a very dark navy, plum or green, such as #05060c. The text color must reach 7:1 on it, and the streak tails need 2.5:1.

What can the readout under the copy show?

Either the speed, which runs from 0 at rest to your top value, or a count that runs from 0 to your number through each jump and holds, like regions live. Add a label of up to 24 characters and a unit of up to 8. It shows on screens 1180 px wide or more, and not with centered copy.

What do visitors without WebGL or with reduced motion see?

Never a blank hero. Without WebGL, or if the script is blocked, they see an SVG still of streaks out of a glow. Visitors who ask for reduced motion get one real frame of the jump at 5.6 seconds. Only the fonts load from a CDN, so offline the page uses system fonts.

Which agents is Starfield Warp 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 warp effect, its shaders, the planet, the readout, the Motion Heroes kit 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.