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

The page this skill built from examples/harrow-fell, working in your browser. Opens in a new tab. Also: .

9-second example rendered by this skill from examples/harrow-fell · 1280×720

Example settingswhat each example above was built from

examples/harrow-fellhero.json
Brand
Harrow & Fell
Headline
Every ridge hides another.
Colors
background #efe6d8 · ink #17201f · accent #b4532a
Mode
light
Fonts
Instrument Serif and Instrument Sans
examples/kestel-roofhero.json
Brand
Kestel Roof
Headline
Supper on the eleventh floor.
Colors
background #0b101c · ink #f2ebdf · accent #f2a54a
Mode
dark
Fonts
Big Shoulders Display and DM Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A mountain range at dawn or a city at night painted on 6 plates at real distances
  • Near trees or roofs passing in front of the foot of the letters, never more than 30% of any letter
  • A pinned scroll that raises the camera so far ranges and the sun or moon rise behind the words
  • Computed air, valley mist, rim light and out-of-focus near plates
  • A baked still of the scene for when WebGL is off, plus checks at 4 widths
  • A frame-exact 1080p MP4 of the scroll and a poster
  • Open-source licenses for every part it builds on

Good fit

  • A walking holiday, mountain hut or outdoor brand whose promise is the view waiting past the next ridge.
  • A rooftop restaurant, hotel or bar that wants its name set among the city lights it looks out over.
  • A brand site that needs a calm, deep first screen and a short scroll video of the camera rising.

Not for

  • Long headlines that wrap into many tall lines on phones
  • Brands that need a photo or product shot as the hero picture
  • Heroes placed inside a box with overflow set, where sticky pinning can't work
  • Dark themes over the mountain scene or light themes over the city

About this skill

A centred lockup hero built like a multiplane camera. A scene is painted in code on 6 plates at real distances from the lens, and the headline is one of them: the far plates drift against the pointer, the near plates move with it, and the words hold still. Two worlds come with it, a mountain range at first light with snow, spruce, valley fog and grass at the lens, or a city at night with lit towers, a moon, chimneys, a water tower and a festoon of lamps. Air, mist, light and defocus are computed, not painted. Scrolling raises the camera over 1.25 screen heights, so the near ridge drops below the words while the sun rises behind them, and no letter is ever covered more than 30%.

Example request

Make a hero where our headline sits inside a layered landscape, with near ridges passing in front of the words and the far mountains and sun rising as visitors scroll.

Similar Skills

View all
Free
web
Laser EtchClaude CodeCodexCursor+3 more agents
Free
web
Signal GlitchClaude CodeCodexCursor+3 more agents
Free
web
Falling LeavesClaude CodeCodexCursor+3 more agents
Free
web
Aperture RevealClaude CodeCodexCursor+3 more agents
web
Dither LaserClaude CodeCodexCursor+3 more agents
web
Tilt Card Stack HeroClaude CodeCodexCursor+3 more agents
web
Liquid Lens HeroClaude CodeCodexCursor+3 more agents
web
Cylinder CarouselClaude CodeCodexCursor+3 more agents

Details

Output
WebGL multiplane scene with the headline as a plate · page + embed · 1080p scroll video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 87 skills
Updated
Nov 8, 2026
Checked
Nov 8, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

A raw WebGL1 fragment shader run twice a frame, far plates and near platesPer-letter coverage ceilings measured from the page's real fontKit story mode with a pinned scroll that raises the cameraHeadless Chrome frame-stepped recorder, still baker and ffmpeg
Good forBrandWeb designProduct launch
Effect guideParallax effect

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

Write a review

FAQ

Can the scenery hide the headline?

No. The page draws each letter in its real font and finds the height that leaves 30% of its ink below; no near plate is drawn above it. A separate script measures the covered share over the whole scroll at 4 widths and fails above a third.

What do visitors see without WebGL or with reduced motion?

With reduced motion the scene is drawn once at its first frame and nothing pins. Without WebGL they see a baked picture of the same scene, wide on desktops and tall on phones, behind the real headline and copy.

How heavy is it to run?

It is one shader and no libraries. The scene draws at most 1.5 device pixels per CSS pixel and measured under 10.1 ms a frame at 1440 by 900 on a 2x screen.

Which agents is Parallax Depth 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 in raw WebGL with no libraries, the fonts load from Fontsource under the SIL Open Font License 1.1, and the brands and copy in the examples are made up. 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.