made by a human (and some gremlins) • drag things • drop stickers • fling blobs • leave a note • made by a human (and some gremlins) • drag things • drop stickers • fling blobs • leave a note •
Sticker Palette
Click a sticker, then drag it around. Layout auto-saves.
About

Welcome to the tiny toyroom. It’s scrappy on purpose. Handmade edges. A little crunchy, a little shiny.

  • drag windows by the top bar
  • stick stuff on the desk
  • throw the blobs around
  • leave a note in the guestbook

Tip: toggle theme + accent to match your mood.

Toybox (bouncy blobs)
Drag or fling blobs. They bonk around.
Guestbook (local)
    :root { --bg: #fff8f2; --ink: #1b1b1b; --muted: #6b6b6b; --accent: #ff7aa2; --accent-2: #5ad1ff; --window: #fffaf6; --shadow: rgba(0,0,0,0.12); --grain: rgba(0,0,0,0.06); } html[data-theme="midnight"] { --bg: #0c0b11; --ink: #eae7ff; --muted: #bdb8d9; --accent: #9aff5a; --accent-2: #ff6bd4; --window: #12101a; --shadow: rgba(0,0,0,0.45); --grain: rgba(255,255,255,0.05); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; color: var(--ink); background: radial-gradient(1000px 500px at 20% -10%, var(--accent)/0.25, transparent 60%), radial-gradient(900px 500px at 120% 10%, var(--accent-2)/0.25, transparent 60%), linear-gradient(180deg, var(--bg), var(--bg)); font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow: hidden; } .topbar { position: fixed; inset: 0 0 auto 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px dashed color-mix(in oklab, var(--ink) 15%, transparent); z-index: 50; } .logo { font-family: "Chicle", system-ui; letter-spacing: 1px; font-size: 20px; background: linear-gradient(90deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .controls { display: flex; gap: 8px; align-items: center; } .controls .pill, .controls button { border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: var(--window); color: var(--ink); padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 16px var(--shadow); text-decoration: none; font-weight: 700; cursor: pointer; } .controls button:hover, .controls .pill:hover { transform: translateY(-1px); } .marquee { position: fixed; top: 54px; left: 0; right: 0; height: 28px; overflow: hidden; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent); background: color-mix(in oklab, var(--bg) 80%, transparent); z-index: 40; } .marquee .track { display: flex; gap: 32px; white-space: nowrap; animation: scroll 28s linear infinite; color: var(--muted); font-size: 12px; padding: 6px 0; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } #desk { position: absolute; inset: 82px 0 0 0; background-image: radial-gradient(2px 2px at 20% 30%, var(--grain), transparent 60%), radial-gradient(2px 1.5px at 70% 60%, var(--grain), transparent 60%); background-size: 300px 300px, 260px 260px; overflow: hidden; } /* Windows */ .window { position: absolute; width: clamp(260px, 38vw, 560px); background: var(--window); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); transform: rotate(calc(var(--tilt, 0) * 1deg)); } .win-titlebar { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 2px solid var(--ink); background: linear-gradient(0deg, color-mix(in oklab, var(--accent) 20%, transparent), transparent), linear-gradient(90deg, var(--window), color-mix(in oklab, var(--accent-2) 10%, var(--window))); border-radius: 10px 10px 0 0; cursor: grab; user-select: none; } .win-titlebar:active { cursor: grabbing; } .dots span { display:inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; background: var(--ink); } .title { font-weight: 800; letter-spacing: .3px; } .actions button { border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); background: color-mix(in oklab, var(--window) 80%, var(--accent) 20%); border-radius: 6px; padding: 2px 6px; cursor: pointer; margin-left: 6px; } .actions .close { background: color-mix(in oklab, #ff5c5c 40%, var(--window)); } .win-body { padding: 12px; } /* Palette */ .palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 8px; } .sticker-button { aspect-ratio: 1; border-radius: 10px; font-size: 20px; border: 2px dashed var(--ink); background: color-mix(in oklab, var(--window) 75%, var(--st) 25%); cursor: pointer; box-shadow: 0 4px 12px var(--shadow); } .hint { color: var(--muted); font-size: 12px; margin-top: 4px; } .tools { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tools button { border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: var(--window); border-radius: 8px; padding: 6px 10px; cursor: pointer; } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .polaroid { background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 8px 8px 18px; box-shadow: 0 10px 20px var(--shadow); transform: rotate(var(--rot)); } .polaroid img { width: 100%; height: 140px; object-fit: cover; display:block; border-radius: 4px; border:1px solid var(--ink); } .polaroid .cap { margin-top: 6px; font-size: 12px; text-align:center; color: #333; } /* Blobs toy */ .blob-canvas { position: relative; height: 220px; border: 2px dashed var(--ink); border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--accent) 8%, transparent); } .blob { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: var(--c, #f0f); box-shadow: inset -6px -10px 18px rgba(0,0,0,0.18), 0 6px 16px var(--shadow); border: 2px solid var(--ink); cursor: grab; touch-action: none; } /* Guestbook */ .guestbook-form { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .guestbook-form textarea { grid-column: 1 / -1; min-height: 60px; resize: vertical; } .guestbook-form input, .guestbook-form textarea { border: 2px solid var(--ink); background: var(--window); border-radius: 8px; padding: 8px; color: var(--ink); } .guestbook-form button { grid-column: 2 / -1; justify-self: end; border: 2px solid var(--ink); background: var(--accent); color: #000; border-radius: 8px; padding: 8px 12px; font-weight: 800; cursor: pointer; } .guestbook-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 180px; overflow: auto; } .guestbook-list li { border: 2px solid var(--ink); background: #fff; border-radius: 8px; padding: 8px; display:flex; align-items: flex-start; gap: 8px; } .guest-tag { font-weight: 800; } .links { padding-left: 1rem; } /* Stickers on desk */ .sticker { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); filter: drop-shadow(0 8px 16px var(--shadow)); cursor: grab; touch-action: none; } .sticker svg { width: var(--sz, 64px); height: var(--sz, 64px); } .sticker .fill { fill: var(--fill, #ffd166); } .sticker.selected { outline: 2px dashed var(--ink); outline-offset: 4px; } /* CRT scanlines overlay */ .scanlines { pointer-events: none; position: fixed; inset: 0; z-index: 5; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.06) 0, rgba(0,0,0,.06) 1px, transparent 2px, transparent 3px); mix-blend-mode: multiply; opacity: .25; } /* Responsiveness */ @media (max-width: 880px) { body { overflow: auto; } #desk { position: relative; inset: 82px 0 0 0; min-height: calc(100vh - 82px); overflow: visible; padding: 12px; } .window { position: relative; width: 100%; left: 0 !important; top: 0 !important; margin-bottom: 14px; } .win-titlebar { cursor: default; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } } .small { color: var(--muted); font-size: 12px; } /* Fun tilt */ .window { --tilt: calc((var(--rand, 0.5) - 0.5) * 2); }