strokes-js 0.1.0

package/dist/glyphs/letters/letter-w.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "w", 3 wobble variants. */
+export const letterW = {
+    width: 13,
+    variants: [
+        "M1 9 L3.5 20 L6 12 L8.5 20 L11 9",
+        "M1.2 8.9 L3.4 20.2 L6.2 12.1 L8.6 19.9 L10.8 8.8",
+        "M1.1 9.0 L3.5 20.1 L6.2 12.0 L8.7 20.2 L11.0 8.9",
+    ],
+};

package/dist/glyphs/letters/letter-x-upper.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "X" (uppercase), 3 wobble variants. */
+export declare const letterXUpper: GlyphEntry;

package/dist/glyphs/letters/letter-x-upper.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "X" (uppercase), 3 wobble variants. */
+export const letterXUpper = {
+    width: 13,
+    variants: [
+        "M1 4 L11 20 M11 4 L1 20",
+        "M0.9 3.9 L11.1 19.8 M11.2 4.0 L1.2 20.2",
+        "M0.9 3.8 L11.2 20.1 M11.1 4.1 L1.0 19.9",
+    ],
+};

package/dist/glyphs/letters/letter-x.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "x", 3 wobble variants. */
+export declare const letterX: GlyphEntry;

package/dist/glyphs/letters/letter-x.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "x", 3 wobble variants. */
+export const letterX = {
+    width: 11,
+    variants: [
+        "M1 9 L9 20 M9 9 L1 20",
+        "M1.2 8.9 L9.0 20.0 M9.2 9.1 L1.1 20.0",
+        "M0.8 9.1 L8.9 19.8 M9.1 9.0 L0.9 19.9",
+    ],
+};

package/dist/glyphs/letters/letter-y-upper.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "Y" (uppercase), 3 wobble variants. */
+export declare const letterYUpper: GlyphEntry;

package/dist/glyphs/letters/letter-y-upper.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "Y" (uppercase), 3 wobble variants. */
+export const letterYUpper = {
+    width: 14,
+    variants: [
+        "M1 4 L6.5 12.5 L12 4 M6.5 12.5 L6.5 20",
+        "M1.0 4.0 L6.4 12.6 L12.1 4.0 M6.6 12.6 L6.7 20.2",
+        "M1.0 4.2 L6.7 12.6 L11.8 4.1 M6.7 12.7 L6.4 20.0",
+    ],
+};

package/dist/glyphs/letters/letter-y.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "y", 3 wobble variants. */
+export declare const letterY: GlyphEntry;

package/dist/glyphs/letters/letter-y.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "y", 3 wobble variants. */
+export const letterY = {
+    width: 11,
+    variants: [
+        "M1 9 L5 15 L9 9 M5 15 L4.2 21.5 C 4 22.8 2.6 23.2 1.5 22.6",
+        "M0.9 8.8 L4.9 15.0 L9.0 9.1 M5.1 14.9 L4.0 21.4 C 3.8 22.8 2.5 23.0 1.7 22.6",
+        "M1.0 9.1 L5.1 14.9 L9.1 9.2 M5.2 15.1 L4.4 21.7 C 3.9 22.7 2.7 23.2 1.3 22.7",
+    ],
+};

package/dist/glyphs/letters/letter-z-upper.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "Z" (uppercase), 3 wobble variants. */
+export declare const letterZUpper: GlyphEntry;

package/dist/glyphs/letters/letter-z-upper.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "Z" (uppercase), 3 wobble variants. */
+export const letterZUpper = {
+    width: 13,
+    variants: [
+        "M1 4 L11 4 L1 20 L11 20",
+        "M1.1 4.1 L10.9 4.0 L0.9 20.1 L11.0 19.8",
+        "M1.1 4.0 L11.0 4.0 L0.9 20.0 L11.0 20.0",
+    ],
+};

package/dist/glyphs/letters/letter-z.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: monoline "z", 3 wobble variants. */
+export declare const letterZ: GlyphEntry;

