{ "schemaVersion": 1, "version": "0.1.1", "cdn": { "css": "https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/retrostrap.min.css", "js": "https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/retrostrap.min.js", "patterns": "https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/retrostrap-patterns.css", "theme": "https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/themes/{name}.css" }, "laws": { "version": 1, "palette": { "law": "Only the 216 web-safe colors plus the 16 classic named colors. UI colors are opaque.", "colors": [ "#000000", "#000033", "#000066", "#000099", "#0000CC", "#0000FF", "#003300", "#003333", "#003366", "#003399", "#0033CC", "#0033FF", "#006600", "#006633", "#006666", "#006699", "#0066CC", "#0066FF", "#009900", "#009933", "#009966", "#009999", "#0099CC", "#0099FF", "#00CC00", "#00CC33", "#00CC66", "#00CC99", "#00CCCC", "#00CCFF", "#00FF00", "#00FF33", "#00FF66", "#00FF99", "#00FFCC", "#00FFFF", "#330000", "#330033", "#330066", "#330099", "#3300CC", "#3300FF", "#333300", "#333333", "#333366", "#333399", "#3333CC", "#3333FF", "#336600", "#336633", "#336666", "#336699", "#3366CC", "#3366FF", "#339900", "#339933", "#339966", "#339999", "#3399CC", "#3399FF", "#33CC00", "#33CC33", "#33CC66", "#33CC99", "#33CCCC", "#33CCFF", "#33FF00", "#33FF33", "#33FF66", "#33FF99", "#33FFCC", "#33FFFF", "#660000", "#660033", "#660066", "#660099", "#6600CC", "#6600FF", "#663300", "#663333", "#663366", "#663399", "#6633CC", "#6633FF", "#666600", "#666633", "#666666", "#666699", "#6666CC", "#6666FF", "#669900", "#669933", "#669966", "#669999", "#6699CC", "#6699FF", "#66CC00", "#66CC33", "#66CC66", "#66CC99", "#66CCCC", "#66CCFF", "#66FF00", "#66FF33", "#66FF66", "#66FF99", "#66FFCC", "#66FFFF", "#990000", "#990033", "#990066", "#990099", "#9900CC", "#9900FF", "#993300", "#993333", "#993366", "#993399", "#9933CC", "#9933FF", "#996600", "#996633", "#996666", "#996699", "#9966CC", "#9966FF", "#999900", "#999933", "#999966", "#999999", "#9999CC", "#9999FF", "#99CC00", "#99CC33", "#99CC66", "#99CC99", "#99CCCC", "#99CCFF", "#99FF00", "#99FF33", "#99FF66", "#99FF99", "#99FFCC", "#99FFFF", "#CC0000", "#CC0033", "#CC0066", "#CC0099", "#CC00CC", "#CC00FF", "#CC3300", "#CC3333", "#CC3366", "#CC3399", "#CC33CC", "#CC33FF", "#CC6600", "#CC6633", "#CC6666", "#CC6699", "#CC66CC", "#CC66FF", "#CC9900", "#CC9933", "#CC9966", "#CC9999", "#CC99CC", "#CC99FF", "#CCCC00", "#CCCC33", "#CCCC66", "#CCCC99", "#CCCCCC", "#CCCCFF", "#CCFF00", "#CCFF33", "#CCFF66", "#CCFF99", "#CCFFCC", "#CCFFFF", "#FF0000", "#FF0033", "#FF0066", "#FF0099", "#FF00CC", "#FF00FF", "#FF3300", "#FF3333", "#FF3366", "#FF3399", "#FF33CC", "#FF33FF", "#FF6600", "#FF6633", "#FF6666", "#FF6699", "#FF66CC", "#FF66FF", "#FF9900", "#FF9933", "#FF9966", "#FF9999", "#FF99CC", "#FF99FF", "#FFCC00", "#FFCC33", "#FFCC66", "#FFCC99", "#FFCCCC", "#FFCCFF", "#FFFF00", "#FFFF33", "#FFFF66", "#FFFF99", "#FFFFCC", "#FFFFFF", "#C0C0C0", "#808080", "#800000", "#800080", "#008000", "#808000", "#000080", "#008080" ] }, "fonts": { "law": "Nine sanctioned era font stacks; no @font-face in core.", "stacks": { "serif": "\"Times New Roman\", Times, serif", "sans": "Verdana, Geneva, \"DejaVu Sans\", sans-serif", "narrow": "Tahoma, \"Segoe UI\", Geneva, sans-serif", "arial": "Arial, Helvetica, sans-serif", "comic": "\"Comic Sans MS\", \"Comic Neue\", \"Chalkboard SE\", cursive", "mono": "\"Courier New\", Courier, monospace", "display": "Impact, \"Arial Black\", Haettenschweiler, sans-serif", "fancy": "Georgia, \"Times New Roman\", serif", "trebuchet": "\"Trebuchet MS\", Tahoma, sans-serif" }, "sizesPx": [ 10, 13, 16, 18, 24, 32, 48 ] }, "shape": { "law": "border-radius is 0 everywhere; shadows have 0 blur. Rounding only via border-image pixel assets.", "borderRadius": 0, "shadowBlur": 0 }, "motion": { "law": "Only linear and steps() easing. Everything honors prefers-reduced-motion.", "easing": [ "linear", "steps", "step-start", "step-end" ], "blinkHz": 1, "marqueeSpeedsPxPerSec": [ 30, 60, 120 ], "maxFlashesPerSecond": 3 }, "decency": { "law": "No autoplaying audio, no tracking, no external network calls from shipped code, progressive enhancement.", "autoplayAudio": false, "tracking": false, "externalRequests": false }, "breakpointsPx": { "vga": 640, "svga": 800, "xga": 1024, "sxga": 1280 } }, "prompt": "You are building a web page with retrostrap v0.1.1, a framework that\nmakes pages look like the 1996-2003 web while staying responsive and\naccessible.\n\nHard rules, violating any of these breaks the page's era-fidelity:\n1. Use only documented rs- classes for UI. Do not write custom CSS unless\n asked; if you must, obey: colors from the 216 web-safe + 16 named set\n only; border-radius 0; shadows with 0 blur; easing only linear or\n steps(); fonts only via --rs-font-* tokens.\n2. Structure: gets the theme tile; wrap content in\n
. Pick ONE layout recipe\n (rs-layout--sidebar-left, --holy-grail, rs-frames…). Real landmarks:\n header, nav, main, footer. Headings h1-h6 in order.\n3. Pick ONE theme via data-rs-theme on . Do not mix theme files.\n4. Widgets (the Toybox): at most TWO decorative widgets per page,\n declared via data-rs-widgets=\"…\" on any element, with their\n data-rs--
" }, { "id": "konami", "kind": "widget", "label": "Konami code", "summary": "The cheat code, and a 30-second party mode.", "era": "Up up down down left right left right B A: the most-typed secret on Earth.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [], "options": [ { "name": "href", "type": "url", "note": "navigate to a secret page on the code, instead of party mode" }, { "name": "words", "type": "string", "note": "comma-separated secret words that also trigger the egg when typed" } ], "events": [], "a11y": "Loading the widget adds Retrostrap.konami.on(seq, fn) and .trigger(). Party mode composes only non-flashing widgets and stays in budget; under reduced motion it declines with a small note. A ten-tap gesture is the touch alternative.", "assets": [], "tags": [ "decoration", "easter-egg", "toybox" ], "snippet": "\n" }, { "id": "kugeln", "kind": "widget", "label": "Kugeln", "summary": "Shiny 3D spheres that trail or orbit your pointer, in a rainbow of colours.", "era": "The spinning-ball DHTML cursor toys of around 2000, coloured orbs that chased the mouse across a homepage.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "fine", "classes": [], "options": [ { "name": "colors", "type": "enum", "values": [ "rainbow", "red", "gold", "green", "cyan", "blue", "purple", "pink", "silver" ], "default": "rainbow" }, { "name": "count", "type": "int", "default": 7, "note": "max 12" }, { "name": "size", "type": "px", "default": 20, "note": "8-32" }, { "name": "mode", "type": "enum", "values": [ "trail", "orbit" ], "default": "trail" } ], "events": [], "a11y": "Decoration: the layer is aria-hidden and pointer-events:none. Never spawns under prefers-reduced-motion, and no-ops on touch.", "assets": [ "kugeln-red", "kugeln-gold", "kugeln-green", "kugeln-cyan", "kugeln-blue", "kugeln-purple", "kugeln-pink", "kugeln-silver" ], "tags": [ "decoration", "pointer", "toybox" ], "snippet": "\n\n" }, { "id": "last-updated", "kind": "widget", "label": "Last updated", "summary": "Prints the document's last-modified date, era-style.", "era": "\"Last updated: 04/17/1998\", the proudest line on any homepage.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "informative", "pointer": "any", "classes": [ { "name": "rs-last-updated", "role": "applied to the host" } ], "options": [ { "name": "prefix", "type": "string", "default": "Last updated:" }, { "name": "date", "type": "string", "note": "pin this date verbatim instead of the file's last-modified time" }, { "name": "format", "type": "enum", "values": [ "long", "short" ], "default": "long" }, { "name": "locale", "type": "string", "note": "defaults to the page lang" } ], "events": [], "a11y": "Static text; nothing to rule on. Hides itself if the browser reports a garbage date.", "assets": [], "tags": [ "informative", "toybox" ], "snippet": "

" }, { "id": "neko", "kind": "widget", "label": "Neko (Gif the cat)", "summary": "A pixel cat that chases your cursor, patrols an element edge, or dozes.", "era": "The desktop-cat lineage (Neko/oneko), on the web since the late 90s. Gif is our own, drawn from a blank grid.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [ { "name": "rs-neko", "role": "the cat sprite the widget creates" } ], "options": [ { "name": "skin", "type": "enum", "values": [ "gif", "calico", "void" ], "default": "gif" }, { "name": "behavior", "type": "enum", "values": [ "chase", "patrol", "sleepy" ], "default": "chase" }, { "name": "target", "type": "selector", "note": "the element to patrol the top edge of" }, { "name": "speed", "type": "enum", "values": [ "slow", "normal", "fast" ], "default": "normal" }, { "name": "src", "type": "string", "note": "override the sprite sheet URL (defaults to the skin's)" } ], "events": [ "rs:neko:sleep", "rs:neko:wake" ], "a11y": "Decoration: aria-hidden, pointer-events:none. Under prefers-reduced-motion the cat stays, sitting still. Chase falls back to patrol on touch. Two cats per page, maximum.", "assets": [ "neko-gif", "neko-calico", "neko-void" ], "tags": [ "decoration", "mascot", "toybox" ], "snippet": "\n" }, { "id": "pixel-pet", "kind": "widget", "label": "Pixel pet", "summary": "A little desktop pet in the corner that you feed, and that remembers you between visits.", "era": "The virtual pets of the early-2000s web, a creature that lived in the corner of your page.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "informative", "pointer": "any", "classes": [], "options": [ { "name": "name", "type": "string", "default": "Blobby" }, { "name": "color", "type": "enum", "values": [ "green", "blue", "pink", "gold" ], "default": "green" }, { "name": "pace", "type": "int", "note": "seconds until fully hungry; default 300" } ], "events": [ "rs:pixel-pet:fed", "rs:pixel-pet:gold" ], "a11y": "The pet is a labelled button you can feed with the keyboard; its mood is shown as text. State persists in localStorage. Appears (static) under prefers-reduced-motion.", "assets": [ "pixel-pet-green", "pixel-pet-blue", "pixel-pet-pink", "pixel-pet-gold" ], "tags": [ "companion", "toybox", "localstorage" ], "snippet": "\n\n" }, { "id": "smilies", "kind": "widget", "label": "Smilies", "summary": "Turns :) and friends into pixel emoticons.", "era": "The forum smiley pack, type the code, see the face, running since the phpBB age.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "informative", "pointer": "any", "classes": [ { "name": "rs-smiley", "role": "each emoticon image the parser inserts" } ], "options": [ { "name": "scope", "type": "selector", "note": "the subtree to parse; defaults to the host" }, { "name": "src", "type": "string", "note": "override the smilies pack image URL (same-origin)" } ], "events": [], "a11y": "Each image's alt is the original typed code, so copy-paste and screen readers round-trip. The parser skips code, kbd, inputs, and any [data-rs-no-smilies] region.", "assets": [ "smilies" ], "tags": [ "informative", "text", "toybox" ], "snippet": "\n
Welcome!! :) Sign my guestbook ;)
" }, { "id": "snowfall", "kind": "widget", "label": "Snowfall", "summary": "Falling snow (or hearts, or confetti) on a canvas.", "era": "The JavaScript snow script every winter homepage installed in December.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [ { "name": "rs-snowfall", "role": "the canvas overlay the widget creates" } ], "options": [ { "name": "density", "type": "enum", "values": [ "light", "normal", "blizzard" ], "default": "normal", "note": "or a number, capped at 100" }, { "name": "glyph", "type": "enum", "values": [ "star", "heart", "leaf", "confetti" ], "note": "default is a pixel flake" }, { "name": "speed", "type": "enum", "values": [ "slow", "normal", "fast" ], "default": "normal" }, { "name": "wind", "type": "number", "default": 0, "note": "-2 to 2" }, { "name": "melt", "type": "bool", "default": true } ], "events": [], "a11y": "Decoration: canvas is aria-hidden, pointer-events:none. Never mounts under prefers-reduced-motion; the shared loop pauses when the tab is hidden.", "assets": [], "tags": [ "decoration", "canvas", "seasonal", "toybox" ], "snippet": "" }, { "id": "sparkle", "kind": "widget", "label": "Sparkle", "summary": "Twinkles at the pointer, or ambient glitter on a zone.", "era": "The glitter-graphics and sparkle-trail scene of the kawaii and shrine pages.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [], "options": [ { "name": "mode", "type": "enum", "values": [ "pointer", "ambient", "both" ], "default": "pointer" }, { "name": "trigger", "type": "enum", "values": [ "move", "click" ], "default": "move" }, { "name": "palette", "type": "enum", "values": [ "gold", "ice", "rainbow", "theme" ], "default": "theme" }, { "name": "color", "type": "color", "note": "one legal color; overrides palette" }, { "name": "zone", "type": "selector", "note": "ambient area; defaults to the host" } ], "events": [], "a11y": "Decoration: aria-hidden, pointer-events:none, silent under prefers-reduced-motion.", "assets": [], "tags": [ "decoration", "toybox" ], "snippet": "" }, { "id": "starfield", "kind": "widget", "label": "Starfield", "summary": "Warp-speed stars on a canvas.", "era": "The flying-through-space screensaver, reborn as a page background.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [ { "name": "rs-starfield", "role": "the canvas overlay the widget creates" } ], "options": [ { "name": "density", "type": "enum", "values": [ "sparse", "normal", "dense" ], "default": "normal", "note": "or a number, capped at 200" }, { "name": "speed", "type": "enum", "values": [ "slow", "normal", "fast" ], "default": "normal" }, { "name": "layers", "type": "int", "default": 2, "note": "1 to 3 parallax layers" } ], "events": [], "a11y": "Decoration: aria-hidden, pointer-events:none. Under prefers-reduced-motion it becomes a still sprinkle of stars, the look without the flight.", "assets": [], "tags": [ "decoration", "canvas", "toybox" ], "snippet": "" }, { "id": "ticker", "kind": "widget", "label": "Ticker", "summary": "A scrolling status-bar text ticker.", "era": "The window.status scrollers that welcomed you to a thousand homepages.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "informative", "pointer": "any", "classes": [ { "name": "rs-ticker", "role": "applied to the host while it scrolls" } ], "options": [ { "name": "messages", "type": "json-array", "note": "the lines to scroll" }, { "name": "source", "type": "selector", "note": "read
  • s from this element instead" }, { "name": "speed", "type": "enum", "values": [ "slow", "normal", "fast" ], "default": "normal" }, { "name": "dock", "type": "enum", "values": [ "bottom", "none" ], "default": "none" }, { "name": "separator", "type": "string", "default": "+++" } ], "events": [], "a11y": "Informative: the messages are ordinary readable text (never aria-live). Pauses on hover and focus. Under prefers-reduced-motion it swaps the message every 5s instead of scrolling.", "assets": [], "tags": [ "informative", "toybox" ], "snippet": "

    " }, { "id": "transitions", "kind": "widget", "label": "Page transitions", "summary": "Page-to-page wipes via the View Transitions API.", "era": "The PowerPoint-meets-Internet-Explorer scene change, tamed.", "since": "0.1.0", "stability": "experimental", "requiresJs": true, "jsEnhancer": null, "motion": "decorative", "pointer": "any", "classes": [], "options": [ { "name": "style", "type": "enum", "values": [ "wipe", "box-in", "box-out", "dissolve", "checker" ], "default": "wipe" } ], "events": [], "a11y": "Pure progressive enhancement: where the API is unsupported, navigation is instant and unbroken. The API honors reduced motion on its own; the widget also skips under it.", "assets": [], "tags": [ "decoration", "navigation", "toybox" ], "snippet": "" }, { "id": "webring", "kind": "widget", "label": "Webring", "summary": "Fills an rs-webring-bar from a ring's JSON, computing prev/random/next.", "era": "Sites holding hands in a circle, curated by a ringmaster.", "since": "0.1.0", "stability": "stable", "requiresJs": true, "jsEnhancer": null, "motion": "informative", "pointer": "any", "classes": [ { "name": "rs-webring-bar", "role": "the host the widget fills with links" } ], "options": [ { "name": "src", "type": "url", "note": "the ring JSON; or an inline