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

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

Example settingswhat each example above was built from

examples/quarrowhero.json
Brand
Quarrow Type
Headline
Letters that hold up under glass.
Badge
New release: Mirela Display
Colors
background #0d0c12 · ink #f3f0ea · accent #ff5a36
Mode
dark
Fonts
Bricolage Grotesque and Inter
examples/sorrellinehero.json
Brand
Sorrelline
Headline
Sparkling, bitter, bright.
Badge
Blood orange and sorrel
Colors
background #f4efe6 · ink #1b1713 · accent #c73a1d
Mode
light
Fonts
Fraunces and DM Sans

What you get

  • A self-contained index.html hero page in your colours, fonts, logo and copy
  • An embed.html section to paste into an existing site
  • Glass spheres that refract your poster upside down, bobbing and leaning from the pointer
  • A layout and contrast check at four screen widths
  • An SVG still picture for reduced motion and browsers without WebGL
  • A frame-exact 1080p MP4 loop and a poster image
  • Open-source licenses for every part it builds on

Good fit

  • A type foundry or design studio that wants its letters shown off under real-looking glass.
  • A drinks, beauty or fragrance launch that wants a glossy, colourful first screen with a short brand word.
  • A product team that needs a looping hero video for a launch post as well as the live page.

Not for

  • Heroes built around a product photo or a 3D model of your product
  • Pages that must work without JavaScript or WebGL beyond a still picture
  • Scroll-driven stories or pinned sections
  • Long or multi-line slogans on the poster, which break up inside the spheres

About this skill

A hero section where several glass spheres float in front of a bold poster drawn in code: a drifting gradient in the brand's two colours, a fine grid and a huge word scrolling in rows. Each sphere is traced as a real ball of glass in WebGL, so the poster shows inside it upside down and magnified, with the word running the other way, a thin rainbow at the rim, a studio reflection, a sharp highlight and a soft shadow with a spot of focused light. The spheres bob on springy loops and lean away from the pointer; in the recording a scripted pointer takes over, so the video loops exactly. You get a self-contained page, a paste-in embed, an SVG still for reduced motion and a frame-exact MP4.

Example request

Build a website hero for our brand with glass spheres floating over a bold gradient poster of our name, refracting it upside down, plus a looping video of it.

Similar Skills

View all
New
web
Prism Light HeroClaude CodeCodexCursor+3 more agents
New
web
Extruded Type HeroClaude CodeCodexCursor+3 more agents

Details

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

Generates with

WebGL1 shaderNode.js buildheadless Chromeffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Why does the word look upside down inside the spheres?

Each sphere is traced as a real ball of glass. Light bends on the way in and on the way out, so a poster sitting a few radii behind it shows mirrored and magnified, just as it would through a glass marble. The depth setting changes how large and sharp that picture is.

Does the video loop without a jump?

Yes. The bobbing, the gradient and the scrolling word all repeat on whole turns of the cycle, from 8 to 20 seconds, and the recording replaces the mouse with a scripted path that also closes every loop. Record a multiple of the cycle and the last frame meets the first.

How many spheres can I have, and can I change the glass?

From 2 to 7 spheres, the first always the largest. You can change how strongly the glass bends light, how far it floats in front of the poster, its tint, the rainbow at the rim and the shadows, and each seed gives a different arrangement.

Which agents is Glass Orbs 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 on raw WebGL1 with no libraries; one small hash function is adapted from Dave Hoskins' Hash without Sine (MIT licence). 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.