trama-ui 0.1.0

package/dist/lib/ui/card-fields.js

@@ -0,0 +1,193 @@
+/**
+ * Campos de caracteres procedurales para el fondo de `AsciiCard`: ligeros (un canvas 2D con ~1.000 celdas, sin
+ * motor externo) para poder tener varias tarjetas animadas en la misma página. Cada campo es una función
+ * `(u, v, t, seed) → 0..1` que se traduce a un carácter de una rampa y a una opacidad; unos pocos (laberinto,
+ * rejilla, binario) eligen el carácter directamente.
+ */
+export const CARD_FIELDS = [
+    "plasma",
+    "waves",
+    "rings",
+    "noise",
+    "rain",
+    "stars",
+    "dither",
+    "topo",
+    "maze",
+    "grid",
+    "halftone",
+    "vortex",
+    "tunnel",
+    "binary",
+    "scan",
+];
+/** Rampas de claro a denso. `glyph` usa el carácter de la tarjeta con distinta opacidad. */
+export const CARD_CHARSETS = {
+    detailed: " .:-=+*#%@",
+    standard: " .:-=+*#",
+    blocks: " ░▒▓█",
+    braille: " ⠁⠃⠇⡇⡏⡟⡿⣿",
+    dots: " .·•●",
+    lines: " -=≡",
+    binary: " 01",
+    glyph: "",
+};
+const fract = (x) => x - Math.floor(x);
+const hash = (x, y, s = 0) => fract(Math.sin(x * 127.1 + y * 311.7 + s * 74.7) * 43758.5453);
+const smooth = (k) => k * k * (3 - 2 * k);
+function vnoise(x, y, s) {
+    const xi = Math.floor(x), yi = Math.floor(y);
+    const xf = smooth(x - xi), yf = smooth(y - yi);
+    const a = hash(xi, yi, s), b = hash(xi + 1, yi, s), c = hash(xi, yi + 1, s), d = hash(xi + 1, yi + 1, s);
+    return a + (b - a) * xf + (c - a) * yf + (a - b - c + d) * xf * yf;
+}
+const fbm = (x, y, s) => vnoise(x, y, s) * 0.55 + vnoise(x * 2.1, y * 2.1, s + 3) * 0.3 + vnoise(x * 4.3, y * 4.3, s + 7) * 0.15;
+const BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5].map((n) => (n + 0.5) / 16);
+/** Valor 0..1 del campo en (u, v) normalizados, con columna/fila de celda para los que trabajan por celda. */
+function sample(field, u, v, t, s, col, row, aspect) {
+    const x = u * aspect;
+    switch (field) {
+        case "plasma": {
+            const d = Math.hypot(x - aspect / 2, v - 0.5);
+            return 0.5 + 0.125 * (Math.sin(x * 6 + t + s) + Math.sin(v * 5 - t * 0.7) + Math.sin((x + v) * 4 + t * 0.5) + Math.sin(d * 9 - t));
+        }
+        case "waves":
+            return 0.5 + 0.5 * Math.sin(v * 16 + Math.sin(x * 3.5 + t * 0.8 + s) * 1.8 - t * 1.2);
+        case "rings": {
+            const cx = 0.15 + hash(s, 1) * 0.7 * aspect, cy = 0.15 + hash(s, 2) * 0.7;
+            return 0.5 + 0.5 * Math.sin(Math.hypot(x - cx, v - cy) * 30 - t * 2.2);
+        }
+        case "noise":
+            return fbm(x * 3 + t * 0.15, v * 3 - t * 0.1, s);
+        case "rain": {
+            const speed = 0.25 + hash(col, 3, s) * 0.6;
+            const head = fract(hash(col, 5, s) + t * speed * 0.35);
+            const dist = fract(head - v);
+            return dist < 0.35 ? Math.pow(1 - dist / 0.35, 2) : 0;
+        }
+        case "stars": {
+            const h = hash(col, row, s);
+            return h > 0.9 ? 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(t * (1 + h * 4) + h * 40)) : 0;
+        }
+        case "dither": {
+            const g = 0.5 + 0.35 * Math.sin(x * 2.2 + v * 1.4 + t * 0.4 + s) + 0.15 * Math.sin(v * 5 - t * 0.3);
+            return g > BAYER[(row % 4) * 4 + (col % 4)] ? 1 : 0.08;
+        }
+        case "topo": {
+            // curvas de nivel: el ruido a baja frecuencia, cortado en 6 cotas; la línea es la franja cercana a cada cota
+            const n = vnoise(x * 1.3 + s, v * 1.3 + t * 0.04, s) * 0.7 + vnoise(x * 2.6, v * 2.6, s + 5) * 0.3;
+            const f = fract(n * 6);
+            const line = Math.min(f, 1 - f);
+            return line < 0.14 ? 1 - line / 0.14 : 0.04;
+        }
+        case "halftone": {
+            const d = Math.hypot(x - aspect * (0.5 + 0.3 * Math.sin(t * 0.3 + s)), v - 0.5);
+            return Math.max(0, 1 - d * 1.4);
+        }
+        case "vortex": {
+            const dx = x - aspect / 2, dy = v - 0.5;
+            const a = Math.atan2(dy, dx), d = Math.hypot(dx, dy);
+            return 0.5 + 0.5 * Math.sin(a * 3 + d * 18 - t * 1.6 + s);
+        }
+        case "tunnel": {
+            const dx = x - aspect / 2, dy = v - 0.5;
+            const a = Math.atan2(dy, dx) / Math.PI, d = 0.3 / (Math.hypot(dx, dy) + 0.05);
+            const c = (Math.floor(a * 6 + t * 0.2) + Math.floor(d * 3 + t)) & 1;
+            return c ? Math.min(1, 0.25 + Math.hypot(dx, dy) * 1.6) : 0.05;
+        }
+        case "scan": {
+            // líneas de barrido alternas y una banda brillante que baja por la tarjeta
+            const band = fract(v - t * 0.22 + s * 0.1);
+            const glow = band > 0.78 ? Math.pow((band - 0.78) / 0.22, 1.5) : 0;
+            return Math.max(row % 2 ? 0.3 : 0.1, glow);
+        }
+        case "binary":
+        case "maze":
+        case "grid":
+            return fbm(x * 2 + t * 0.1, v * 2, s);
+    }
+}
+/** Carácter para los campos que no usan rampa. */
+function directChar(field, col, row, t, s, value) {
+    if (field === "maze")
+        return hash(col, row, s) > 0.5 ? "╱" : "╲";
+    if (field === "grid") {
+        const gx = col % 6 === 0, gy = row % 4 === 0;
+        return gx && gy ? "┼" : gx ? "│" : gy ? "─" : value > 0.62 ? "·" : " ";
+    }
+    if (field === "binary")
+        return hash(col, row + Math.floor(t * (0.5 + hash(col, 9, s) * 2)), s) > 0.5 ? "1" : "0";
+    return null;
+}
+/** Color CSS → [r, g, b] usando el propio canvas para normalizar (acepta hex, rgb(), nombres…). */
+function rgbOf(ctx, color) {
+    ctx.fillStyle = "#000";
+    ctx.fillStyle = color;
+    const n = String(ctx.fillStyle);
+    if (n.startsWith("#"))
+        return [parseInt(n.slice(1, 3), 16), parseInt(n.slice(3, 5), 16), parseInt(n.slice(5, 7), 16)];
+    const m = n.match(/[\d.]+/g) ?? ["0", "0", "0"];
+    return [Number(m[0]), Number(m[1]), Number(m[2])];
+}
+const mix = (a, b, k) => `rgb(${Math.round(a[0] + (b[0] - a[0]) * k)},${Math.round(a[1] + (b[1] - a[1]) * k)},${Math.round(a[2] + (b[2] - a[2]) * k)})`;
+/**
+ * Pinta el campo en el canvas. `pointer` (0..1 del tamaño de la tarjeta) y `intensity` (0..1) controlan la reacción
+ * al puntero; `t` en segundos.
+ */
+export function drawCardField(ctx, w, h, t, o, pointer) {
+    ctx.clearRect(0, 0, w, h);
+    const ch = Math.max(6, o.size);
+    const cw = ch * 0.62;
+    const cols = Math.ceil(w / cw);
+    const rows = Math.ceil(h / ch);
+    const aspect = w / Math.max(1, h);
+    const ramp = o.charset === "glyph" ? ` ${(o.glyph || "#")[0]}` : CARD_CHARSETS[o.charset];
+    const hv = pointer.intensity;
+    // degradado --acc → --acc2 en 8 pasos precalculados (un fillStyle por celda sería caro de parsear)
+    const A = rgbOf(ctx, o.colors.acc), B = rgbOf(ctx, o.colors.acc2);
+    const steps = Array.from({ length: 8 }, (_, i) => mix(A, B, i / 7));
+    ctx.font = `${ch}px ui-monospace, Consolas, monospace`;
+    ctx.textBaseline = "top";
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+            let u = (c + 0.5) / cols;
+            let v = (r + 0.5) / rows;
+            // distancia al puntero en unidades de altura
+            const dx = (u - pointer.x) * aspect, dy = v - pointer.y;
+            const d = Math.hypot(dx, dy);
+            const near = hv > 0 ? Math.max(0, 1 - d / 0.35) * hv : 0;
+            if (o.hover === "repel" && near > 0) {
+                u += (dx / (d + 1e-3)) * near * 0.08 / aspect;
+                v += (dy / (d + 1e-3)) * near * 0.08;
+            }
+            let val = sample(o.field, u, v, t, o.seed, c, r, aspect);
+            if (o.hover === "ripple" && hv > 0)
+                val = Math.min(1, val + Math.max(0, Math.sin(d * 40 - t * 8)) * Math.max(0, 1 - d / 0.6) * hv * 0.8);
+            if (o.hover === "glow")
+                val = Math.min(1, val + near * 0.8);
+            if (o.hover === "reveal")
+                val *= Math.min(1, 0.08 + near * 1.4);
+            if (val <= 0.02)
+                continue;
+            const direct = directChar(o.field, c, r, t, o.seed, val);
+            const char = direct ?? ramp[Math.min(ramp.length - 1, Math.max(1, Math.round(val * (ramp.length - 1))))];
+            if (!char || char === " ")
+                continue;
+            const color = near > 0.25 && o.hover !== "none" && o.hover !== "reveal"
+                ? o.colors.acc
+                : o.color === "accent"
+                    ? o.colors.acc
+                    : o.color === "gradient"
+                        ? steps[Math.min(7, Math.max(0, Math.round(((u + v) / 2) * 7)))]
+                        : o.color === "value"
+                            ? val > 0.6 ? o.colors.acc : o.colors.mut
+                            : o.colors.mut;
+            ctx.fillStyle = color;
+            ctx.globalAlpha = o.opacity * (direct ? 0.35 + 0.65 * val : 0.3 + 0.7 * val);
+            ctx.fillText(char, c * cw, r * ch);
+        }
+    }
+    ctx.globalAlpha = 1;
+}
+/** Campos que cambian con el tiempo (los demás solo se repintan al mover el puntero o al cambiar de tema). */
+export const ANIMATED_FIELDS = new Set(["plasma", "waves", "rings", "noise", "rain", "stars", "dither", "topo", "halftone", "vortex", "tunnel", "binary", "scan"]);

