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

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

Example settingswhat each example above was built from

examples/sogliahero.json
Brand
Casa Soglia
Headline
Four doors between you and the street.
Colors
background #efe6d6 · ink #24190f · accent #b4532a · plate #efe6d6
Mode
light
Fonts
Newsreader and Instrument Sans
examples/lowwaterhero.json
Brand
Low Water
Headline
Sound takes the long way round.
Colors
background #17110e · ink #efe6d6 · accent #e0983a · plate #17110e
Mode
dark
Fonts
Fraunces and DM Sans

What you get

  • A self-contained index.html and a paste-in embed.html
  • A scroll-pinned walk through 3 doors with numbered steps that light up
  • A headline drawn in the scene, with a contrast guard that keeps it at 3:1 or better
  • The last arch solved around the headline at every screen size, phones included
  • Two buildings: limewash in afternoon sun and brick vaults over water at dusk
  • A still picture for reduced motion and when WebGL is missing
  • A 1080p MP4 of the whole walk and stills from record.mjs
  • Open-source licenses for every part it builds on

Good fit

  • A guesthouse or hotel that wants the first scroll to feel like arriving through the gate.
  • A concert venue, gallery or museum whose building is part of what people come for.
  • An architecture or interiors studio that sells space, thickness and light rather than screens.

Not for

  • Pages that need a looping background video
  • Brands that want a flat, graphic look with no depth
  • Phones without WebGL, which only get the still picture
  • Layouts other than the story composition

About this skill

A scroll-pinned hero that walks the visitor through one building, door by door, toward the light. Each wall is a real slab with its own opening: a round-arched gate in a stone surround, a low segmental arch, a full-circle round door and a tall last arch. One low light sits beyond the last door, and its shadows are traced through every opening, so a runner of light crosses the floors and spills out of the gate under the headline. The headline is drawn in the scene and warms where light passes behind each letter. The last arch is cut to the headline's measured box at every screen size, so the story ends with the words standing in the doorway. Two buildings ship: limewash in afternoon sun, or brick vaults over still water at dusk.

Example request

Build a scroll-pinned hero that walks through a line of arched doors toward a low light, with the last arch framing the headline.

Similar Skills

View all
New
web
Dither LaserClaude CodeCodexCursor+3 more agents
New
web
Day NightClaude CodeCodexCursor+3 more agents

Details

Output
Scroll story through arched doors · page + embed · 1080p story clip
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 77 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL1 ray-traced scene, no librariesAnalytic soft shadows and single-scattered haze through every openingHeadline drawn in the scene from the live layout, with a shader contrast guardLast arch solved from the headline's measured box at every screen size
Good forBrandWeb designProduct launch

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

Write a review

FAQ

Does the headline stay readable while the light moves behind it?

Yes. A contrast guard in the shader holds the ground under the letters at a fixed luminance, so the headline keeps at least 3:1 at every moment of the story, and the build checks the ink colours against it.

What happens on a phone?

The phone gets its own composition: the headline at the top, the doors in the band below it, and at the end the last arch is solved so its crown sits just under the bar with the words in its upper half.

How long is the scroll?

The section pins for 3 screen heights of scroll. A recording rests 0.6 s at the gate, walks for 12 s, then holds on the last arch, so 14 seconds shows the whole walk.

Which agents is Arch Portal 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 the Motion Heroes kit v2; it uses raw WebGL1 with no third-party library, and its fonts load from Fontsource under the SIL Open Font License 1.1. 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.