package/dist/glyphs/letters/letter-z.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: monoline "z", 3 wobble variants. */
+export const letterZ = {
+    width: 11,
+    variants: [
+        "M1 9 L9 9 L1 20 L9 20",
+        "M1.2 9.2 L8.8 8.8 L1.2 20.1 L9.0 19.9",
+        "M0.8 8.9 L9.0 8.9 L0.9 19.8 L9.2 19.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-apostrophe.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "'", 3 wobble variants. */
+export declare const punctApostrophe: GlyphEntry;

package/dist/glyphs/punctuation/punct-apostrophe.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "'", 3 wobble variants. */
+export const punctApostrophe = {
+    width: 6,
+    variants: [
+        "M4.5 4 L4 7",
+        "M4.4 3.9 L4.1 7.1",
+        "M4.4 3.9 L3.9 6.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-comma.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: ",", 3 wobble variants. */
+export declare const punctComma: GlyphEntry;

package/dist/glyphs/punctuation/punct-comma.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: ",", 3 wobble variants. */
+export const punctComma = {
+    width: 6,
+    variants: [
+        "M4.5 18.5 C 4.5 20 3 21.5 2 22",
+        "M4.5 18.5 C 4.5 20.0 3.1 21.5 2.0 22.0",
+        "M4.5 18.5 C 4.5 20.0 3.0 21.4 1.9 22.1",
+    ],
+};

package/dist/glyphs/punctuation/punct-exclamation.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "!", 3 wobble variants. */
+export declare const punctExclamation: GlyphEntry;

package/dist/glyphs/punctuation/punct-exclamation.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "!", 3 wobble variants. */
+export const punctExclamation = {
+    width: 7,
+    variants: [
+        "M5 4 L5 15 M5 18.5 L5.2 18.7",
+        "M5.0 4.0 L5.0 14.9 M5.0 18.5 L5.3 18.8",
+        "M4.9 4.0 L5.1 14.9 M5.0 18.4 L5.3 18.6",
+    ],
+};

package/dist/glyphs/punctuation/punct-hyphen.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "-", 3 wobble variants. */
+export declare const punctHyphen: GlyphEntry;

package/dist/glyphs/punctuation/punct-hyphen.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "-", 3 wobble variants. */
+export const punctHyphen = {
+    width: 8,
+    variants: [
+        "M1 12 L7 12",
+        "M0.9 12.0 L7.0 11.9",
+        "M1.0 12.0 L7.0 12.0",
+    ],
+};

package/dist/glyphs/punctuation/punct-period.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: ".", 3 wobble variants. */
+export declare const punctPeriod: GlyphEntry;

package/dist/glyphs/punctuation/punct-period.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: ".", 3 wobble variants. */
+export const punctPeriod = {
+    width: 6,
+    variants: [
+        "M4 19.5 L4.2 19.7",
+        "M3.9 19.6 L4.2 19.8",
+        "M3.9 19.6 L4.1 19.6",
+    ],
+};

package/dist/glyphs/punctuation/punct-question.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "?", 3 wobble variants. */
+export declare const punctQuestion: GlyphEntry;

package/dist/glyphs/punctuation/punct-question.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "?", 3 wobble variants. */
+export const punctQuestion = {
+    width: 9,
+    variants: [
+        "M2 7.5 C 2 4.5 4.5 3.5 6.5 4.5 C 8.5 5.5 8.3 8 6.5 9.5 C 5.3 10.5 5 11.5 5 13.5 M5 17.5 L5.2 17.7",
+        "M2.0 7.4 C 2.0 4.6 4.6 3.5 6.4 4.4 C 8.5 5.5 8.3 8.1 6.4 9.6 C 5.4 10.5 5.1 11.4 4.9 13.6 M4.9 17.5 L5.3 17.8",
+        "M1.9 7.5 C 2.0 4.5 4.4 3.5 6.4 4.6 C 8.5 5.4 8.3 7.9 6.5 9.5 C 5.2 10.5 5.1 11.5 4.9 13.4 M5.0 17.4 L5.1 17.7",
+    ],
+};

package/dist/glyphs/types.d.ts

@@ -0,0 +1,5 @@
+export interface GlyphEntry {
+    width: number;
+    variants: string[];
+}
+export type GlyphDatabase = Record<string, GlyphEntry>;

package/dist/glyphs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { renderText, animateWriting, type RenderTextOptions } from "./renderer.js";
+export { attach, type AttachOptions } from "./observer.js";
+import { type RenderTextOptions } from "./renderer.js";
+import { type AttachOptions } from "./observer.js";
+export interface WriteOptions extends RenderTextOptions, AttachOptions {
+}
+/**
+ * One-call entry point: renders `text` into `target` and wires up the scroll-triggered
+ * draw-in animation. Pass `{ animate: false }` for static, fully-drawn output (no observer).
+ */
+export declare function write(target: HTMLElement | string, text: string, options?: WriteOptions): void;

package/dist/index.js

@@ -0,0 +1,16 @@
+export { renderText, animateWriting } from "./renderer.js";
+export { attach } from "./observer.js";
+import { renderText } from "./renderer.js";
+import { attach } from "./observer.js";
+/**
+ * One-call entry point: renders `text` into `target` and wires up the scroll-triggered
+ * draw-in animation. Pass `{ animate: false }` for static, fully-drawn output (no observer).
+ */
+export function write(target, text, options = {}) {
+    const el = typeof target === "string" ? document.querySelector(target) : target;
+    if (!el)
+        return;
+    el.innerHTML = renderText(text, options);
+    if (options.animate !== false)
+        attach(el, options);
+}

package/dist/observer.d.ts

@@ -0,0 +1,8 @@
+export interface AttachOptions {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    once?: boolean;
+}
+/** Wires an IntersectionObserver to a container so its hw-word svgs animate in once scrolled into view. */
+export declare function attach(el: HTMLElement, options?: AttachOptions): void;

package/dist/observer.js

@@ -0,0 +1,17 @@
+import { animateWriting } from "./renderer.js";
+/** Wires an IntersectionObserver to a container so its hw-word svgs animate in once scrolled into view. */
+export function attach(el, options = {}) {
+    const { once = true, ...observerOptions } = options;
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting)
+                continue;
+            for (const word of entry.target.querySelectorAll(".hw-word")) {
+                animateWriting(word);
+            }
+            if (once)
+                observer.unobserve(entry.target);
+        }
+    }, observerOptions);
+    observer.observe(el);
+}

