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

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

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

Example settingswhat each example above was built from

examples/orrinhero.json
Brand
Orrin Compute
Headline
All the compute, none of the sprawl.
Badge
Now booking Q3 capacity
Colors
background #07060a · ink #f5efe6 · accent #ffb35c
Mode
dark
Fonts
Sora and Inter
examples/far-signalhero.json
Brand
Far Signal
Headline
Ten nights at the edge of the map.
Badge
Science fiction film festival
Colors
background #07051a · ink #f3efff · accent #5ff2ff
Mode
dark
Fonts
Bricolage Grotesque and Manrope

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A ray-traced black hole: lensed accretion disk, photon ring, Doppler beaming, orbiting streaks, bent stars and a soft bloom
  • 25 documented settings: loop length, disk edges, tilt, roll, spin, beaming, three disk colors, turbulence, ring, glow, lensing, camera distance and drift, size and position
  • Left, right or centered layouts, with the hole beside the copy on desktop and above it 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

  • Compute, AI and deep-tech startups can set a black hole beside the headline, its glowing disk wrapping over the shadow in their own accent color.
  • Planetariums, science fiction festivals and games can mirror the layout, recolor the disk from violet to cyan and bring the camera closer for drama.
  • Teams launching on social can record a disk that loops exactly every 8 to 20 seconds, stepped frame by frame, the same on any machine.

Not for

  • Light or daytime brands: the build only accepts a dark background
  • Scientific visualization: the physics shapes the picture, but the disk is an illustration and the hole does not spin
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section with a black hole beside your copy. A glowing accretion disk circles a perfectly black shadow, and gravity bends the light from its far side up over the top and down under it. A thin photon ring traces the edge, the side of the disk turning toward you burns brighter and shifts color while the side turning away dims, streaks orbit faster near the hole and the stars behind bend round it. Every pixel is a light ray traced past the hole. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build an Event Horizon hero for Orrin Compute, our dense training clusters: warm ink background, an amber disk that turns white-hot on the approaching side, headline 'All the compute, none of the sprawl.', our hall stats in the corner, and record a 12-second loop for LinkedIn.

Similar Skills

View all
New
web
Ocean Swell HeroClaude CodeCodexCursor+3 more agents
New
web
Dye Drop 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 · 80 skills
Updated
Nov 10, 2026
Checked
Nov 7, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL1 shaders (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design
Picked inShader backgrounds for websites

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

Write a review

FAQ

Is it a scientifically accurate black hole?

It follows real physics: every pixel traces a light ray past a non-spinning hole, so the shadow, the photon ring, the far side lifted over the top and the Doppler beaming come out of the math. The disk itself is an illustration in your colors, not a simulation.

Will it run on phones and older laptops?

It is raw WebGL1 with no libraries: at most 80 ray steps per pixel and a quarter-size bloom. The kit caps the pixel ratio at 2 and lowers it when frames run slow, and quality goes down to 0.5. Without WebGL, or with reduced motion, visitors get a still.

How do I keep the disk away from my headline?

Lower size (0.07 to 0.3, default 0.13) or outer (6 to 18 hole radii), or raise offsetX to push the hole away from the copy. On phones the hole sits above the words, and the scene under the copy is always calmed so the text stays readable.

Which agents is Event Horizon 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 from the published physics of black hole imaging (credited in NOTICE.md): the ray tracer, disk, ring, sky and bloom shaders, the illustrated still, the Motion Heroes kit and the examples. A few hash lines are adapted from Dave Hoskins' "Hash without Sine" (MIT). 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.