trama-ui 0.1.0

package/dist/lib/sketches/scroll-assemble.js

@@ -0,0 +1,90 @@
+import { aspect, createPointer, gridOrigin, hsv, plot } from "../cells.js";
+import { smooth, scrollState, span } from "../scroll/store.js";
+import { getTextMask } from "../text/mask.js";
+import { textStore } from "../text/store.js";
+/**
+ * Ensamblaje: las partículas empiezan dispersas, se agrupan formando tu texto a medida
+ * que bajas y estallan hacia fuera al final del recorrido.
+ */
+export function scAssemble(t, opts = {}) {
+    const ptr = createPointer(t);
+    const particles = [];
+    let key = "";
+    const retarget = (data, cols, rows, x0, y0) => {
+        const cells = [];
+        for (let j = 0; j < rows; j++)
+            for (let i = 0; i < cols; i++)
+                if (data[j * cols + i] > 140)
+                    cells.push(x0 + i, y0 + j);
+        const total = cells.length / 2;
+        const count = Math.min(2800, total);
+        const step = total / Math.max(1, count);
+        while (particles.length < count) {
+            const ang = Math.random() * Math.PI * 2;
+            const r = (0.4 + Math.random() * 0.6) * Math.max(cols, rows) * 0.6;
+            particles.push({
+                hx: Math.cos(ang) * r,
+                hy: Math.sin(ang) * r * 0.6,
+                tx: 0,
+                ty: 0,
+                x: 0,
+                y: 0,
+                seed: Math.random(),
+            });
+        }
+        particles.length = count;
+        particles.forEach((p, k) => {
+            const idx = Math.floor(k * step);
+            p.tx = cells[idx * 2];
+            p.ty = cells[idx * 2 + 1];
+        });
+    };
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const asp = aspect(t);
+        const { cols, rows, x0, y0 } = gridOrigin(t);
+        const mask = getTextMask(textStore.text(), cols, rows, asp);
+        if (mask.key !== key) {
+            key = mask.key;
+            retarget(mask.data, cols, rows, x0, y0);
+        }
+        const assemble = smooth(span(p, 0.05, 0.5));
+        const explode = smooth(span(p, 0.78, 1));
+        const R = 9;
+        if (opts.transparent)
+            t.clear();
+        else
+            t.background(4, 5, 12);
+        for (const q of particles) {
+            // deriva orgánica mientras está lejos de su sitio
+            const drift = (1 - assemble) * 1.6;
+            let gx = q.hx + Math.sin(s * 0.7 + q.seed * 20) * drift * 3;
+            let gy = q.hy + Math.cos(s * 0.6 + q.seed * 14) * drift * 2;
+            gx = gx * (1 - assemble) + q.tx * assemble;
+            gy = gy * (1 - assemble) + q.ty * assemble;
+            const ang = Math.atan2(q.ty, q.tx || 0.001);
+            gx += Math.cos(ang) * explode * 60 * (0.5 + q.seed);
+            gy += Math.sin(ang) * explode * 40 * (0.5 + q.seed);
+            // el puntero aparta las partículas ya ensambladas
+            const dx = q.x - ptr.x;
+            const dy = (q.y - ptr.y) * asp;
+            const d = Math.hypot(dx, dy) + 0.001;
+            if (d < R && assemble > 0.5) {
+                const k = (R - d) / R;
+                gx += (dx / d) * k * 5;
+                gy += ((dy / d) * k * 5) / asp;
+            }
+            q.x += (gx - q.x) * 0.14;
+            q.y += (gy - q.y) * 0.14;
+            const settled = assemble * (1 - explode);
+            t.char(settled > 0.85 ? "#" : settled > 0.4 ? "+" : "*");
+            const hue = (q.tx * 0.006 + s * 0.04 + 0.5 + explode * 0.2) % 1;
+            t.charColor(...hsv(hue, 0.7 - settled * 0.15, 0.35 + 0.65 * settled));
+            if (!opts.transparent)
+                t.cellColor(...hsv(hue, 0.8, 0.02 + 0.12 * settled));
+            plot(t, Math.round(q.x), Math.round(q.y));
+        }
+    });
+}

package/dist/lib/sketches/scroll-parallax.d.ts

@@ -0,0 +1,6 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Ascenso con paralaje: al bajar la cámara sube desde un valle al atardecer hasta el
+ * espacio. Cada capa de montañas se mueve a distinta velocidad y el cielo cambia de color.
+ */
+export declare function scParallax(t: Textmodifier): void;