package/dist/renderer.d.ts

@@ -0,0 +1,12 @@
+export interface RenderTextOptions {
+    /** Draw letters in via stroke-dashoffset when the word scrolls into view (default true). Set false for static, fully-drawn output. */
+    animate?: boolean;
+}
+/**
+ * Renders text as a sentence wrapper containing one <svg> per word.
+ * When animate (default), each word's letters draw in via stroke-dashoffset once `.hw-visible`
+ * is toggled on it — pass the result to observer.ts's `attach()` to trigger that on scroll.
+ */
+export declare function renderText(text: string, options?: RenderTextOptions): string;
+/** Toggles the class that starts the draw-in transition for a rendered word's strokes. */
+export declare function animateWriting(el: Element): void;

package/dist/renderer.js

@@ -0,0 +1,98 @@
+import { glyphs } from "./glyphs/glyphs.js";
+const PUNCTUATION = new Set([".", ",", "!", "?", "'", "-"]);
+const LETTER_HEIGHT = 24;
+const STAGGER_MS = 60;
+const STROKE_MS = 400;
+/** Tracks the last variant index picked per character so the same glyph never repeats back-to-back. */
+const lastVariant = new Map();
+function pickVariant(char, entry) {
+    const prev = lastVariant.get(char);
+    if (entry.variants.length === 1)
+        return 0;
+    let index = Math.floor(Math.random() * entry.variants.length);
+    while (index === prev) {
+        index = Math.floor(Math.random() * entry.variants.length);
+    }
+    lastVariant.set(char, index);
+    return index;
+}
+function splitWords(text) {
+    // Attach trailing punctuation to the preceding word (e.g. "word," stays one unit).
+    return text.split(/\s+/).filter((w) => w.length > 0);
+}
+const JITTER_ROTATE_DEG = 7;
+const JITTER_BASELINE = 1;
+const JITTER_SCALE = 0.1;
+/** Small per-instance wobble (rotation, baseline drift, scale) layered on top of the picked variant, so no two renders of the same letter sit identically even when they share a path. */
+function randomJitter() {
+    return {
+        rotate: (Math.random() * 2 - 1) * JITTER_ROTATE_DEG,
+        dy: (Math.random() * 2 - 1) * JITTER_BASELINE,
+        scale: 1 + (Math.random() * 2 - 1) * JITTER_SCALE,
+    };
+}
+function renderWord(word, delayOffset, animate) {
+    let x = 0;
+    const paths = [];
+    let letterIndex = 0;
+    for (const rawChar of word) {
+        const char = PUNCTUATION.has(rawChar)
+            ? rawChar
+            : glyphs[rawChar]
+                ? rawChar
+                : rawChar.toLowerCase();
+        const entry = glyphs[char];
+        if (!entry)
+            continue;
+        const variantIndex = pickVariant(char, entry);
+        const d = entry.variants[variantIndex];
+        const style = animate
+            ? `stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset ${STROKE_MS}ms ease ${(delayOffset + letterIndex) * STAGGER_MS}ms;`
+            : "";
+        const { rotate, dy, scale } = randomJitter();
+        const cx = entry.width / 2;
+        const cy = LETTER_HEIGHT / 2;
+        // Position first, then rotate/scale around the letter's own center (not the SVG origin)
+        // so the jitter can't nudge later letters in long words out of position.
+        const transform = `translate(${x} ${dy.toFixed(2)}) translate(${cx} ${cy}) ` +
+            `rotate(${rotate.toFixed(1)}) scale(${scale.toFixed(3)}) translate(${-cx} ${-cy})`;
+        paths.push(`<path d="${d}" transform="${transform}" stroke="var(--hw-color, #000)" fill="none" ` +
+            `stroke-width="2" stroke-linecap="round" pathLength="1" style="${style}" class="hw-letter" />`);
+        x += entry.width;
+        letterIndex++;
+    }
+    const svg = `<svg class="hw-word" xmlns="http://www.w3.org/2000/svg" width="${x}" height="${LETTER_HEIGHT}" ` +
+        `viewBox="0 0 ${x} ${LETTER_HEIGHT}" aria-hidden="true">${paths.join("")}</svg>`;
+    return { svg, letterCount: letterIndex };
+}
+/**
+ * Renders text as a sentence wrapper containing one <svg> per word.
+ * When animate (default), each word's letters draw in via stroke-dashoffset once `.hw-visible`
+ * is toggled on it — pass the result to observer.ts's `attach()` to trigger that on scroll.
+ */
+export function renderText(text, options = {}) {
+    const { animate = true } = options;
+    const words = splitWords(text);
+    let delayOffset = 0;
+    const wordSvgs = [];
+    for (const word of words) {
+        const { svg, letterCount } = renderWord(word, delayOffset, animate);
+        wordSvgs.push(svg);
+        delayOffset += letterCount;
+    }
+    return `<span class="hw-sentence" aria-label="${escapeAttr(text)}">${wordSvgs.join(" ")}</span>`;
+}
+function escapeAttr(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+/** Toggles the class that starts the draw-in transition for a rendered word's strokes. */
+export function animateWriting(el) {
+    el.classList.add("hw-visible");
+    for (const path of el.querySelectorAll(".hw-letter")) {
+        path.style.strokeDashoffset = "0";
+    }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "strokes-js",
+  "version": "0.1.0",
+  "description": "Renders text as animated hand-drawn SVG",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a-elhaag/strokes.js.git"
+  },
+  "homepage": "https://github.com/a-elhaag/strokes.js#readme",
+  "bugs": "https://github.com/a-elhaag/strokes.js/issues",
+  "keywords": [
+    "handwriting",
+    "svg",
+    "animation",
+    "text",
+    "typography"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^7.0.2"
+  }
+}