~/materials.txt

materials

things i built for this site that you can use on yours. read the rules, tick the box, take what you like.

$ cat rules.txt

free for personal and non-commercial sites.
edit it, recolor it, resize it, take it apart. it's yours to change.
credit isn't required, but a link back is appreciated.
host your own copy instead of hotlinking files from cmkat.com. the 88x31 button is the one exception.
don't claim it as your own work, and don't sell it or put it in anything paid.
it comes as is. if it breaks, you get to keep both pieces.

i've read the rules

$ ls ~/materials

battery-timer/ audio-player/ release-kit/ falling-code/ crt-overlay/ boot-screen/ patterns/ honeycomb-stamps/ 88x31/ shoutbox/ guestbook/ 404-page/

$ ./battery-timer

download .zip 5 kb

the eva power display from the audio player, on its own. drawn in svg, so there's nothing to load. click it to pause.

<link rel="stylesheet" href="battery-timer.css">
<script src="battery-timer.js" defer></script>

<div class="eva-battery" data-seconds="300"></div>

count down to a date with data-until, move the racing point with data-warn, add data-loop or data-paused. scale it with font-size.

$ ./audio-player

download .zip 26 kb

the evangelion player from the home page, on top of soundcloud's widget. bring your own playlist.

see it running on ~/home

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="media-player.css">
<script src="media-player.js" defer></script>

<section class="media-deck" data-media-player data-playlist="playlist.json"> … </section>

the full markup is in example.html; tracks go in playlist.json.

$ ./release-kit

download .zip 6 kb

the download buttons from my project pages, for any github project that ships a file. live version, size and download count, a changelog, and an optional proxy that checks the file's sha-256 before saving.

download autocat

v1.2.1 · 425 KB · 1,071 downloads · Oct 15, 2026

sha-256 a85ff4f6650a454741a9402a488347dd0b84736410febfbbc481605d4b47d19c

<script src="releases.js" defer></script>

<div data-release="you/your-repo" data-asset="your-app.exe">
  <a href="https://github.com/you/your-repo/releases/latest" data-download>download</a>
  <span data-r="version"></span> · <span data-r="downloads"></span> downloads
</div>

that one really downloads autocat.

$ ./falling-code

download .zip 2 kb

the characters drifting down behind every page here. they stop for anyone with reduced motion on.

<link rel="stylesheet" href="falling-code.css">
<script src="falling-code.js" defer></script>

<div class="falling-code falling-code--page"></div>

or put it in any box with a height. data-chars and data-speed change the characters and pace.

$ ./crt-overlay

download .zip 2 kb

the scanlines and slow glow over every page here, with a switch that gets remembered.

it's on right now. flip it.

<link rel="stylesheet" href="crt.css">
<script src="crt.js" defer></script>

<button type="button" data-crt-toggle>crt: on</button>

$ ./boot-screen

download .zip 2 kb

the boot log from the home page. once per visit, any key skips it, and it never runs with reduced motion on.

<link rel="stylesheet" href="boot-screen.css">
<script src="boot-screen.js"></script>
<script>bootScreen({ lines: ['bios v1.0', 'memory ...... 640k ok', 'starting'] });</script>

the zip has a one-line <head> snippet that stops the page flashing first.

$ ./patterns

download .zip 2 kb

the tiles, dividers and little icons this site is made of. plain css and svg.

scanlines

dots

grid

hazard

segments

click one to save it

<link rel="stylesheet" href="patterns.css">

<div class="tile-hazard" style="height:40px"></div>
<hr class="divider-dotted">

tiles: .tile-scanlines .tile-dots .tile-grid .tile-hazard .tile-segments. dividers: .divider-dotted .divider-hazard .divider-segments .divider-terminal.

$ ./honeycomb-stamps

download .zip 28 kb

the tool stamps from the home page, made on mooeena's honeycomb frame. the frame is theirs and so is the photoshop stamp, so these need a credit: link their page wherever you use them. logos belong to their projects.

<img src="ghidra.png" width="64" height="56" alt="ghidra">

click one to save it. mooeena's page has the html for interlocking layouts.

$ ./88x31

link back to cmkat.com with the button. it's the one file you're welcome to hotlink.

gif · png

<a href="https://cmkat.com/"><img src="https://cmkat.com/assets/img/cmkat-88x31.gif" width="88" height="31" alt="cmkat"></a>

$ ./shoutbox

download .zip 7 kb

the short-message board from the home page. includes the frontend, cloudflare backend and setup instructions.

see it on ~/home

160 characters, separate kv storage, spam checks and optional turnstile.

$ ./guestbook

download .zip 7 kb

the backend behind ./guestbook: one cloudflare pages function and a kv namespace. no database, no third-party embed.

a hidden honeypot field and a minimum time on the page
no links, length and line limits
one post a minute and five a day per visitor, with ips hashed and never stored
no exact repeats, optional turnstile, an admin delete
entries are always shown as text, never html

setup is in the readme.

$ ./404-page

download .zip 1 kb

the terminal-style not-found page, in one file. it prints the path the visitor tried.

see it: ~/404

edit the prompt and the ls list, then save it as 404.html in your site's root.