package/dist/lib/sketches/scroll-parallax.js

@@ -0,0 +1,76 @@
+import { createPointer, eachCell, hash2, hsv, mix } from "../cells.js";
+import { clamp, scrollState } from "../scroll/store.js";
+/**
+ * Ascenso con paralaje: al bajar la cámara sube desde un valle al atardecer hasta el
+ * espacio. Cada capa de montañas se mueve a distinta velocidad y el cielo cambia de color.
+ */
+export function scParallax(t) {
+    const ptr = createPointer(t);
+    const ramp = t.createGlyphRamp(" .:-=+*#%@");
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const { cols, rows } = t.grid;
+        const worldH = rows * 3.2;
+        const cam = p * worldH;
+        const px = (ptr.x / cols) * 6; // leve paralaje horizontal con el puntero
+        // altura de cada capa de montañas por columna (una sola evaluación de ruido por columna)
+        const layers = [
+            { f: 0.35, base: rows * 0.55, amp: rows * 0.16, seed: 3, hue: 0.62, v: 0.32 },
+            { f: 0.6, base: rows * 0.42, amp: rows * 0.13, seed: 11, hue: 0.72, v: 0.2 },
+            { f: 1.0, base: rows * 0.3, amp: rows * 0.11, seed: 23, hue: 0.8, v: 0.1 },
+        ];
+        const tops = layers.map((L) => {
+            const arr = new Float32Array(cols);
+            for (let i = 0; i < cols; i++) {
+                const x = i + px * L.f * 4;
+                arr[i] = L.base + (t.noise(x * 0.03 + L.seed, L.seed) - 0.5) * 2 * L.amp + t.noise(x * 0.11, L.seed) * 3;
+            }
+            return arr;
+        });
+        t.background(0);
+        eachCell(t, (x, _y, i, j) => {
+            const sy = rows - 1 - j; // altura en pantalla (0 = abajo)
+            const wy = sy + cam; // altura en el mundo
+            const alt = clamp(wy / (worldH + rows));
+            // capas de montaña de cerca a lejos
+            for (let k = layers.length - 1; k >= 0; k--) {
+                const L = layers[k];
+                const top = tops[k][i] - cam * L.f;
+                if (sy < top) {
+                    const edge = top - sy < 1.2;
+                    t.char(edge ? "^" : ramp.at(0.2 + 0.1 * (top - sy > 6 ? 0 : 1)));
+                    t.charColor(...hsv(L.hue, 0.4, L.v + (edge ? 0.25 : 0)));
+                    t.cellColor(...hsv(L.hue, 0.6, L.v * 0.35));
+                    return;
+                }
+            }
+            // cielo: del atardecer (abajo) al espacio (arriba)
+            const dusk = clamp(1 - alt * 2.2);
+            const night = clamp(alt * 1.6);
+            const r = mix(mix(15, 255, dusk * dusk), 0, night) * 0.9;
+            const g = mix(mix(20, 110, dusk * dusk), 2, night) * 0.9;
+            const b = mix(mix(70, 90, dusk), 10, night) * 0.9;
+            t.cellColor(r, g, b);
+            const star = hash2(x + Math.floor(cam * 0.05), Math.floor(wy * 0.5));
+            if (star > 1 - 0.03 * clamp(alt * 3)) {
+                const tw = Math.sin(s * 2 + star * 90) * 0.5 + 0.5;
+                t.char(tw > 0.55 ? "*" : ".");
+                t.charColor(255, 255, 255, 120 + 135 * tw);
+                return;
+            }
+            // nubes en la franja media
+            const cloudBand = Math.exp(-(((alt - 0.28) / 0.08) ** 2));
+            if (cloudBand > 0.05) {
+                const c = t.noise(x * 0.06 + s * 0.05, wy * 0.09) * cloudBand;
+                if (c > 0.42) {
+                    t.char(ramp.at(c));
+                    t.charColor(255, 235, 230, 150);
+                    return;
+                }
+            }
+            t.char(" ");
+        });
+    });
+}

package/dist/lib/sketches/scroll-rain.d.ts

@@ -0,0 +1,6 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Lluvia sensible al scroll: cae más rápido cuanto más rápido desplazas y, pasada la
+ * mitad del recorrido, se va solidificando en tu texto.
+ */
+export declare function scRain(t: Textmodifier): void;

