Ribbit
Convierte cualquier semilla en arte generativo determinista sobre un canvas. Entra un string, sale siempre la misma marca. Cero dependencias, con adaptadores de React y Svelte.
Un id de usuario, un hash de commit, un nombre: cualquier cosa que sea un string puede ser una imagen. Ribbit convierte la semilla en un uint32, la pasa por un campo determinista y pinta uno de seis patrones en un canvas. Misma semilla, mismos píxeles, en cualquier máquina, siempre. Sin red, sin estado, sin dependencias en runtime.
El uso obvio son avatares que no hace falta almacenar. El menos obvio son imágenes OG, arte de relleno y marcas por entidad en un panel.
Una semilla, seis patrones. Pasa el cursor por encima de cualquiera: las celdas se encienden alrededor del puntero, y la marca en reposo es exactamente lo que devuelve la exportación estática.
Cómo se usa#
npm i ribbit-canvasimport { render, toDataURL } from "ribbit-canvas";
render(canvas, "null-frog", { pattern: "dither", palette: "moss" });
const png = toDataURL("null-frog", { preset: "avatar" });import { RibbitAvatar } from "ribbit-canvas/react";
<RibbitAvatar seed={user.id} size={40} />;El adaptador de Svelte es el mismo componente en ribbit-canvas/svelte. Los dos se pausan fuera de pantalla y respetan prefers-reduced-motion.
Qué trae#
| Pieza | Qué hace |
|---|---|
render(target, seed, options) | Pinta sobre un canvas o un contexto 2D |
toDataURL / toBlob | Exporta PNG, con presets og y avatar |
toSVG | Devuelve un SVG suelto, sin canvas de por medio |
toWebM | Graba la variante animada |
renderReactive | La marca reacciona al cursor |
field(seed) | El campo determinista en crudo, por si prefieres pintarlo tú |
Seis patrones (dither, glyph, pulse, maze, bars, wave) y cuatro paletas (moss, tide, ember, mono), cada una con su variante clara. Una paleta es solo { background, ramp }, así que traer la tuya es un literal.
Cómo está montado#
Monorepo: packages/ribbit es el paquete publicado y apps/site son los docs más un playground donde escribes una semilla y ves cómo se resuelve. Bun para el toolchain, Biome para lint y formato, MIT.
Se usa en esta web#
Todas las tarjetas sociales de sn4pe.com son una de estas. toSVG no necesita canvas, así que corre en el servidor: cada página genera un campo a partir de su propio título y ese campo es el fondo sobre el que se compone la tarjeta. Sin imágenes almacenadas, sin pipeline de assets, y dos posts no pueden coincidir nunca.