package/dist/lib/ui/fonts.d.ts

@@ -0,0 +1,56 @@
+export declare const inter: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const manrope: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const spaceGrotesk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const syne: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const fraunces: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const instrumentSerif: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jetbrainsMono: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const spaceMono: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const pressStart2P: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const vt323: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const geistPixel: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey25: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const pixelifySans: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const dotGothic16: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const silkscreen: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountSingle: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey10: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const doto: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const tiny5: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountPropSingle: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const handjet: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountGridDouble: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquard12: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey20: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey15: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquardaBastarda9: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const micro5: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountPropSingleInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountGridDoubleInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountPropDoubleInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountGridSingleInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountSingleInk: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquard24: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountGridSingle: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const coralPixels: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bytesized: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcount: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquard12Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const bitcountPropDouble: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquard24Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey15Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const micro5Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey10Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey25Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jacquardaBastarda9Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const jersey20Charted: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const sixtyfour: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const sixtyfourConvergence: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const workbench: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const rubikPixels: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const rubikIso: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const mozillaHeadline: import("next/dist/compiled/@next/font").NextFontWithVariable;
+export declare const rubikBrokenFax: import("next/dist/compiled/@next/font").NextFontWithVariable;
+/** Todas las variables juntas, para aplicar una sola vez en `<html>` (ver `app/layout.tsx`). */
+export declare const fontVariables: string;

