tiny-consoles

Small design experiments, collected over time. Each one is a Web Component you can drop into any page with a single tag.

Open the live gallery →

Stories

Pieces that start from a film, a book or a record.

Imagined places

Things made for places that do not exist: a label, a station, an office.

Studies

Small experiments that stand on their own.

Use a piece

Two lines: the script, then the tag. Swap pliocene-coast for any piece above.

<script type="module" src="https://nonsenseblue.github.io/tiny-consoles/components/pliocene-coast/src/pliocene-coast.js"></script>
<pliocene-coast></pliocene-coast>

With React

Every piece also comes as a typed React component that renders the same Web Component.

npm install github:nonsenseblue/tiny-consoles

import { SoftGrain, DeepSpace, SoundingsBoard, RerunBoard, LostAndFound, DayForNight, MaKasuri, PlioceneCoast } from 'tiny-consoles/react';

export default function Page() {
  return <PlioceneCoast style={{ maxWidth: 1200 }} />;
}

Sources are in react/src/. Each component loads its piece in the browser only, so server rendering is safe. Tested with Vite, TypeScript and React 19.

How it is built

• No dependencies, no build step. Each piece loads the stylesheet next to it from its own URL, so the one-line embed works anywhere.
• Isolated. Styles live inside Shadow DOM; nothing leaks in or out.
• Sized by its container, not the page, so it fits wherever it is placed.
• Calm by default. Motion stops when prefers-reduced-motion is set.
• One folder per piece. Add a folder and one entry in pieces.json, and the gallery builds itself.

components/<tag>/
  DESIGN.md            design notes, tokens and influences
  src/<tag>.js         the Web Component
  src/<tag>.css        its styles
  assets/thumb.webp    the small still in the gallery and here
  assets/preview.webp  the full preview image

components/shared/
  piece.js             starting a piece: faces, stylesheet, nothing shown unstyled
  zoom.js              the full size view, with Prev, Replay, Next and notes

License

Code: MIT. Visual designs and images: CC BY 4.0, please credit nonsenseblue.