@3driseai/3drise-viewer 0.1.28 → 0.1.29

package/dist/components/text/engine/variants.d.ts

@@ -0,0 +1,159 @@
+export declare const handwriting: {
+    key: string;
+    source: string;
+    drawMethods: string[];
+    eraseMethods: string[];
+    drawDefault: string;
+    eraseDefault: string;
+    catalog: {
+        name: string;
+        description: string;
+        tags: string[];
+    };
+    defaults: {
+        color: string;
+        color2: string;
+        weight: number;
+        wetTime: number;
+        sheen: number;
+        opacity: number;
+        penGlow: number;
+    };
+    gui: (string | number)[][];
+    structural: any[];
+    build(layout: any, cfg: any, anim: any): any;
+};
+export declare const neonTube: {
+    key: string;
+    source: string;
+    drawMethods: string[];
+    eraseMethods: string[];
+    drawDefault: string;
+    eraseDefault: string;
+    catalog: {
+        name: string;
+        description: string;
+        tags: string[];
+    };
+    defaults: {
+        color: string;
+        color2: string;
+        tube: number;
+        core: number;
+        glow: number;
+        flicker: number;
+        offLevel: number;
+        opacity: number;
+    };
+    gui: (string | number)[][];
+    structural: any[];
+    build(layout: any, cfg: any, anim: any): any;
+};
+export declare const fourierSketch: {
+    key: string;
+    source: string;
+    drawMethods: string[];
+    eraseMethods: string[];
+    drawDefault: string;
+    eraseDefault: string;
+    catalog: {
+        name: string;
+        description: string;
+        tags: string[];
+    };
+    defaults: {
+        color: string;
+        color2: string;
+        line: number;
+        terms: number;
+        circles: number;
+        trail: number;
+        bridges: number;
+        glint: number;
+        opacity: number;
+    };
+    gui: (string | number)[][];
+    structural: string[];
+    build(layout: any, cfg: any, anim: any): any;
+};
+export declare const VARIANTS: {
+    handwriting: {
+        key: string;
+        source: string;
+        drawMethods: string[];
+        eraseMethods: string[];
+        drawDefault: string;
+        eraseDefault: string;
+        catalog: {
+            name: string;
+            description: string;
+            tags: string[];
+        };
+        defaults: {
+            color: string;
+            color2: string;
+            weight: number;
+            wetTime: number;
+            sheen: number;
+            opacity: number;
+            penGlow: number;
+        };
+        gui: (string | number)[][];
+        structural: any[];
+        build(layout: any, cfg: any, anim: any): any;
+    };
+    neonTube: {
+        key: string;
+        source: string;
+        drawMethods: string[];
+        eraseMethods: string[];
+        drawDefault: string;
+        eraseDefault: string;
+        catalog: {
+            name: string;
+            description: string;
+            tags: string[];
+        };
+        defaults: {
+            color: string;
+            color2: string;
+            tube: number;
+            core: number;
+            glow: number;
+            flicker: number;
+            offLevel: number;
+            opacity: number;
+        };
+        gui: (string | number)[][];
+        structural: any[];
+        build(layout: any, cfg: any, anim: any): any;
+    };
+    fourierSketch: {
+        key: string;
+        source: string;
+        drawMethods: string[];
+        eraseMethods: string[];
+        drawDefault: string;
+        eraseDefault: string;
+        catalog: {
+            name: string;
+            description: string;
+            tags: string[];
+        };
+        defaults: {
+            color: string;
+            color2: string;
+            line: number;
+            terms: number;
+            circles: number;
+            trail: number;
+            bridges: number;
+            glint: number;
+            opacity: number;
+        };
+        gui: (string | number)[][];
+        structural: string[];
+        build(layout: any, cfg: any, anim: any): any;
+    };
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/text/engine/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/text/engine/variants.ts"],"names":[],"mappings":"AA8DA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CA0BvB,CAAC;AAyCF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;CAwBpB,CAAC;AA8DF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAqD,CAAC"}

package/dist/components/text/engine/variants.js

@@ -0,0 +1,378 @@
+import * as THREE from 'three';
+import { buildRibbon, ribbonMaterial, buildCapsules, capsuleMaterial, frag, setReveal, tips } from './ribbon.js';
+import { prepare, applyAnim, extentOf, DRAW_METHODS, ERASE_METHODS } from './methods.js';
+import { LOOKS } from './looks/index.js';
+const hex = (h) => new THREE.Color(h);
+// ---- shared: glowing points at the pen / front (a pool, one per active stroke) ---------------
+function makeSpark(color) {
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.BufferAttribute(new Float32Array(3), 3));
+    const m = new THREE.ShaderMaterial({
+        uniforms: { uColor: { value: hex(color) }, uSize: { value: 0.05 }, uScale: { value: 800 }, uA: { value: 0 } },
+        vertexShader: /* glsl */ `uniform float uSize; uniform float uScale;
+          void main(){ vec4 mv = modelViewMatrix*vec4(position,1.0); gl_Position = projectionMatrix*mv; gl_PointSize = max(2.0, uSize*uScale/-mv.z); }`,
+        fragmentShader: /* glsl */ `uniform vec3 uColor; uniform float uA;
+          void main(){ vec2 p = gl_PointCoord*2.0-1.0; float r = length(p); float core = 1.0-smoothstep(0.0,0.28,r); float halo = pow(max(1.0-r,0.0),2.5)*0.55;
+            float a = (core*0.9+halo)*uA; if(a<0.004) discard; gl_FragColor = vec4(mix(uColor,vec3(1.0),0.6*core)*a, 1.0); }`,
+        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+    });
+    const p = new THREE.Points(g, m);
+    p.frustumCulled = false;
+    return p;
+}
+class SparkPool {
+    list;
+    group;
+    constructor(n, color) { this.list = []; this.group = new THREE.Group(); for (let i = 0; i < n; i++) {
+        const s = makeSpark(color);
+        this.list.push(s);
+        this.group.add(s);
+    } }
+    color(c) { this.list.forEach((s) => s.material.uniforms.uColor.value.set(c)); }
+    set(points, a, size, px) {
+        this.list.forEach((sp, i) => {
+            const p = points[i];
+            const pa = sp.geometry.attributes.position;
+            if (p) {
+                pa.setXYZ(0, p[0], p[1], 0.001);
+                pa.needsUpdate = true;
+                sp.material.uniforms.uA.value = a * (p[2] ?? 1);
+                sp.material.uniforms.uSize.value = size;
+                sp.material.uniforms.uScale.value = px;
+            }
+            else
+                sp.material.uniforms.uA.value = 0;
+        });
+    }
+    dispose() { this.list.forEach((s) => { s.geometry.dispose(); s.material.dispose(); }); }
+}
+// =========================================================================================
+// 1. handwriting — single-stroke pen paths derived from the font. Pen speed follows the 2/3 power law
+//    (slower in tight turns, where the ink pools). Wet ink dries from sheen colour to rest colour.
+//    Constant state: a slow sheen glint travels over the dry ink.
+// =========================================================================================
+const HW_FRAG = /* glsl */ `
+uniform vec3 uColor; uniform vec3 uColor2; uniform float uOpacity; uniform float uWetT; uniform float uSheen;
+void main(){
+  float fw = max(fwidth(vSide), 1e-4);
+  float edge = 1.0 - smoothstep(1.0 - 1.5*fw, 1.0, abs(vSide));
+  float a = edge*revealIn(0.0)*revealOut(0.0); if (a < 0.003) discard;
+  float age = ageAt(0.0);
+  float wet = exp(-age/uWetT);
+  vec3 col = mix(uColor*(0.8 + 0.2*clamp(vVar, 0.0, 1.0)), uColor2, wet*0.85);
+  col *= 1.0 - 0.14*smoothstep(0.5, 1.0, abs(vSide));
+  float ph = fract((vPos.x - uExt.x)/uExt.y*0.9 - uTime*0.16*uIdleSpeed);
+  float gl = exp(-pow((ph - 0.5)*9.0, 2.0)) * (0.5 + 0.5*clamp(vVar, 0.0, 1.0)) * smoothstep(0.4, 1.6, age);
+  col += uColor2*gl*uSheen*uIdle;
+  a *= uOpacity;
+  gl_FragColor = vec4(col*a, a);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+function finishStrokes(layout, mode, anim) {
+    const strokes = layout.strokes;
+    prepare(strokes, mode);
+    const G = layout.glyphs.length;
+    strokes.forEach((s) => { s.glyphN = s.glyph / Math.max(1, G - 1); });
+    return { strokes, G };
+}
+export const handwriting = {
+    key: 'handwriting', source: 'hand', drawMethods: DRAW_METHODS, eraseMethods: ERASE_METHODS, drawDefault: 'pen', eraseDefault: 'fade',
+    catalog: { name: 'Handwriting', description: 'A pen writes the text in single strokes, slowing in tight curves where the ink pools and drying from wet sheen to rest colour; a faint sheen drifts over the dry ink. Use for signatures, titles and invitations.', tags: ['handwriting', 'ink', 'pen', 'stroke', 'script'] },
+    defaults: { color: '#efe6d2', color2: '#ffd9a0', weight: 1, wetTime: 1.1, sheen: 0.35, opacity: 1, penGlow: 1 },
+    gui: [['weight', 0.4, 2.5, 0.01], ['wetTime', 0.2, 3, 0.05], ['sheen', 0, 1, 0.01], ['opacity', 0, 1, 0.01], ['penGlow', 0, 2, 0.05], ['color', 'color'], ['color2', 'color']],
+    structural: [],
+    build(layout, cfg, anim) {
+        const { strokes, G } = finishStrokes(layout, 'hand');
+        strokes.forEach((s) => { if (s.wfactor)
+            s.pressure = Float32Array.from(s.wfactor, (f) => Math.max(-0.5, Math.min(1.6, (f - 0.55) / 0.9))); });
+        const natural = layout.natural || 0.03;
+        const { infoD, infoE } = applyAnim(strokes, anim, G);
+        const geo = buildRibbon(strokes);
+        const mat = ribbonMaterial(frag(HW_FRAG), { uColor: { value: hex(cfg.color) }, uColor2: { value: hex(cfg.color2) }, uOpacity: { value: 1 }, uWetT: { value: cfg.wetTime }, uSheen: { value: cfg.sheen } }, '(0.55 + 0.9*clamp(aVar.x, -0.5, 1.6))', false);
+        const e = extentOf(strokes);
+        mat.uniforms.uExt.value.set(e.x0, e.w);
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.frustumCulled = false;
+        const pool = new SparkPool(24, cfg.color2);
+        const group = new THREE.Group();
+        group.add(mesh, pool.group);
+        const api = {
+            object: group,
+            apply(c) { const u = mat.uniforms; u.uColor.value.set(c.color); u.uColor2.value.set(c.color2); u.uHalf.value = natural * c.weight / 2; u.uOpacity.value = c.opacity; u.uWetT.value = c.wetTime; u.uSheen.value = c.sheen; pool.color(c.color2); api.c = c; },
+            update(S, time, px) {
+                setReveal(mat.uniforms, S, infoD, infoE, anim.draw.duration, time);
+                const on = infoD.tip && S.d > 0 && S.d < 1 && S.e <= 0;
+                pool.set(on ? tips(strokes, mat.uniforms.uHead.value, 24) : [], (api.c.penGlow || 0), natural * api.c.weight * 1.6, px);
+            },
+            dispose() { geo.dispose(); mat.dispose(); pool.dispose(); },
+        };
+        api.apply(cfg);
+        return api;
+    },
+};
+// =========================================================================================
+// 2. neonTube — outline contours as glass tubing. A gas discharge ignites each contour (hot white core, stutter
+//    before it settles). Constant state: mains hum, slow breathing and the odd micro-dip in a single letter.
+//    Unlit glass is faintly visible before ignition and until erased.
+// =========================================================================================
+const NEON_FRAG = /* glsl */ `
+uniform vec3 uColor; uniform vec3 uColor2; uniform float uCore; uniform float uGlow; uniform float uOpacity; uniform float uOff; uniform float uFlicker;
+float vn(float x, float seed){ float i = floor(x); float f = fract(x); f = f*f*(3.0 - 2.0*f); return mix(h21(vec2(i, seed)), h21(vec2(i + 1.0, seed)), f); }
+void main(){
+  float dist = length(vec2(max(abs(vXY.x) - vHL, 0.0), vXY.y));
+  float s = dist / uHalf;
+  float fw = max(fwidth(s), 1e-4);   // derivatives first: no discard before them
+  float f = clamp((vXY.x + vHL)/(2.0*max(vHL,1e-6)), 0.0, 1.0);
+  float lit = revealIn(f);
+  float gone = revealOut(f);
+  float ageS = ageAt(f);
+  float front = exp(-ageS/0.2);
+  // all flicker is smooth value-noise in time and shared by every segment of a letter: no blocky or aliased jitter
+  float gs = vGlyph*17.3 + 3.1;
+  float stutter = smoothstep(0.15, 0.85, vn(uTime*6.0, gs));
+  float fl = mix(1.0, 0.72 + 0.28*stutter, uFlicker*(1.0 - smoothstep(0.2, 1.1, ageS))*step(0.01, lit));
+  // constant state: slow breathing, a faint slow shimmer and a rare, smooth micro-dip of a single letter
+  float hum = 1.0 - 0.025*uFlicker*uIdle*vn(uTime*2.5*uIdleSpeed, gs + 9.0);
+  float breath = 1.0 + 0.05*uIdle*sin(uTime*1.3*uIdleSpeed + vGlyph*6.0);
+  float slot = floor(uTime*0.4*uIdleSpeed); float u = fract(uTime*0.4*uIdleSpeed);
+  float dip = step(0.975, h21(vec2(slot, gs))) * exp(-pow((u - 0.5)*7.0, 2.0)) * 0.4 * uIdle * uFlicker;
+  float steady = hum*breath*(1.0 - dip);
+  float coreW = max(uCore, 2.2*fw);
+  float core = 1.0 - smoothstep(coreW*0.55, coreW, s);
+  float halo = pow(max(1.0 - s, 0.0), 2.6);
+  vec3 hot = mix(uColor2, vec3(1.0), 0.55);
+  vec3 on = hot*core*(0.82 + 0.45*front) + uColor*halo*uGlow*(0.45 + 0.7*front);
+  vec3 off = uColor*uOff*(core*0.9 + halo*0.2);
+  vec3 col = mix(off, on*fl*steady, lit)*gone*uOpacity*(1.0 - step(1.0, s));
+  gl_FragColor = vec4(col, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+export const neonTube = {
+    key: 'neonTube', source: 'outline', drawMethods: DRAW_METHODS, eraseMethods: ERASE_METHODS, drawDefault: 'trace', eraseDefault: 'undraw',
+    catalog: { name: 'Neon Tube', description: 'Letter outlines as glass neon tubing: a gas discharge ignites each contour, stuttering before it settles into a steady hum with slow breathing and the odd micro-dip. Use for signs, nightlife and retro titles.', tags: ['neon', 'tube', 'glow', 'sign', 'outline'] },
+    defaults: { color: '#ff2f9a', color2: '#ffd2ec', tube: 0.04, core: 0.22, glow: 1, flicker: 1, offLevel: 0.07, opacity: 1 },
+    gui: [['tube', 0.015, 0.12, 0.001], ['core', 0.08, 0.5, 0.01], ['glow', 0, 2, 0.05], ['flicker', 0, 1, 0.05], ['offLevel', 0, 0.4, 0.01], ['opacity', 0, 1, 0.01], ['color', 'color'], ['color2', 'color']],
+    structural: [],
+    build(layout, cfg, anim) {
+        const { strokes, G } = finishStrokes(layout, 'outline');
+        const { infoD, infoE } = applyAnim(strokes, anim, G);
+        const geo = buildCapsules(strokes);
+        const mat = capsuleMaterial(NEON_FRAG, { uColor: { value: hex(cfg.color) }, uColor2: { value: hex(cfg.color2) }, uCore: { value: cfg.core }, uGlow: { value: cfg.glow }, uOpacity: { value: 1 }, uOff: { value: cfg.offLevel }, uFlicker: { value: cfg.flicker } });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.frustumCulled = false;
+        const pool = new SparkPool(24, cfg.color2);
+        const group = new THREE.Group();
+        group.add(mesh, pool.group);
+        const api = {
+            object: group,
+            apply(c) { const u = mat.uniforms; u.uColor.value.set(c.color); u.uColor2.value.set(c.color2); u.uHalf.value = c.tube * 2; u.uCore.value = c.core; u.uGlow.value = c.glow; u.uOpacity.value = c.opacity; u.uOff.value = c.offLevel; u.uFlicker.value = c.flicker; pool.color(c.color2); api.c = c; },
+            update(S, time, px) {
+                setReveal(mat.uniforms, S, infoD, infoE, anim.draw.duration, time);
+                const on = infoD.tip && S.d > 0 && S.d < 1 && S.e <= 0;
+                pool.set(on ? tips(strokes, mat.uniforms.uHead.value, 24) : [], 0.8, api.c.tube * 1.5, px);
+            },
+            dispose() { geo.dispose(); mat.dispose(); pool.dispose(); },
+        };
+        api.apply(cfg);
+        return api;
+    },
+};
+// =========================================================================================
+// 3. fourierSketch — every glyph is one closed complex curve z(t); its discrete Fourier series
+//    z(t) = sum c_k e^{i 2 pi k t} is drawn by a chain of rotating circles (epicycles), largest first.
+//    Constant state: glints travel round each contour. Counters are joined to the outer contour by dim bridge strokes.
+// =========================================================================================
+function glyphCurve(layout, gi, N) {
+    const segs = [];
+    const sts = layout.glyphs[gi].strokes.map((i) => layout.strokes[i]);
+    sts.forEach((s, i) => {
+        segs.push({ p: Array.from(s.pts), bridge: false });
+        const nx = sts[(i + 1) % sts.length];
+        segs.push({ p: [s.pts[s.pts.length - 2], s.pts[s.pts.length - 1], nx.pts[0], nx.pts[1]], bridge: true });
+    });
+    const pts = [], flag = [], cum = [0];
+    for (const sg of segs)
+        for (let i = 0; i < sg.p.length; i += 2) {
+            pts.push(sg.p[i], sg.p[i + 1]);
+            flag.push(sg.bridge ? 1 : 0);
+        }
+    const n = pts.length / 2;
+    for (let i = 1; i < n; i++)
+        cum.push(cum[i - 1] + Math.hypot(pts[2 * i] - pts[2 * i - 2], pts[2 * i + 1] - pts[2 * i - 1]));
+    const L = cum[n - 1];
+    const X = new Float64Array(N), Y = new Float64Array(N), F = new Uint8Array(N);
+    let j = 0;
+    for (let i = 0; i < N; i++) {
+        const d = (i / N) * L;
+        while (j < n - 2 && cum[j + 1] < d)
+            j++;
+        const f = (d - cum[j]) / Math.max(1e-9, cum[j + 1] - cum[j]);
+        X[i] = pts[2 * j] + (pts[2 * j + 2] - pts[2 * j]) * f;
+        Y[i] = pts[2 * j + 1] + (pts[2 * j + 3] - pts[2 * j + 1]) * f;
+        F[i] = flag[j] | flag[j + 1];
+    }
+    return { X, Y, F };
+}
+function dft(X, Y, K) {
+    const N = X.length;
+    const co = [];
+    for (let k = -N / 2; k < N / 2; k++) {
+        let re = 0, im = 0;
+        for (let n = 0; n < N; n++) {
+            const a = -2 * Math.PI * k * n / N, c = Math.cos(a), s = Math.sin(a);
+            re += X[n] * c - Y[n] * s;
+            im += X[n] * s + Y[n] * c;
+        }
+        co.push({ k, re: re / N, im: im / N, m: Math.hypot(re, im) / N });
+    }
+    co.sort((a, b) => b.m - a.m);
+    const top = co.slice(0, K);
+    const dc = co.find((c) => c.k === 0);
+    if (!top.includes(dc))
+        top.push(dc);
+    const kmax = Math.max(1, ...top.map((c) => Math.abs(c.k)));
+    for (const c of top) {
+        const x = Math.PI * c.k / (kmax + 1);
+        const sg = c.k === 0 ? 1 : Math.sin(x) / x;
+        c.re *= sg;
+        c.im *= sg;
+        c.m *= Math.abs(sg);
+    } // Lanczos sigma: tames Gibbs ripple
+    top.sort((a, b) => Number(b.k === 0) - Number(a.k === 0) || b.m - a.m);
+    return top;
+}
+const FS_FRAG = /* glsl */ `
+uniform vec3 uColor; uniform vec3 uColor2; uniform float uOpacity; uniform float uTrail; uniform float uBridge; uniform float uGlint;
+void main(){
+  float fw = max(fwidth(vSide), 1e-4);
+  float edge = 1.0 - smoothstep(1.0 - 1.5*fw, 1.0, abs(vSide));
+  float a = edge*revealIn(0.0)*revealOut(0.0)*mix(1.0, uBridge, clamp(vVar, 0.0, 1.0)); if (a < 0.003) discard;
+  float age = ageAt(0.0);
+  vec3 col = mix(uColor, uColor2, exp(-age/uTrail));
+  float ph = fract(arcAt(0.0) - uTime*0.11*uIdleSpeed + vGlyph*0.43);
+  float gl = exp(-pow((ph - 0.5)*11.0, 2.0)) * smoothstep(0.4, 1.6, age);
+  col = mix(col, uColor2, gl*0.75*uIdle*uGlint) + uColor2*gl*0.25*uIdle*uGlint;
+  gl_FragColor = vec4(col*a*uOpacity*0.9, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+const RING_VERT = /* glsl */ `
+attribute vec2 aq; attribute vec2 iC; attribute float iR; attribute float iA;
+varying vec2 vP; varying float vR; varying float vA;
+void main(){ vR = iR; vA = iA; float e = iR + 0.02; vP = aq*e; vec2 w = iC + vP; gl_Position = projectionMatrix*modelViewMatrix*vec4(w, 0.0, 1.0); }`;
+const RING_FRAG = /* glsl */ `
+precision highp float; uniform vec3 uColor; uniform float uW; uniform float uOpacity;
+varying vec2 vP; varying float vR; varying float vA;
+void main(){ float d = abs(length(vP) - vR); float fw = max(fwidth(d), 1e-5); float a = (1.0 - smoothstep(uW - fw, uW + fw, d))*vA*uOpacity; if (a < 0.003) discard;
+  gl_FragColor = vec4(uColor*a, 1.0); }`;
+export const fourierSketch = {
+    key: 'fourierSketch', source: 'outline', drawMethods: ['epicycle', ...DRAW_METHODS], eraseMethods: ERASE_METHODS, drawDefault: 'epicycle', eraseDefault: 'fade',
+    catalog: { name: 'Fourier Sketch', description: 'Each letter is traced by a chain of rotating circles whose radii are its Fourier coefficients; more terms sharpen the form, and glints keep circling the finished contours. Use for science, math and generative titles.', tags: ['fourier', 'epicycle', 'math', 'harmonic', 'trace'] },
+    defaults: { color: '#5fd0ff', color2: '#fff1c2', line: 0.03, terms: 96, circles: 1, trail: 0.9, bridges: 0.14, glint: 1, opacity: 1 },
+    gui: [['line', 0.01, 0.1, 0.001], ['terms', 6, 128, 1], ['circles', 0, 1, 0.01], ['trail', 0.1, 4, 0.05], ['bridges', 0, 0.6, 0.01], ['glint', 0, 1, 0.01], ['opacity', 0, 1, 0.01], ['color', 'color'], ['color2', 'color']],
+    structural: ['terms'],
+    build(layout, cfg, anim) {
+        const G = layout.glyphs.length;
+        const N = 640, M = 900;
+        const K = Math.round(cfg.terms);
+        const strokes = [];
+        const coefs = [];
+        for (let gi = 0; gi < G; gi++) {
+            const { X, Y, F } = glyphCurve(layout, gi, N);
+            const co = dft(X, Y, K);
+            coefs.push(co);
+            const pts = new Float32Array((M + 1) * 2), pr = new Float32Array(M + 1), tt = new Float32Array(M + 1), cum = new Float32Array(M + 1);
+            for (let i = 0; i <= M; i++) {
+                const t = i / M;
+                let x = 0, y = 0;
+                for (const c of co) {
+                    const a = 2 * Math.PI * c.k * t, cs = Math.cos(a), sn = Math.sin(a);
+                    x += c.re * cs - c.im * sn;
+                    y += c.re * sn + c.im * cs;
+                }
+                pts[2 * i] = x;
+                pts[2 * i + 1] = y;
+                pr[i] = F[Math.min(N - 1, Math.floor(t * N))];
+                tt[i] = t;
+                if (i)
+                    cum[i] = cum[i - 1] + Math.hypot(x - pts[2 * i - 2], y - pts[2 * i - 1]);
+            }
+            strokes.push({ pts, cum, len: cum[M], closed: true, t: tt, pressure: pr, glyphN: gi / Math.max(1, G - 1), glyph: gi });
+        }
+        prepare(strokes, 'keep');
+        const { infoD, infoE } = applyAnim(strokes, anim, G);
+        const geo = buildRibbon(strokes);
+        const mat = ribbonMaterial(frag(FS_FRAG), { uColor: { value: hex(cfg.color) }, uColor2: { value: hex(cfg.color2) }, uOpacity: { value: 1 }, uTrail: { value: cfg.trail }, uBridge: { value: cfg.bridges }, uGlint: { value: cfg.glint } }, '1.0', true);
+        const ex = extentOf(strokes);
+        mat.uniforms.uExt.value.set(ex.x0, ex.w);
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.frustumCulled = false;
+        const rg = new THREE.InstancedBufferGeometry();
+        rg.setAttribute('aq', new THREE.BufferAttribute(new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1]), 2));
+        rg.setIndex([0, 1, 2, 0, 2, 3]);
+        const iC = new THREE.InstancedBufferAttribute(new Float32Array(K * 2 + 2), 2), iR = new THREE.InstancedBufferAttribute(new Float32Array(K + 1), 1), iA = new THREE.InstancedBufferAttribute(new Float32Array(K + 1), 1);
+        iC.setUsage(THREE.DynamicDrawUsage);
+        iR.setUsage(THREE.DynamicDrawUsage);
+        iA.setUsage(THREE.DynamicDrawUsage);
+        rg.setAttribute('iC', iC);
+        rg.setAttribute('iR', iR);
+        rg.setAttribute('iA', iA);
+        rg.instanceCount = 0;
+        rg.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1e3);
+        const rm = new THREE.ShaderMaterial({ uniforms: { uColor: { value: hex(cfg.color) }, uW: { value: 0.0026 }, uOpacity: { value: 1 } }, vertexShader: RING_VERT, fragmentShader: RING_FRAG, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide });
+        const rings = new THREE.Mesh(rg, rm);
+        rings.frustumCulled = false;
+        const lg = new THREE.BufferGeometry();
+        lg.setAttribute('position', new THREE.BufferAttribute(new Float32Array((K + 1) * 6), 3));
+        lg.setDrawRange(0, 0);
+        const lm = new THREE.LineBasicMaterial({ color: cfg.color, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending, depthWrite: false });
+        const lines = new THREE.LineSegments(lg, lm);
+        lines.frustumCulled = false;
+        const pool = new SparkPool(1, cfg.color2);
+        const group = new THREE.Group();
+        group.add(mesh, rings, lines, pool.group);
+        const epi = anim.draw.method === 'epicycle';
+        const api = {
+            object: group,
+            apply(c) { const u = mat.uniforms; u.uColor.value.set(c.color); u.uColor2.value.set(c.color2); u.uHalf.value = c.line / 2; u.uOpacity.value = c.opacity; u.uTrail.value = c.trail; u.uBridge.value = c.bridges; u.uGlint.value = c.glint; rm.uniforms.uColor.value.set(c.color); rm.uniforms.uOpacity.value = c.circles; lm.color.set(c.color); lm.opacity = 0.5 * c.circles; pool.color(c.color2); api.c = c; },
+            update(S, time, px) {
+                setReveal(mat.uniforms, S, infoD, infoE, anim.draw.duration, time);
+                const P = Math.min(0.99999, S.d);
+                const act = epi && S.d > 0 && S.d < 1 && S.e <= 0;
+                if (!act) {
+                    rg.instanceCount = 0;
+                    lg.setDrawRange(0, 0);
+                    pool.set([], 0, 0.01, px);
+                    return;
+                }
+                const gi = Math.min(G - 1, Math.floor(P * G));
+                const t = P * G - gi;
+                const co = coefs[gi];
+                const fade = Math.min(1, t / 0.05) * Math.min(1, (1 - t) / 0.05);
+                let cx = 0, cy = 0;
+                const lp = lg.attributes.position;
+                co.forEach((c, i) => {
+                    const a = 2 * Math.PI * c.k * t, cs = Math.cos(a), sn = Math.sin(a);
+                    const tx = c.re * cs - c.im * sn, ty = c.re * sn + c.im * cs;
+                    iC.setXY(i, cx, cy);
+                    iR.setX(i, c.m);
+                    iA.setX(i, i === 0 ? 0 : fade * Math.min(1, 0.35 + c.m * 30));
+                    lp.setXYZ(2 * i, cx, cy, 0);
+                    lp.setXYZ(2 * i + 1, cx + tx, cy + ty, 0);
+                    cx += tx;
+                    cy += ty;
+                });
+                iC.needsUpdate = iR.needsUpdate = iA.needsUpdate = lp.needsUpdate = true;
+                rg.instanceCount = co.length;
+                lg.setDrawRange(0, co.length * 2);
+                pool.set([[cx, cy]], fade * 0.9, api.c.line * 1.6, px);
+            },
+            dispose() { geo.dispose(); mat.dispose(); rg.dispose(); rm.dispose(); lg.dispose(); lm.dispose(); pool.dispose(); },
+        };
+        api.apply(cfg);
+        return api;
+    },
+};
+export const VARIANTS = { handwriting, neonTube, fourierSketch, ...LOOKS };

package/dist/components/text/fonts/architects-daughter.outline.d.ts

@@ -0,0 +1,3 @@
+declare const data: any;
+export default data;
+//# sourceMappingURL=architects-daughter.outline.d.ts.map

package/dist/components/text/fonts/architects-daughter.outline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"architects-daughter.outline.d.ts","sourceRoot":"","sources":["../../../../src/components/text/fonts/architects-daughter.outline.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,IAAI,EAAE,GAAyt5J,CAAC;AACtu5J,eAAe,IAAI,CAAC"}