package/dist/lib/sketches/scroll-rain.js

@@ -0,0 +1,82 @@
+import { aspect, createPointer, gridOrigin, plot } from "../cells.js";
+import { smooth, scrollState, span } from "../scroll/store.js";
+import { getTextMask } from "../text/mask.js";
+import { textStore } from "../text/store.js";
+const GLYPHS = "01ABCDEFGHIJKLMNOPQRSTUVWXYZ<>{}[]/\\|+=*:;#$%&@";
+/**
+ * Lluvia sensible al scroll: cae más rápido cuanto más rápido desplazas y, pasada la
+ * mitad del recorrido, se va solidificando en tu texto.
+ */
+export function scRain(t) {
+    const ptr = createPointer(t);
+    let W = 0;
+    let H = 0;
+    let glow = new Float32Array(0);
+    let heads = [];
+    const rebuild = () => {
+        W = t.grid.cols;
+        H = t.grid.rows;
+        glow = new Float32Array(W * H);
+        heads = Array.from({ length: W }, () => ({ y: Math.random() * H, v: 0.2 + Math.random() * 0.6 }));
+    };
+    t.draw(() => {
+        if (W !== t.grid.cols || H !== t.grid.rows)
+            rebuild();
+        ptr.update();
+        const p = scrollState.p;
+        const boost = 1 + Math.abs(scrollState.v) * 5;
+        const text = textStore.text();
+        const asp = aspect(t);
+        const { x0, y0 } = gridOrigin(t);
+        const mask = getTextMask(text, W, H, asp);
+        const reveal = smooth(span(p, 0.45, 0.85));
+        for (let i = 0; i < W; i++) {
+            const h = heads[i];
+            h.y += h.v * boost * (scrollState.v < 0 ? -1 : 1);
+            if (h.y >= H + 4 || h.y < -H * 0.6) {
+                h.y = scrollState.v < 0 ? H + 2 : -Math.random() * H * 0.5;
+                h.v = 0.2 + Math.random() * 0.6;
+            }
+            const row = Math.floor(h.y);
+            if (row >= 0 && row < H)
+                glow[row * W + i] = 1;
+        }
+        if (ptr.raw) {
+            const gx = Math.round(ptr.raw.x - x0);
+            const gy = Math.round(ptr.raw.y - y0);
+            for (let dy = -3; dy <= 3; dy++)
+                for (let dx = -6; dx <= 6; dx++) {
+                    const x = gx + dx;
+                    const y = gy + dy;
+                    if (x >= 0 && y >= 0 && x < W && y < H && Math.hypot(dx / 2, dy) <= 3)
+                        glow[y * W + x] = 1;
+                }
+        }
+        // El verde matrix vira a cian y luego a ámbar al avanzar
+        const cr = 0 + p * 60;
+        const cg = 255 - p * 60;
+        const cb = 90 + p * 130;
+        t.background(0, 3, 4);
+        for (let j = 0; j < H; j++) {
+            for (let i = 0; i < W; i++) {
+                const idx = j * W + i;
+                const g = glow[idx];
+                glow[idx] = g * 0.93;
+                const m = (mask.data[idx] / 255) * reveal;
+                const b = Math.max(g, m);
+                if (b < 0.05)
+                    continue;
+                const lit = m > 0.4;
+                t.char(lit
+                    ? text[(i + j * 7) % text.length] || "#"
+                    : GLYPHS[(i * 31 + j * 17 + (g > 0.9 ? t.frameCount : 0)) % GLYPHS.length]);
+                if (lit)
+                    t.charColor(140 + 115 * g, 255, 170 + 85 * g);
+                else
+                    t.charColor(cr * b, cg * b * 0.9, cb * b * 0.5);
+                t.cellColor(0, lit ? 20 + 30 * b : 4 + 10 * b, lit ? 12 : 3);
+                plot(t, x0 + i, y0 + j);
+            }
+        }
+    });
+}

package/dist/lib/sketches/scroll-stats.d.ts

@@ -0,0 +1,7 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Combinación de ambas librerías: asciify-engine genera los números con su fuente
+ * bitmap 7×7 (`asciifyText`) y textmode.js los dibuja celda a celda mientras cuentan
+ * hacia arriba con el scroll. Ideal para una sección de cifras de una landing.
+ */
+export declare function scStats(t: Textmodifier): void;

package/dist/lib/sketches/scroll-stats.js