package/dist/lib/ui/fonts.js

@@ -0,0 +1,94 @@
+/**
+ * Catálogo tipográfico del kit.
+ *
+ * Fuentes de Google cargadas con `next/font/google`: se descargan en build y se
+ * autoalojan en este dominio (sin `<link>` a fonts.googleapis.com, sin petición
+ * de red en runtime, sin CLS gracias a `display: "swap"` + métricas de fallback
+ * automáticas). Cada una expone una variable CSS (`--font-*`) que `FONT_PRESETS`
+ * (`lib/ui/tokens.ts`) y los temas de landing (`lib/themes/themes.ts`) referencian
+ * con un *stack* de sistema como último fallback, así nunca se depende 100% de
+ * que la variable exista.
+ *
+ * Para añadir una fuente propia (de marca, con licencia local, no en Google
+ * Fonts): usa `next/font/local` en este mismo archivo, exporta su variable igual
+ * que las de abajo y regístrala en `FONT_PRESETS`. Ver guía §11.
+ */
+import { Fraunces, Inter, Instrument_Serif, JetBrains_Mono, Manrope, Space_Grotesk, Space_Mono, Syne } from "next/font/google";
+export const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
+export const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope", display: "swap" });
+export const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-space-grotesk", display: "swap" });
+export const syne = Syne({ subsets: ["latin"], variable: "--font-syne", display: "swap" });
+export const fraunces = Fraunces({ subsets: ["latin"], variable: "--font-fraunces", display: "swap" });
+export const instrumentSerif = Instrument_Serif({ subsets: ["latin"], weight: ["400"], variable: "--font-instrument-serif", display: "swap" });
+export const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap" });
+export const spaceMono = Space_Mono({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-space-mono", display: "swap" });
+/**
+ * Fuentes "Pixel" — las 46 familias que Google Fonts agrupa bajo Appearance › Theme › Pixel
+ * (fonts.google.com/?categoryFilters=Appearance:%2FTheme%2FPixel), todas registradas también
+ * en `FONT_PRESETS` bajo la etiqueta "Pixel — …". `preload: false` a propósito: son 46 fuentes
+ * decorativas para elegir una a una desde el selector de `/componentes`, no texto de cada
+ * página — con precarga activa (el valor por defecto) cada carga de CUALQUIER página del sitio
+ * encadenaría 46 `<link rel="preload">` aunque esa página no use ninguna. Sin precarga, el
+ * `@font-face` sigue disponible para aplicarla al instante en cuanto se elige.
+ */
+import { Bitcount, Bitcount_Grid_Double, Bitcount_Grid_Double_Ink, Bitcount_Grid_Single, Bitcount_Grid_Single_Ink, Bitcount_Ink, Bitcount_Prop_Double, Bitcount_Prop_Double_Ink, Bitcount_Prop_Single, Bitcount_Prop_Single_Ink, Bitcount_Single, Bitcount_Single_Ink, Bytesized, Coral_Pixels, DotGothic16, Doto, Geist_Pixel, Handjet, Jacquard_12, Jacquard_12_Charted, Jacquard_24, Jacquard_24_Charted, Jacquarda_Bastarda_9, Jacquarda_Bastarda_9_Charted, Jersey_10, Jersey_10_Charted, Jersey_15, Jersey_15_Charted, Jersey_20, Jersey_20_Charted, Jersey_25, Jersey_25_Charted, Micro_5, Micro_5_Charted, Mozilla_Headline, Pixelify_Sans, Press_Start_2P, Rubik_Broken_Fax, Rubik_Iso, Rubik_Pixels, Silkscreen, Sixtyfour, Sixtyfour_Convergence, Tiny5, VT323, Workbench, } from "next/font/google";
+export const pressStart2P = Press_Start_2P({ weight: "400", subsets: ["latin"], variable: "--font-press-start-2p", display: "swap", preload: false });
+export const vt323 = VT323({ weight: "400", subsets: ["latin"], variable: "--font-vt323", display: "swap", preload: false });
+export const geistPixel = Geist_Pixel({ subsets: ["latin"], variable: "--font-geist-pixel", display: "swap", preload: false });
+export const jersey25 = Jersey_25({ weight: "400", subsets: ["latin"], variable: "--font-jersey-25", display: "swap", preload: false });
+export const pixelifySans = Pixelify_Sans({ subsets: ["latin"], variable: "--font-pixelify-sans", display: "swap", preload: false });
+export const dotGothic16 = DotGothic16({ weight: "400", subsets: ["latin"], variable: "--font-dotgothic16", display: "swap", preload: false });
+export const silkscreen = Silkscreen({ weight: "400", subsets: ["latin"], variable: "--font-silkscreen", display: "swap", preload: false });
+export const bitcountSingle = Bitcount_Single({ subsets: ["latin"], variable: "--font-bitcount-single", display: "swap", preload: false });
+export const jersey10 = Jersey_10({ weight: "400", subsets: ["latin"], variable: "--font-jersey-10", display: "swap", preload: false });
+export const doto = Doto({ subsets: ["latin"], variable: "--font-doto", display: "swap", preload: false });
+export const tiny5 = Tiny5({ weight: "400", subsets: ["latin"], variable: "--font-tiny5", display: "swap", preload: false });
+export const bitcountPropSingle = Bitcount_Prop_Single({ subsets: ["latin"], variable: "--font-bitcount-prop-single", display: "swap", preload: false });
+export const handjet = Handjet({ subsets: ["latin"], variable: "--font-handjet", display: "swap", preload: false });
+export const bitcountGridDouble = Bitcount_Grid_Double({ subsets: ["latin"], variable: "--font-bitcount-grid-double", display: "swap", preload: false });
+export const jacquard12 = Jacquard_12({ weight: "400", subsets: ["latin"], variable: "--font-jacquard-12", display: "swap", preload: false });
+export const jersey20 = Jersey_20({ weight: "400", subsets: ["latin"], variable: "--font-jersey-20", display: "swap", preload: false });
+export const jersey15 = Jersey_15({ weight: "400", subsets: ["latin"], variable: "--font-jersey-15", display: "swap", preload: false });
+export const jacquardaBastarda9 = Jacquarda_Bastarda_9({ weight: "400", subsets: ["latin"], variable: "--font-jacquarda-bastarda-9", display: "swap", preload: false });
+export const micro5 = Micro_5({ weight: "400", subsets: ["latin"], variable: "--font-micro-5", display: "swap", preload: false });
+export const bitcountInk = Bitcount_Ink({ subsets: ["latin"], variable: "--font-bitcount-ink", display: "swap", preload: false });
+export const bitcountPropSingleInk = Bitcount_Prop_Single_Ink({ subsets: ["latin"], variable: "--font-bitcount-prop-single-ink", display: "swap", preload: false });
+export const bitcountGridDoubleInk = Bitcount_Grid_Double_Ink({ subsets: ["latin"], variable: "--font-bitcount-grid-double-ink", display: "swap", preload: false });
+export const bitcountPropDoubleInk = Bitcount_Prop_Double_Ink({ subsets: ["latin"], variable: "--font-bitcount-prop-double-ink", display: "swap", preload: false });
+export const bitcountGridSingleInk = Bitcount_Grid_Single_Ink({ subsets: ["latin"], variable: "--font-bitcount-grid-single-ink", display: "swap", preload: false });
+export const bitcountSingleInk = Bitcount_Single_Ink({ subsets: ["latin"], variable: "--font-bitcount-single-ink", display: "swap", preload: false });
+export const jacquard24 = Jacquard_24({ weight: "400", subsets: ["latin"], variable: "--font-jacquard-24", display: "swap", preload: false });
+export const bitcountGridSingle = Bitcount_Grid_Single({ subsets: ["latin"], variable: "--font-bitcount-grid-single", display: "swap", preload: false });
+export const coralPixels = Coral_Pixels({ weight: "400", subsets: ["latin"], variable: "--font-coral-pixels", display: "swap", preload: false });
+export const bytesized = Bytesized({ weight: "400", subsets: ["latin"], variable: "--font-bytesized", display: "swap", preload: false });
+export const bitcount = Bitcount({ subsets: ["latin"], variable: "--font-bitcount", display: "swap", preload: false });
+export const jacquard12Charted = Jacquard_12_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jacquard-12-charted", display: "swap", preload: false });
+export const bitcountPropDouble = Bitcount_Prop_Double({ subsets: ["latin"], variable: "--font-bitcount-prop-double", display: "swap", preload: false });
+export const jacquard24Charted = Jacquard_24_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jacquard-24-charted", display: "swap", preload: false });
+export const jersey15Charted = Jersey_15_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jersey-15-charted", display: "swap", preload: false });
+export const micro5Charted = Micro_5_Charted({ weight: "400", subsets: ["latin"], variable: "--font-micro-5-charted", display: "swap", preload: false });
+export const jersey10Charted = Jersey_10_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jersey-10-charted", display: "swap", preload: false });
+export const jersey25Charted = Jersey_25_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jersey-25-charted", display: "swap", preload: false });
+export const jacquardaBastarda9Charted = Jacquarda_Bastarda_9_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jacquarda-bastarda-9-charted", display: "swap", preload: false });
+export const jersey20Charted = Jersey_20_Charted({ weight: "400", subsets: ["latin"], variable: "--font-jersey-20-charted", display: "swap", preload: false });
+export const sixtyfour = Sixtyfour({ subsets: ["latin"], variable: "--font-sixtyfour", display: "swap", preload: false });
+export const sixtyfourConvergence = Sixtyfour_Convergence({ subsets: ["latin"], variable: "--font-sixtyfour-convergence", display: "swap", preload: false });
+export const workbench = Workbench({ subsets: ["latin"], variable: "--font-workbench", display: "swap", preload: false });
+export const rubikPixels = Rubik_Pixels({ weight: "400", subsets: ["latin"], variable: "--font-rubik-pixels", display: "swap", preload: false });
+export const rubikIso = Rubik_Iso({ weight: "400", subsets: ["latin"], variable: "--font-rubik-iso", display: "swap", preload: false });
+export const mozillaHeadline = Mozilla_Headline({ subsets: ["latin"], variable: "--font-mozilla-headline", display: "swap", preload: false });
+export const rubikBrokenFax = Rubik_Broken_Fax({ weight: "400", subsets: ["latin"], variable: "--font-rubik-broken-fax", display: "swap", preload: false });
+/** Todas las variables juntas, para aplicar una sola vez en `<html>` (ver `app/layout.tsx`). */
+export const fontVariables = [
+    inter, manrope, spaceGrotesk, syne, fraunces, instrumentSerif, jetbrainsMono, spaceMono,
+    pressStart2P, vt323, geistPixel, jersey25, pixelifySans, dotGothic16,
+    silkscreen, bitcountSingle, jersey10, doto, tiny5, bitcountPropSingle,
+    handjet, bitcountGridDouble, jacquard12, jersey20, jersey15, jacquardaBastarda9,
+    micro5, bitcountInk, bitcountPropSingleInk, bitcountGridDoubleInk, bitcountPropDoubleInk, bitcountGridSingleInk,
+    bitcountSingleInk, jacquard24, bitcountGridSingle, coralPixels, bytesized, bitcount,
+    jacquard12Charted, bitcountPropDouble, jacquard24Charted, jersey15Charted, micro5Charted, jersey10Charted,
+    jersey25Charted, jacquardaBastarda9Charted, jersey20Charted, sixtyfour, sixtyfourConvergence, workbench,
+    rubikPixels, rubikIso, mozillaHeadline, rubikBrokenFax,
+]
+    .map((f) => f.variable)
+    .join(" ");

package/dist/lib/ui/fx.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Motor de dibujo de los efectos de aparición/desaparición en canvas. Son funciones puras de
+ * (progreso, opciones): el componente decide cuándo llamarlas y en qué sentido animar el progreso.
+ */
+export declare const CHARSETS: {
+    readonly symbols: "!<>-_\\/[]{}=+*^?#";
+    readonly binary: "01";
+    readonly hex: "0123456789ABCDEF";
+    readonly code: "{}[]()<>;:=+-*/\\|&%$#@~^";
+    readonly blocks: "░▒▓█";
+    readonly dots: ".:;·+*";
+};
+export type CharsetId = keyof typeof CHARSETS;
+export declare const hash: (n: number) => number;
+export declare const clamp01: (v: number) => number;
+export type AsciiPattern = "random" | "sweep" | "rain" | "radial" | "rows";
+export type CoverOptions = {
+    pattern: AsciiPattern;
+    cell: number;
+    chars: string;
+    bg: string;
+    c1: string;
+    c2: string;
+    time: number;
+    seed: number;
+    /** deja un rastro tenue tras el borde de descubrimiento */
+    edge: boolean;
+};
+/** Capa de celdas opacas con glifos. `k` = 0 cubre todo; `k` = 1 lo descubre por completo. */
+export declare function drawAsciiCover(ctx: CanvasRenderingContext2D, w: number, h: number, k: number, o: CoverOptions): void;
+/** Ruido de televisión. `amount` 0..1 = opacidad de la capa; se dibuja a baja resolución y se amplía. */
+export declare function drawStatic(ctx: CanvasRenderingContext2D, w: number, h: number, amount: number, tint: string): void;
+/** Barras de "documento censurado" que se retiran (o vuelven) fila a fila. `k` = 0 cubre todo. */
+export declare function drawRedact(ctx: CanvasRenderingContext2D, w: number, h: number, k: number, o: {
+    rowH: number;
+    color: string;
+    textColor: string;
+    seed: number;
+    label: string;
+}): void;
+/** Bloques y desgarros de corrupción para el glitch profundo. `amp` 0..1; `step` cambia el patrón. */
+export declare function drawCorruption(ctx: CanvasRenderingContext2D, w: number, h: number, amp: number, step: number, c1: string, c2: string): void;

package/dist/lib/ui/fx.js

@@ -0,0 +1,162 @@
+/**
+ * Motor de dibujo de los efectos de aparición/desaparición en canvas. Son funciones puras de
+ * (progreso, opciones): el componente decide cuándo llamarlas y en qué sentido animar el progreso.
+ */
+export const CHARSETS = {
+    symbols: "!<>-_\\/[]{}=+*^?#",
+    binary: "01",
+    hex: "0123456789ABCDEF",
+    code: "{}[]()<>;:=+-*/\\|&%$#@~^",
+    blocks: "░▒▓█",
+    dots: ".:;·+*",
+};
+export const hash = (n) => {
+    const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+    return x - Math.floor(x);
+};
+export const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);
+/** Umbral de cobertura 0..1 de una celda según el patrón: la celda se descubre cuando k lo supera. */
+function threshold(p, cx, cy, cols, rows, seed) {
+    const j = hash(seed + cx * 31 + cy * 17);
+    switch (p) {
+        case "sweep":
+            return (cx / Math.max(1, cols - 1)) * 0.8 + j * 0.2;
+        case "rows":
+            return (cy / Math.max(1, rows - 1)) * 0.8 + j * 0.2;
+        case "radial": {
+            const dx = (cx - cols / 2) / (cols / 2);
+            const dy = (cy - rows / 2) / (rows / 2);
+            return clamp01(Math.hypot(dx, dy) / 1.42) * 0.8 + j * 0.2;
+        }
+        case "rain": {
+            // cada columna arranca en un momento distinto y se descubre de arriba abajo
+            const delay = hash(seed + cx * 7.7) * 0.5;
+            return delay + (cy / Math.max(1, rows - 1)) * 0.45 + j * 0.05;
+        }
+        default:
+            return j;
+    }
+}
+/** Capa de celdas opacas con glifos. `k` = 0 cubre todo; `k` = 1 lo descubre por completo. */
+export function drawAsciiCover(ctx, w, h, k, o) {
+    ctx.clearRect(0, 0, w, h);
+    if (k >= 1)
+        return;
+    const cell = o.cell;
+    const cols = Math.ceil(w / cell);
+    const rows = Math.ceil(h / cell);
+    ctx.font = `${Math.max(8, cell - 3)}px monospace`;
+    ctx.textBaseline = "top";
+    const chars = o.chars || "#";
+    for (let cy = 0; cy < rows; cy++) {
+        for (let cx = 0; cx < cols; cx++) {
+            const thr = threshold(o.pattern, cx, cy, cols, rows, o.seed) * 0.88 + 0.06;
+            const x = cx * cell;
+            const y = cy * cell;
+            if (k < thr) {
+                ctx.globalAlpha = 1;
+                ctx.fillStyle = o.bg;
+                ctx.fillRect(x, y, cell, cell);
+                const lead = thr - k < 0.07;
+                ctx.fillStyle = lead ? o.c2 : o.c1;
+                ctx.globalAlpha = lead ? 1 : 0.35 + 0.65 * hash(o.seed + cx * 3 + cy * 5 + Math.floor(o.time * 6));
+                ctx.fillText(chars[Math.floor(hash(cx * 13 + cy * 7 + Math.floor(o.time * 14)) * chars.length)] ?? "#", x + 2, y + 1);
+            }
+            else if (o.edge && k - thr < 0.06) {
+                ctx.globalAlpha = 0.5 * (1 - (k - thr) / 0.06);
+                ctx.fillStyle = o.c2;
+                ctx.fillText(chars[Math.floor(hash(cx * 5 + cy * 11) * chars.length)] ?? "#", x + 2, y + 1);
+            }
+        }
+    }
+    ctx.globalAlpha = 1;
+}
+let noiseCv = null;
+/** Ruido de televisión. `amount` 0..1 = opacidad de la capa; se dibuja a baja resolución y se amplía. */
+export function drawStatic(ctx, w, h, amount, tint) {
+    ctx.clearRect(0, 0, w, h);
+    if (amount <= 0.01)
+        return;
+    const nw = Math.max(8, Math.ceil(w / 3));
+    const nh = Math.max(8, Math.ceil(h / 3));
+    noiseCv ??= document.createElement("canvas");
+    noiseCv.width = nw;
+    noiseCv.height = nh;
+    const nctx = noiseCv.getContext("2d");
+    const img = nctx.createImageData(nw, nh);
+    for (let i = 0; i < img.data.length; i += 4) {
+        const v = Math.random() * 255;
+        img.data[i] = v;
+        img.data[i + 1] = v;
+        img.data[i + 2] = v;
+        img.data[i + 3] = 255;
+    }
+    nctx.putImageData(img, 0, 0);
+    ctx.imageSmoothingEnabled = false;
+    ctx.globalAlpha = clamp01(amount);
+    ctx.drawImage(noiseCv, 0, 0, w, h);
+    ctx.globalCompositeOperation = "multiply";
+    ctx.fillStyle = tint;
+    ctx.fillRect(0, 0, w, h);
+    ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 1;
+}
+/** Barras de "documento censurado" que se retiran (o vuelven) fila a fila. `k` = 0 cubre todo. */
+export function drawRedact(ctx, w, h, k, o) {
+    ctx.clearRect(0, 0, w, h);
+    if (k >= 1)
+        return;
+    const rows = Math.ceil(h / o.rowH);
+    ctx.font = `700 ${Math.max(9, o.rowH * 0.5)}px monospace`;
+    ctx.textBaseline = "middle";
+    for (let r = 0; r < rows; r++) {
+        const t = (r / rows) * 0.6 + hash(o.seed + r) * 0.35;
+        const p = clamp01((k - t) / 0.25);
+        const bw = w * (1 - p);
+        if (bw < 1)
+            continue;
+        const y = r * o.rowH;
+        ctx.fillStyle = o.color;
+        ctx.fillRect(w - bw, y + 1, bw, o.rowH - 2);
+        if (bw > 90 && o.label) {
+            ctx.fillStyle = o.textColor;
+            ctx.globalAlpha = 0.85;
+            ctx.fillText(o.label, w - bw + 8, y + o.rowH / 2);
+            ctx.globalAlpha = 1;
+        }
+    }
+}
+/** Bloques y desgarros de corrupción para el glitch profundo. `amp` 0..1; `step` cambia el patrón. */
+export function drawCorruption(ctx, w, h, amp, step, c1, c2) {
+    ctx.clearRect(0, 0, w, h);
+    if (amp < 0.03)
+        return;
+    const n = Math.floor(amp * 12) + 1;
+    ctx.font = "10px monospace";
+    ctx.textBaseline = "top";
+    for (let i = 0; i < n; i++) {
+        const s = step * 31 + i * 7;
+        const x = hash(s) * w;
+        const y = hash(s + 1) * h;
+        const bw = w * (0.05 + hash(s + 2) * 0.5);
+        const bh = 3 + hash(s + 3) * 22;
+        ctx.globalAlpha = 0.18 + amp * 0.35;
+        ctx.fillStyle = hash(s + 4) > 0.5 ? c1 : c2;
+        ctx.fillRect(x - bw / 2, y, bw, bh);
+        if (hash(s + 5) > 0.55) {
+            ctx.globalAlpha = Math.min(1, amp + 0.2);
+            ctx.fillStyle = hash(s + 6) > 0.5 ? c1 : c2;
+            let line = "";
+            for (let k = 0; k < 14; k++)
+                line += CHARSETS.hex[Math.floor(hash(s + 10 + k) * 16)];
+            ctx.fillText(line, x - bw / 2 + 2, y + 2);
+        }
+        // desgarro fino
+        if (hash(s + 8) > 0.6) {
+            ctx.globalAlpha = 0.5 * amp;
+            ctx.fillStyle = "#fff";
+            ctx.fillRect(0, hash(s + 9) * h, w, 1);
+        }
+    }
+    ctx.globalAlpha = 1;
+}