Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A 12-second boot story: switch-on, memory test, boot lines, a typed command, output, banner, switch-off
  • A curved tube with scanlines, aperture grille, bloom, flicker and a reflection, in a plastic case or bare glass
  • 20 documented effect settings: phosphor and glass colours, case, screen font, columns, curvature, scanlines, bloom, flicker, power cycle and every line of the script
  • Dark or light pages: the screen glows onto a dark page, a beige case suits a light one
  • An SVG still with the same text on the screen for no WebGL, and one real frame for reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-exact MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
  • Open-source licenses for every part it builds on

Good fit

  • Developer tools, CLIs and CI or hosting services can show their own command being typed at a prompt, with its output and a closing banner.
  • Retro computing fairs, games, museums and synthwave releases can use a green, amber or white tube that switches on, boots and fades every 12 seconds.
  • Brands on dark or light pages both fit: a dark page catches the screen’s glow, and a light page gets a beige plastic case.

Not for

  • A real, working terminal: the screen plays a fixed script and takes no input
  • Long text on the screen: lines are 32 to 64 characters and the log scrolls after about 14 rows
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section with an old CRT monitor beside your headline. The curved phosphor tube switches on from a bright line and runs a memory test. Boot lines print with their [ OK ]s, a command is typed at the prompt, its output scrolls past and your banner prints at double size with the cursor blinking under it. Then the picture collapses to a dot and the 12-second loop starts again. Scanlines, bloom, flicker, a rolling refresh band and a glass reflection that follows the pointer make it read as a real tube, in green, amber or your own colour. Your agent writes the boot script about your product, sets your colors, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

Example request

Build a CRT Terminal hero for Pipewren, our CI service: a green phosphor monitor on near-black that boots our runner, types 'pipewren run --branch main', prints the test results and ends on SHIPPED, headline 'Your pipeline, warm before you push.', and record the launch video.

Similar Skills

View all
web
ASCII Signal HeroClaude CodeCodexCursor+3 more agents
web
Aurora Curtain HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated WebGL hero · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL 1 shaders (no libraries)A scripted boot replayed as a function of timeMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

How much text fits on the screen?

Up to 7 boot lines of 40 characters, each with a status of up to 4, a command of up to 48, up to 4 output lines and a banner of up to 31, though the banner can be at most half the columns less one. The screen is 32 to 64 columns wide (default 42), and longer lines are cut to fit.

Will the screen font look the same for every visitor?

Not by default. The screen uses each visitor’s own monospace font, so it differs between computers. Set it to your display or body font and pick a monospace family, such as VT323, for the same look everywhere. Fonts load from jsDelivr or Google Fonts, and without the network the page uses system fonts.

What do visitors see with reduced motion or no WebGL?

With reduced motion they get one still frame of the real tube at 10.2 seconds. Without WebGL, or if the script is blocked, they see an SVG still of the monitor with the same text on its screen, so the hero is never blank.

Which agents is CRT Terminal 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: the CRT effect, its shaders, the boot script player, the Motion Heroes kit and the examples. No third-party code is included. 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.