` (a name, not a sentence), a meta description, `og:title`, `og:description` and `og:image` (`../../thumbs/<slug>.webp`), `theme-color`. - Visible focus states, full keyboard use, sensible tab order, `aria-label`s on icon buttons, alt text on images. - A `prefers-reduced-motion: reduce` path that still looks finished (not just "animations off"). - Works at 390 px wide with no sideways scroll, and at 1440 px and wider without looking stretched. - Loading, empty and error states are designed, not default. If a browser lacks a feature (WebGPU, WebGL2, audio), show a designed fallback that explains why. - Audio never starts on its own; there is always a mute control. - A credits footer that names the tool, links its repo, and credits any third-party code, fonts or images. ## Stay self-contained - One folder per showcase: `index.html` plus small local assets. No build step. It must work on GitHub Pages, and from `file://` where the browser allows it. - Libraries come from a CDN at exact pinned versions (jsDelivr or esm.sh, through an import map for ES modules). Never `@latest`, never an unpinned major. - Keep your own JavaScript inline in `index.html` (or in classic scripts), so the page also opens from disk. - Page weight under about 1.5 MB, not counting CDN libraries. Cap the device pixel ratio for canvases, pause render loops when the tab is hidden or the canvas is off screen. - Load the shared corner label with `<script src="../../shared/tag.js" data-no="NN" data-slug="NN-slug" data-tool="Tool name" defer></script>` and set `--tag-ink`, `--tag-paper` and `--tag-line` on `:root` so it matches the page. Pick the corner (`data-position`) where it covers nothing important. ## Check your own work - Look at the page in a real browser at 1440×900 and 390×844, in light and dark if the page has both, and with reduced motion. Look at the screenshots, fix what looks off, and repeat. - Zero console errors and zero failed requests.

# House rules Every showcase in this repo was built against these rules, on top of its own brief. They are part of the prompt. ## Be original - Every subject, place, company and person on the page is fictional. No real brands, logos or products, and no copying of the tool's own demo site, examples, layouts or copy. The tool is the medium, not the subject. - Each site should look like a different studio made it: its own type pairing from Google Fonts, its own palette and its own layout structure. - Don't use Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins or Space Grotesk as the main face. No purple-to-blue gradients, no gradient text, no glassmorphism cards by default, no "three identical feature cards" row, no emoji as icons. - Write real copy in a consistent voice. No lorem ipsum, no "Unlock the power of". ## Sweat the small things - Inline SVG favicon, a real `` (a name, not a sentence), a meta description, `og:title`, `og:description` and `og:image` (`../../thumbs/<slug>.webp`), `theme-color`. - Visible focus states, full keyboard use, sensible tab order, `aria-label`s on icon buttons, alt text on images. - A `prefers-reduced-motion: reduce` path that still looks finished (not just "animations off"). - Works at 390 px wide with no sideways scroll, and at 1440 px and wider without looking stretched. - Loading, empty and error states are designed, not default. If a browser lacks a feature (WebGPU, WebGL2, audio), show a designed fallback that explains why. - Audio never starts on its own; there is always a mute control. - A credits footer that names the tool, links its repo, and credits any third-party code, fonts or images. ## Stay self-contained - One folder per showcase: `index.html` plus small local assets. No build step. It must work on GitHub Pages, and from `file://` where the browser allows it. - Libraries come from a CDN at exact pinned versions (jsDelivr or esm.sh, through an import map for ES modules). Never `@latest`, never an unpinned major. - Keep your own JavaScript inline in `index.html` (or in classic scripts), so the page also opens from disk. - Page weight under about 1.5 MB, not counting CDN libraries. Cap the device pixel ratio for canvases, pause render loops when the tab is hidden or the canvas is off screen. - Load the shared corner label with `<script src="../../shared/tag.js" data-no="NN" data-slug="NN-slug" data-tool="Tool name" defer></script>` and set `--tag-ink`, `--tag-paper` and `--tag-line` on `:root` so it matches the page. Pick the corner (`data-position`) where it covers nothing important. ## Check your own work - Look at the page in a real browser at 1440×900 and 390×844, in light and dark if the page has both, and with reduced motion. Look at the screenshots, fix what looks off, and repeat. - Zero console errors and zero failed requests.