@@ -0,0 +1,81 @@
+import { createPointer, gridOrigin, hsv, plot } from "../cells.js";
+import { smooth, scrollState, span } from "../scroll/store.js";
+import { textStore } from "../text/store.js";
+const STATS = [
+    { to: 12, suffix: "K", label: "USUARIOS", start: 0.08 },
+    { to: 98, suffix: "%", label: "SATISFACCION", start: 0.28 },
+    { to: 250, suffix: "+", label: "PROYECTOS", start: 0.48 },
+];
+/**
+ * Combinación de ambas librerías: asciify-engine genera los números con su fuente
+ * bitmap 7×7 (`asciifyText`) y textmode.js los dibuja celda a celda mientras cuentan
+ * hacia arriba con el scroll. Ideal para una sección de cifras de una landing.
+ */
+export function scStats(t) {
+    const ptr = createPointer(t);
+    let bitmap = null;
+    const cache = new Map();
+    import("asciify-engine/core").then((m) => (bitmap = m.asciifyText));
+    const art = (str) => {
+        let a = cache.get(str);
+        if (!a) {
+            a = bitmap(str, { char: "#" }).split("\n");
+            cache.set(str, a);
+        }
+        return a;
+    };
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const { cols, rows } = gridOrigin(t);
+        t.background(5, 6, 16);
+        // línea base decorativa
+        for (let x = -Math.floor(cols / 2); x < cols / 2; x++) {
+            t.char("-");
+            t.charColor(40, 50, 90);
+            plot(t, x, Math.floor(rows * 0.18));
+        }
+        t.printAlign("center", "middle");
+        t.charColor(150, 170, 230);
+        t.cellColor(5, 6, 16);
+        t.print(`${textStore.text()}  ·  EN CIFRAS`, 0, -Math.floor(rows * 0.38), { markup: false });
+        if (!bitmap)
+            return;
+        const colW = Math.floor(cols / 3);
+        STATS.forEach((st, k) => {
+            const k01 = smooth(span(p, st.start, st.start + 0.28));
+            const value = Math.round(st.to * k01);
+            const lines = art(`${value}${st.suffix}`);
+            const w = Math.max(...lines.map((l) => l.length));
+            const h = lines.length;
+            const kx = Math.max(1, Math.min(3, Math.floor((colW * 0.9) / Math.max(1, w))));
+            const cx = (k - 1) * colW;
+            const ox = cx - Math.floor((w * kx) / 2);
+            const oy = -Math.floor((h * kx) / 2) - 1;
+            const visible = clamp01(span(p, st.start - 0.05, st.start + 0.05));
+            if (visible <= 0)
+                return;
+            const hue = (0.55 + k * 0.17 + s * 0.02) % 1;
+            for (let j = 0; j < h; j++) {
+                for (let i = 0; i < lines[j].length; i++) {
+                    if (lines[j][i] === " ")
+                        continue;
+                    for (let sy = 0; sy < kx; sy++) {
+                        for (let sx = 0; sx < kx; sx++) {
+                            t.char("#");
+                            t.charColor(...hsv(hue, 0.55, (0.55 + 0.45 * (1 - j / h)) * visible));
+                            t.cellColor(...hsv(hue, 0.85, 0.12 * visible));
+                            plot(t, ox + i * kx + sx, oy + j * kx + sy);
+                        }
+                    }
+                }
+            }
+            t.printAlign("center", "middle");
+            t.charColor(...hsv(hue, 0.3, 0.9 * visible));
+            t.cellColor(5, 6, 16);
+            t.print(st.label, cx, oy + h * kx + 3, { markup: false });
+        });
+    });
+}
+const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);

package/dist/lib/sketches/scroll-terminal.d.ts

@@ -0,0 +1,6 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Terminal que se escribe sola al hacer scroll: cada línea aparece carácter a carácter
+ * según el progreso. Usa tu texto como nombre del proyecto.
+ */
+export declare function scTerminal(t: Textmodifier): void;

package/dist/lib/sketches/scroll-terminal.js

