🍱 Bentobox

A bento grid generator — compose Apple-style bento layouts (differently sized cards in one compact composition) and export them as an image.

pnpm install
pnpm dev

How it works

• src/bento/BentoCanvas.tsx is the single source of truth for the board. The same React tree is mounted in the DOM for the live preview and handed to Takumi for export, so what you see is what you get. Everything is inline styles — no stylesheet to keep in sync between the browser and the Rust layout engine.
• src/bento/render.tsx runs Takumi's WebAssembly build in the browser: JSX in, encoded PNG / WebP / SVG bytes out. No canvas snapshotting, no headless browser, no server.
• src/bento/presets.ts holds the starter templates and canvas sizes, src/bento/themes.ts the palettes.

Liquid glass

Cards are made of glass by default. Not a translucent fill and a blur — the real thing: the board's backdrop is rendered to raw pixels, and every card's rect is refracted through a slab of glass before the text goes on top. A circular-arc height profile over the card's own rounded-rect outline, Snell refraction through the surface normal, chromatic aberration, and rim lighting tinted by whatever is behind it.

src/bento/liquid-glass.ts is a port of the CPU pass from Takumi's example/liquid-glass, which ports its own WGSL shader, which ports flutter_liquid_glass. It is plain per-pixel arithmetic, so it runs in the browser with no WebGPU — and because every card is refracted in one pass over the backdrop, a board costs about as much as a single pane.

Switch a board back to flat fills with Material → Solid in the Style tab, or material: solid in the Markdown frontmatter.

Notes

• PNG and WebP export at devicePixelRatio: 2; SVG is real vector output.
• Text renders in Geist, which Takumi ships built in — no font fetch on export.
• Card icons come from a fixed emoji set verified to rasterize through Takumi's emoji provider (ICON_CHOICES in src/bento/types.ts).