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

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

Example settingswhat each example above was built from

examples/ostrelhero.json
Brand
Ostrel
Headline
Exposed.
Colors
background #0d0e10 · ink #efe9df · accent #ff5a36
Mode
dark
Fonts
Jost and Inter
examples/tovahero.json
Brand
Tova
Headline
Pressed.
Colors
background #ebe5d9 · ink #1a1712 · accent #c8432b
Mode
light
Fonts
Fraunces and Inter

What you get

  • A self-contained HTML hero page and a paste-in embed on the Motion Heroes kit v2
  • A camera and a kettle built in three.js, each with its own isoparm cage and dimensions
  • The headline drawn from the font file: outlines, outline points, handles and labelled guides
  • A sheet of light that is the only light: area lighting, soft shadows, strip reflections
  • A frame-exact 14-second looping 1080p MP4 and stills recorded in headless Chrome
  • Checks at four widths for text size, contrast, clearance under the bar and the v1 template
  • Two worked examples, a dark camera and a light kettle
  • Open-source licenses for every part it builds on

Good fit

  • A product launch where the object was designed with care and the story is drawn first, made second.
  • A camera, kitchenware, furniture or hardware brand that wants its hero to feel like a studio photograph.
  • A type foundry or design studio that likes showing the construction behind a finished letter.

Not for

  • Showing your own 3D model or CAD file: the products are built in code
  • Headlines longer than one word of 10 characters
  • Sites that cannot load three.js from a CDN
  • Long product tours or scroll stories

About this skill

A sheet of light crosses a studio and turns a design file into a photograph. Ahead of the line the product, built in code as a camera or a kettle, is a hidden-line cage of isoparms with dimensions on a ground grid, and the one-word headline on the wall is its own construction drawing, read from the font file with outlines, points and metric guides. Behind the line everything is made and lit by the sheet alone: an area light with soft floor shadows, a strip reflection and a studio window in the gloss, and a hot contour where it touches each surface. It sweeps across, rests off-frame, returns on a seamless 14-second loop, and the pointer scrubs it on a spring.

Example request

A type-as-effect product hero: one word painted on a studio wall, a product standing in front of it, and a sheet of light that turns the CAD drawing of both into a lit photograph as it sweeps across.

Similar Skills

View all
New
web
Cylinder CarouselClaude CodeCodexCursor+3 more agents
FreeNew
web
Washing Line HeroClaude CodeCodexCursor+3 more agents

Details

Output
three.js studio scene · page + embed · 1080p loop
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

three.js r180 scene with area-light sheet, pinned with integrity hashesopentype.js 1.3.4 vendored for the glyph construction drawingMotion Heroes kit v2 (type-effect composition, headline in the scene)Headless Chrome checks and frame-stepped recorder, ffmpeg
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 my own product instead of the camera or the kettle?

The package builds two products in code, a 6x7 camera and an enamelled kettle, and colours them with effect.finish. Adding another object means writing it in scripts/effect/effect.js from the same parts: rounded boxes, lathe profiles and tubes, each with its cage.

Which fonts get the full construction drawing?

Jost and Fraunces at weight 600 ship as font files, so their real outline points and handles are drawn. Any other display face gets the drawn fallback: the browser's own outlines stroked, a box per letter and guides labelled in shares of the em.

Does the loop really close?

Yes. Everything is a function of time with a period of effect.cycle, 14 seconds in the examples, so the frame at 14 seconds is the frame at 0. Record cycle seconds and the clip loops without a seam.

Which agents is Wireframe Scan 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 on the Motion Heroes kit v2; it uses three.js r180 (MIT) and vendors opentype.js 1.3.4 (MIT) with the Jost and Fraunces font files (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.