@@ -0,0 +1,87 @@
+import { createPointer, gridOrigin, hash2, hsv, plot } from "../cells.js";
+import { clamp, scrollState } from "../scroll/store.js";
+import { textStore } from "../text/store.js";
+const BAR = [28, 34, 56];
+const BODY = [10, 13, 24];
+const DOTS = [
+    [255, 95, 87],
+    [255, 189, 46],
+    [40, 200, 64],
+];
+/**
+ * Terminal que se escribe sola al hacer scroll: cada línea aparece carácter a carácter
+ * según el progreso. Usa tu texto como nombre del proyecto.
+ */
+export function scTerminal(t) {
+    const ptr = createPointer(t);
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const { cols, rows, x0, y0 } = gridOrigin(t);
+        const name = textStore.text().toLowerCase().replace(/\s+/g, "-").slice(0, 24);
+        const lines = [
+            { text: `$ npx create-landing ${name}`, color: [130, 230, 255] },
+            { text: "[ok] plantilla descargada", color: [120, 255, 160] },
+            { text: "[ok] textmode.js + asciify-engine instalados", color: [120, 255, 160] },
+            { text: "[ok] gsap ScrollTrigger configurado", color: [120, 255, 160] },
+            { text: `$ cd ${name} && npm run dev`, color: [130, 230, 255] },
+            { text: "ready - http://localhost:3000", color: [255, 220, 120] },
+            { text: "scroll para ver la magia_", color: [200, 200, 220] },
+        ];
+        const total = lines.reduce((n, l) => n + l.text.length + 4, 0);
+        let typed = Math.floor(clamp(p * 1.1) * total);
+        const boxW = Math.min(cols - 6, 78);
+        const boxH = lines.length + 4;
+        const bx = -Math.floor(boxW / 2);
+        const by = -Math.floor(boxH / 2);
+        t.background(4, 6, 12);
+        // fondo tenue de puntos
+        for (let n = 0; n < 60; n++) {
+            const hx = hash2(n, Math.floor(s * 0.2));
+            const hy = hash2(Math.floor(s * 0.2), n * 3);
+            t.char(".");
+            t.charColor(40, 55, 90);
+            plot(t, x0 + Math.floor(hx * cols), y0 + Math.floor(hy * rows));
+        }
+        // ventana
+        for (let j = 0; j < boxH; j++) {
+            for (let i = 0; i < boxW; i++) {
+                const edge = i === 0 || i === boxW - 1 || j === 0 || j === boxH - 1;
+                const bar = j === 1;
+                t.cellColor(...(bar ? BAR : BODY));
+                t.charColor(90, 105, 150);
+                t.char(edge ? (j === 0 || j === boxH - 1 ? (i === 0 || i === boxW - 1 ? "+" : "-") : "|") : " ");
+                plot(t, bx + i, by + j);
+            }
+        }
+        // botones de la barra de título
+        DOTS.forEach((c, k) => {
+            t.char("o");
+            t.charColor(...c);
+            t.cellColor(28, 34, 56);
+            plot(t, bx + 2 + k * 2, by + 1);
+        });
+        // líneas escritas
+        t.printAlign("left", "top");
+        lines.forEach((l, k) => {
+            const n = Math.max(0, Math.min(l.text.length, typed));
+            typed -= l.text.length + 4;
+            if (n <= 0)
+                return;
+            t.cellColor(10, 13, 24);
+            t.charColor(...l.color);
+            t.print(l.text.slice(0, n), bx + 2, by + 3 + k, { markup: false });
+            // cursor parpadeante en la línea activa
+            if (n < l.text.length || (typed < 0 && k === lines.length - 1)) {
+                if (Math.floor(s * 2.5) % 2 === 0) {
+                    t.charColor(255, 255, 255);
+                    t.cellColor(220, 220, 240);
+                    t.char(" ");
+                    plot(t, bx + 2 + n, by + 3 + k);
+                }
+            }
+        });
+        void hsv;
+    });
+}

package/dist/lib/sketches/scroll-zoom.d.ts

@@ -0,0 +1,7 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Zoom tipográfico: al bajar te sumerges dentro de las letras (hasta 50×).
+ * La cámara converge hacia un punto interior de una letra, así que al final
+ * la pantalla queda llena de tu propio texto.
+ */
+export declare function scZoom(t: Textmodifier): void;

package/dist/lib/sketches/scroll-zoom.js

