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

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

Example settingswhat each example above was built from

examples/popsyhero.json

Brand: Popsy
Headline: Real fruit, loud fizz.
Badge: Small-batch soda · Summer range
Colors: background #f4ede2 · ink #1d1916 · accent #c93a24
Mode: light
Fonts: Bricolage Grotesque and Inter

examples/veldehero.json

Brand: Velde
Headline: Names that hold their shape.
Badge: Identity studio · Booking for spring
Colors: background #101116 · ink #f1eee8 · accent #c7b2ff
Mode: dark
Fonts: Fraunces and Inter

What you get

A self-contained hero page with your word in bevelled 3D letters
A paste-in embed of the same section for an existing site
A reflective studio floor with a soft contact shadow under each letter
A slow sway, staggered letter bobs and a lean toward the pointer
A seamless 1080p MP4 loop and a poster frame
A still picture for reduced motion and for browsers without WebGL
Contrast and layout checks at four screen widths
Open-source licenses for every part it builds on

Good fit

Brands with a short, bold name that deserves to be the picture on the first screen.
Product launches and studio sites that want a premium 3D look without a modelling tool or video footage.
Teams that need a looping hero video for social posts as well as a live page.

Not for

Animating your own logo file, since the letters come from a typeface
Whole sentences or long names over 8 characters
Setting the 3D word in your own brand font
Photoreal renders with cast shadows or blurred reflections

About this skill

A hero where the brand's short word stands in big 3D letters beside the headline. The letters are deep and bevelled, with fronts in the brand colour and darker sides, in a glossy, satin or matte finish, lit by soft studio lights and standing on a floor that reflects them and melts into the background. The word sways slowly, each letter lifts off the floor and settles again in turn while its contact shadow softens, and the word leans toward the pointer. Every movement repeats exactly, so a 12 second recording loops without a seam. Pick one of three typefaces, set the colours, depth, bevel and spacing, and get one self-contained page, a paste-in embed, a still picture for when WebGL is missing, and a 1080p video.

Example request

Build an animated website hero for my brand with its short name as chunky, bevelled 3D letters standing on a reflective studio floor, in our brand colours, slowly swaying with each letter bobbing, beside our headline and buttons, as a page, an embed and a looping 1080p video.

How it works

You ask
Build an animated website hero for my brand with its short name as chunky, bevelled 3D letters standing on a reflective studio floor, in our brand colours, slowly swaying with each letter bobbing, beside our headline and buttons, as a page, an embed and a looping 1080p video.
Your agent
1. 1
  Collect the brand
  Every claim, number, price and date in the copy must come from the person.
2. 2
  Write hero.json
  Copy the closer example and replace everything: examples/popsy/hero.json (light, copy on the left, glossy red capitals in the grotesk) or examples/velde/hero.json (dark, copy on the right, a lowercase word in the serif, satin lavender).
3. 3
  Build
  It lists every problem in hero.json at once (missing fields, text over its limit, a setting out of range, colours that don't contrast, a word too long or with characters the typefaces lack) and writes nothing until they're fixed.
4. 4
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text (including the still picture's word, at 3:1), names on every link and button, one h1.
5. 5
  Look at it
  The first two save out/still-1440x900.png and out/still-390x844.png, the live scene at 3 seconds; try a few times across the loop.
6. 6
  Record the video
  It steps the hero through 12 seconds at 30 fps at 1920×1080, drawing each frame at exactly its time, and writes out/preview.mp4 (H.264, for X, LinkedIn, Product Hunt or a README) and out/poster.png (the frame at 3 s, or --poster 6).
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host.
You get
- out/index.html
- out/embed.html
- out/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png

What you need

Node.js 18 or newer. Nothing to install.
Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set CHROME_PATH if they don't).
ffmpeg, for the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_PATH).
Internet access when the page is opened: three.js (r180, with TextGeometry, FontLoader and RoomEnvironment), the typeface file and the fonts load from jsDelivr at pinned versions with integrity hashes. Without it, visitors see the still picture and system fonts; the page still works.

Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change; colour problems suggest a colour that works.
effect.word: "…" is 11 characters
The brand name is used when word is empty; set word to a short form (an abbreviation or the first part).
record: the effect didn't start
The page fell back to its still picture: Chrome couldn't load three.js or the typeface from jsDelivr, or has no WebGL. On a server without a GPU, Chrome uses its software renderer, which the recorder enables; it is slower but works.

What’s in the download

SKILL.md15.5 KB
examples/
examples/popsy/1.88 KBa soda brand, light, glossy red capitals · 2 files
examples/velde/1.94 KBan identity studio, dark, mirrored, a satin serif word · 2 files
scripts/
scripts/effect/the word itself: effect.mjs (its settings, checks and the still picture, plus the pinned TextGeometry and FontLoader hashes), effect.js (the three.js studio, the letters, the reflection, the contact shadows and the motion, plus the pinned typeface hashes), effect.css (a rule for the still picture's word).
scripts/effect/effect.css297 B
scripts/effect/effect.js17.8 KB
scripts/effect/effect.mjs11.4 KB
scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs, cdp.mjs), the pinned three.js and add-ons (three.json), the pinned fonts (fonts.json) and KIT.md, which explains them.
scripts/kit/build.mjs34.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/fonts.json5.42 KB
scripts/kit/KIT.md16.0 KB
scripts/kit/record.mjs8.11 KB
scripts/kit/runtime.js15.1 KB
scripts/kit/shell.css9.41 KB
scripts/kit/three.json6.35 KB
scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
scripts/check.mjs9.48 KBLookbk's checks, screenshots, colour maths and HTML writer.
scripts/chrome.mjs3.63 KB
scripts/color.mjs1.40 KB
scripts/inline.mjs1.67 KB
scripts/markup.mjs6.15 KB
scripts/record.mjs255 B
scripts/screenshot.mjs1.79 KB
NOTICE.md2.78 KBwhere the parts come from, and the libraries, typefaces and fonts it loads.
TESTED.json602 B

26 files · 176 KB · installs to ~/.claude/skills/extruded-type-hero for Claude Code and ~/.agents/skills/extruded-type-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Glass Orbs Hero+3

New

Variable Weight Wave Hero+3

Details

Output: 3D extruded word on a reflective floor · page + embed · 1080p loop
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series: Motion Heroes · 71 skills
For: Designer Ecommerce seller Founder Marketer
Updated: Nov 1, 2026
Checked: Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

three.js TextGeometryWebGLheadless Chromeffmpeg

Uses tools

WebGL three.js FFmpeg Chrome Node.js

Good forBrand Product launch Web design

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

Write a review

FAQ

How long can the word be?

Up to 8 characters: letters, digits and plain punctuation, with one space at most between parts. Shorter words of 3 to 6 characters get bigger letters. When the word is empty, the brand name is used if it fits.

Can the letters use my brand font?

No. The 3D letters come from three typefaces that ship with three.js: a bold grotesk, a bold humanist and a bold serif. Pick the closest one; the headline and the rest of the page still use your own fonts.

Does the video loop cleanly?

Yes. Every movement repeats exactly every loop, 12 seconds by default. Record that many seconds and the first and last frames match, so the clip plays round without a jump.

Which agents is Extruded Type 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; it loads three.js r180 (MIT) with its TextGeometry, FontLoader and RoomEnvironment add-ons, and the 3D letters use three.js's Helvetiker and Optimer typefaces (MgOpen licence) or Droid Serif Bold (Apache License 2.0), all fetched pinned from jsDelivr. 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.