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

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

Example settingswhat each example above was built from

examples/velariumhero.json

Brand: Velarium
Headline: Send the file. Keep the key.
Badge: Encrypted file rooms for legal teams
Colors: background #0b0d10 · ink #eef1f4 · accent #7cf2b6
Mode: dark
Fonts: Space Grotesk and Inter

examples/tessel-studiohero.json

Brand: Tessel Studio
Headline: Your words, fluent everywhere.
Badge: Translation and localisation · Lisbon
Colors: background #f4f0e8 · ink #1b1a17 · accent #c2401a
Mode: light
Fonts: Fraunces and Instrument Sans

What you get

A self-contained hero page and a paste-in embed in your colors, fonts, logo and copy
A large message, your brand name by default, that decodes letter by letter from seeded random glyphs
A lock moment for every letter, with slice offsets, two colored ghosts and an accent flash that cools to ink
A second line that decodes 1 to 4 phrases in turn, each one scrambling out before the next
A monospace HUD with a caption, status, rolling key, lock counter and progress bar, plus a faint scan line
A frame-exact, seamless 1080p MP4 and poster, plus a settled SVG still for reduced motion and failures
Open-source licenses for every part it builds on

Good fit

Security, privacy and developer products can show their name being decrypted, with a monospace HUD that feels technical without looking like a retro terminal.
Translation studios and language apps can decode greetings in several languages, one phrase after another, under a large serif or grotesk wordmark.
Launch teams get a seamless 12-second loop recorded frame by frame at 1080p, ready for a teaser post or a product page.

Not for

Long headlines or paragraphs in the panel (the message reads best at 4 to 12 characters)
Retro green-screen terminal looks (the HUD is deliberately quiet and modern)
Heroes built around a product photo, a 3D object or video footage
Right-to-left or connected scripts in the panel, which are drawn one letter per slot

About this skill

An animated website hero where a message decrypts itself beside the headline. Your brand name, set large in your display font, starts as streams of random glyphs; one by one, in a seeded order, each letter locks onto its real character with a brief slice glitch, two colored ghosts and an accent flash that cools to ink. A caret marks the next letter to lock, and an accent line sweeps under the word when it lands. Below it, up to 4 short phrases fill with noise, decode, hold and scramble out in turn. A thin monospace HUD, a faint scan line and a pointer jitter finish the panel. It builds one self-contained page plus a paste-in embed, checks it at four widths, and records a seamless 1080p loop.

Example request

Make a Scramble Decode hero for Velarium, our encrypted file rooms for law firms: the name decrypting in mint on near-black, 'Sealed on your laptop' and 'Opened by your client' as the second line, an 'Open a free room' button, and a video for the launch post.

How it works

You ask
Make a Scramble Decode hero for Velarium, our encrypted file rooms for law firms: the name decrypting in mint on near-black, 'Sealed on your laptop' and 'Opened by your client' as the second line, an 'Open a free room' button, and a video for the launch post.
Your agent
1. 1
  Collect the brand
  Every claim, price, date and spec in the copy must come from the person.
2. 2
  Write hero.json
  Copy the closer example and replace everything: examples/velarium/hero.json (encrypted file rooms for legal teams, a near-black page, mint accent, symbol noise, the message sweeping left to right, copy on the left) or examples/tessel-studio/hero.json (a translation studio in Lisbon, warm paper page, a serif message decoding from the centre out, three greetings as phrases, set as typed, copy on the right).
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, ink too close to the panel, an accent too faint on it, phrases that get too little time) 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 (the build has already checked the text against every colour the effect can put behind it), names on every link and button, one h1.
5. 5
  Look at it
  They save out/still-1440x900.png and out/still-390x844.png, the live hero at 1.5 seconds, halfway through the message's decode.
6. 6
  Record the video
  It steps the hero through 8 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 1.5 s, the message mid-decode).
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
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).
At runtime, nothing but a 2D canvas: the drawing code is inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts. The HUD uses the system's monospace font.

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.
The message looks small
The message is sized to fill the panel's width, so a long one gets small letters; shorten it, or raise size to 1.15. A phrase is set at about a third of the message's size, smaller if it is too long to fit.
Scrambled letters look narrow
A random glyph wider than its letter's slot is narrowed to fit, so the word never jumps sideways; that is by design.

What’s in the download

SKILL.md17.4 KB
examples/
examples/tessel-studio/2.12 KBTessel Studio, a translation studio, light · 2 files
examples/velarium/2.06 KBVelarium, encrypted file rooms, dark · 2 files
scripts/
scripts/effect/the panel itself: effect.mjs (its settings, checks and the still picture), effect.js (the slots, the noise, the locks and glitches, the phrases, the HUD and the scan line, on a 2D canvas).
scripts/effect/effect.js20.1 KB
scripts/effect/effect.mjs10.2 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 fonts (fonts.json), the pinned three.js catalogue (three.json, unused by this effect) 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.md1.72 KBwhere the effect comes from, and the fonts it loads.
TESTED.json698 B

25 files · 179 KB · installs to ~/.claude/skills/scramble-decode-hero for Claude Code and ~/.agents/skills/scramble-decode-hero for other agents

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

Similar Skills

View all

New

Shutter Reveal Hero+3

New

Dot Field Hero+3

Details

Output: Seeded text decode beside the copy · canvas 2D · page + embed · 1080p loop
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series: Motion Heroes · 71 skills
For: Founder Marketer Designer Ecommerce seller
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

Canvas 2D (no libraries)Motion Heroes kitHeadless Chrome checks and a frame-stepping recorderffmpeg

Uses tools

FFmpeg Chrome Node.js

Good forProduct launch Brand Web design

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

Write a review

FAQ

Can I decode something other than the brand name?

Yes. Set message to any word of up to 16 characters; 4 to 12 reads best. Under it, phrases takes 1 to 4 lines of up to 22 characters each, which decode one after another and scramble out in turn.

How do I keep the glitch subtle?

Lower glitch from its 0.5 default, or set it to 0 for a clean lock with only the color flash. Keep scan under 0.5 and pick alnum glyphs for the calmest look; symbols and hex read more technical.

Does the video loop cleanly?

Yes. Every frame is computed from the time and a seed, and the loop starts and ends on scrambled noise. Record cycle divided by motion.speed seconds, 12 by default, and the clip repeats with no visible seam at 30 fps.

Which agents is Scramble Decode 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: the Motion Heroes kit, the letter slots and hashed glyph noise, the lock glitch, the phrase line, the HUD, the SVG still and the examples, with no outside library, only a hand-drawn 2D canvas. 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.