@@ -0,0 +1,49 @@
+import { aspect, createPointer, gridOrigin, hsv, plot } from "../cells.js";
+import { scrollState } from "../scroll/store.js";
+import { getFineMask } from "../text/mask.js";
+import { textStore } from "../text/store.js";
+/**
+ * Zoom tipográfico: al bajar te sumerges dentro de las letras (hasta 50×).
+ * La cámara converge hacia un punto interior de una letra, así que al final
+ * la pantalla queda llena de tu propio texto.
+ */
+export function scZoom(t) {
+    const ptr = createPointer(t);
+    const ramp = t.createGlyphRamp(" .:-=+*#%@");
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const asp = aspect(t);
+        const { cols, rows, x0, y0 } = gridOrigin(t);
+        const text = textStore.text();
+        const fm = getFineMask(text, cols, rows, asp, 3);
+        const scale = Math.exp(p * Math.log(50));
+        const a = 1 - 1 / scale;
+        // punto de la máscara que cae bajo el centro de pantalla
+        const cxm = cols / 2 + (fm.focus.x - cols / 2) * a;
+        const cym = rows / 2 + (fm.focus.y - rows / 2) * a;
+        t.background(4, 5, 14);
+        for (let j = 0; j < rows; j++) {
+            for (let i = 0; i < cols; i++) {
+                const x = x0 + i;
+                const y = y0 + j;
+                const mx = Math.floor((cxm + x / scale) * fm.ss);
+                const my = Math.floor((cym + y / scale) * fm.ss);
+                if (mx < 0 || my < 0 || mx >= fm.w || my >= fm.h)
+                    continue;
+                const v = fm.data[my * fm.w + mx] / 255;
+                if (v < 0.25)
+                    continue;
+                const deep = scale > 6;
+                t.char(deep ? text[(i * 3 + j * 5 + Math.floor(s * 3)) % text.length] : ramp.at(v));
+                const hue = (0.55 + p * 1.1 + x * 0.002 + Math.sin(s * 0.4 + y * 0.05) * 0.03) % 1;
+                const glow = 0.45 + 0.55 * v;
+                t.charColor(...hsv(hue, 0.6, glow));
+                t.cellColor(...hsv(hue, 0.85, 0.05 + 0.13 * v));
+                plot(t, x, y);
+            }
+        }
+        void ptr;
+    });
+}

package/dist/lib/sketches/starfield.d.ts

@@ -0,0 +1,3 @@
+import type { Textmodifier } from "textmode.js";
+/** Viaje a velocidad de warp. El puntero orienta el punto de fuga; mantener pulsado activa el hiperespacio. */
+export declare function starfield(t: Textmodifier): void;

package/dist/lib/sketches/starfield.js

@@ -0,0 +1,54 @@
+import { aspect, clamp01, createPointer, hsv, plot } from "../cells.js";
+/** Viaje a velocidad de warp. El puntero orienta el punto de fuga; mantener pulsado activa el hiperespacio. */
+export function starfield(t) {
+    const ptr = createPointer(t);
+    const COUNT = 1100;
+    const stars = Array.from({ length: COUNT }, () => make(true));
+    let boost = 0;
+    let cx = 0;
+    let cy = 0;
+    function make(initial) {
+        return {
+            x: (Math.random() * 2 - 1) * 1.6,
+            y: (Math.random() * 2 - 1) * 1.6,
+            z: initial ? Math.random() : 1,
+            hue: Math.random() < 0.7 ? 0.58 : 0.08,
+        };
+    }
+    t.draw(() => {
+        ptr.update();
+        const asp = aspect(t);
+        const cols = t.grid.cols;
+        const rows = t.grid.rows;
+        boost += ((ptr.pressed ? 1 : 0) - boost) * 0.06;
+        cx += (ptr.x * 0.55 - cx) * 0.08;
+        cy += (ptr.y * 0.55 - cy) * 0.08;
+        const speed = 0.006 + boost * 0.05;
+        const sx = cols * 0.22;
+        const sy = (cols * 0.22) / asp;
+        const project = (s, z) => [
+            Math.round(cx + (s.x / z) * sx),
+            Math.round(cy + (s.y / z) * sy),
+        ];
+        t.background(2, 3, 10);
+        t.lineWeight(1);
+        for (const s of stars) {
+            s.z -= speed;
+            const [px, py] = project(s, s.z);
+            if (s.z <= 0.03 || Math.abs(px) > cols || Math.abs(py) > rows) {
+                Object.assign(s, make(false));
+                continue;
+            }
+            const [tx, ty] = project(s, s.z + speed * (2 + boost * 16));
+            const near = 1 - s.z;
+            t.char(near > 0.85 ? "@" : near > 0.65 ? "#" : near > 0.4 ? "*" : near > 0.2 ? "+" : ".");
+            t.charColor(...hsv(s.hue, 0.5 - near * 0.4, clamp01(0.25 + near * 0.9)));
+            t.cellColor(0, 0, 0, 0);
+            // En reposo basta un punto; las estelas solo aparecen al acelerar
+            if (boost < 0.12)
+                plot(t, px, py);
+            else
+                t.line(tx, ty, px, py);
+        }
+    });
+}

