mirabilia

A cabinet of curiosities — crafted web animations, published as a collection. Each animation is its own subpath export.

Bentris

A bento-tetris layout: it shapes groups of sized items into compact polyomino ("Tetris") pieces, packs them into a tight near-rectangular board, and renders them as an interactive React component (hover lights a category, click pins focus, tiles fade in on scroll).

React component

import { Bentris } from 'mirabilia/bentris'
import type { BentoCategory } from 'mirabilia/bentris'
import 'mirabilia/bentris/styles.css'

const categories: BentoCategory[] = [
  { id: 'lang', name: 'Languages', accent: '#FCD34D', key: 'L',
    items: [{ label: 'Python', hot: true, size: 'big' }, { label: 'Rust' }, { label: 'SQL' }] },
  { id: 'ml', name: 'AI / ML', accent: '#2DD4BF', key: 'A',
    items: [{ label: 'PyTorch', hot: true, size: 'big' }, { label: 'NumPy' }, { label: 'CUDA' }] },
]

export default () => <Bentris categories={categories} />

Batteries included, all overridable:

• renderIcon={(item) => ...} — supply your own visuals. Default: a bundled brand icon (via simple-icons), or a neutral concept glyph.
• slots={{ id: { gridColumn, gridRow, node } }} — drop content (e.g. the bundled ArcadeSnake / ArcadePacman) into board cells.
• mode="template" + template={[...]} — hand-author the layout instead of auto-packing.
• interactive, showStatus, showHint, maxWidth, onActiveCategory, onFocusCategory.

Theme via CSS variables (--bentris-tile, --bentris-gap, --bentris-bg, --bentris-text, …); per-category color comes from each category's accent. Respects prefers-reduced-motion.

Pure engine (framework-agnostic)

import { solveLayout, authoredLayout } from 'mirabilia/bentris'

const board = solveLayout(categories)
// board.tiles → [{ item, catId, catName, accent, col, row, w, h }]

solveLayout / authoredLayout are dependency-free and have no React requirement — use them to drive any renderer.

Install

npm i mirabilia        # peers: react, react-dom (>=18)

Develop

pnpm install
pnpm test        # vitest: engine invariants + component render
pnpm build       # tsup → ESM + CJS + types + css
pnpm play        # vite playground for visual work
pnpm typecheck

See docs/ for the design spec and implementation plans.

License

MIT © Muhammad Moiz