package/dist/lib/sketches/text-3d.d.ts

@@ -0,0 +1,6 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Texto extruido en 3D: la máscara del texto se convierte en una nube de puntos con
+ * profundidad que gira. El puntero controla la inclinación; pulsar acelera el giro.
+ */
+export declare function tx3d(t: Textmodifier): void;

package/dist/lib/sketches/text-3d.js

@@ -0,0 +1,62 @@
+import { aspect, createPointer, gridOrigin, hsv, plot } from "../cells.js";
+import { getTextMask } from "../text/mask.js";
+import { textStore } from "../text/store.js";
+/**
+ * Texto extruido en 3D: la máscara del texto se convierte en una nube de puntos con
+ * profundidad que gira. El puntero controla la inclinación; pulsar acelera el giro.
+ */
+export function tx3d(t) {
+    const ptr = createPointer(t);
+    let pts = [];
+    let key = "";
+    let yaw = 0;
+    t.draw(() => {
+        ptr.update();
+        const s = t.secs;
+        const asp = aspect(t);
+        const { cols, rows } = gridOrigin(t);
+        const mask = getTextMask(textStore.text(), cols, rows, asp);
+        if (mask.key !== key) {
+            key = mask.key;
+            pts = [];
+            const depth = Math.max(4, Math.round(rows * 0.09));
+            const x0 = -Math.floor((cols - 1) / 2);
+            const y0 = -Math.floor(rows / 2);
+            for (let j = 0; j < rows; j++)
+                for (let i = 0; i < cols; i++)
+                    if (mask.data[j * cols + i] > 140) {
+                        for (const z of [-depth, 0, depth]) {
+                            pts.push({ x: x0 + i, y: y0 + j, z });
+                        }
+                    }
+            if (pts.length > 9000)
+                pts = pts.filter((_, k) => k % Math.ceil(pts.length / 9000) === 0);
+        }
+        // pulsar hace girar el texto; al soltar vuelve suavemente a la posición frontal
+        yaw = ptr.pressed ? yaw + 0.07 : yaw * 0.96;
+        const ay = yaw + Math.sin(s * 0.6) * 0.7 + (ptr.x / cols) * 1.0;
+        const ax = (ptr.y / rows) * 0.6;
+        const ca = Math.cos(ay), sa = Math.sin(ay), cx = Math.cos(ax), sx = Math.sin(ax);
+        const focal = cols * 1.6;
+        const out = [];
+        for (const q of pts) {
+            // giro en Y y luego en X
+            const x1 = q.x * ca + q.z * sa;
+            const z1 = -q.x * sa + q.z * ca;
+            const y2 = q.y * cx - z1 * sx;
+            const z2 = q.y * sx + z1 * cx;
+            const k = focal / (focal + z2);
+            out.push({ px: x1 * k, py: (y2 * k) / 1, z: z2, hue: (q.x / cols + 0.5 + s * 0.05) % 1 });
+        }
+        out.sort((a, b) => b.z - a.z); // de atrás hacia delante
+        t.background(4, 5, 12);
+        const near = -focal * 0.05;
+        for (const o of out) {
+            const f = Math.max(0, Math.min(1, (near - o.z) / (cols * 0.35) + 0.5));
+            t.char(f > 0.7 ? "#" : f > 0.4 ? "+" : ".");
+            t.charColor(...hsv(o.hue, 0.6, 0.3 + 0.7 * f));
+            t.cellColor(...hsv(o.hue, 0.8, 0.02 + 0.1 * f));
+            plot(t, Math.round(o.px), Math.round(o.py));
+        }
+    });
+}

package/dist/lib/sketches/text-combo-figlet.d.ts

@@ -0,0 +1,6 @@
+import type { Textmodifier } from "textmode.js";
+/**
+ * Combinación de ambas librerías: asciify-engine genera el arte de texto (FIGlet o
+ * bitmap 7×7) y textmode.js lo dibuja carácter a carácter con onda y ondas de hover.
+ */
+export declare function txComboFiglet(t: Textmodifier): void;