diff --git a/packages/fonts/README.md b/packages/fonts/README.md
index c4eaa86d..dad3b75a 100644
--- a/packages/fonts/README.md
+++ b/packages/fonts/README.md
@@ -44,32 +44,57 @@ scene.add({ polygons, objectUrls: [], warnings: [], dispose() {} });
 
 ## `composeText` — WordArt composer
 
-`composeText` accepts every `textPolygons` option plus the layout, decoration, and warp controls below. `\n` in `text` starts a new line.
+`composeText(font, text, options)` is the full composer (`\n` starts a new line). The options group into five concerns instead of one flat bag:
 
 ```ts
-import { composeText } from "@layoutit/polycss-fonts";
+import { composeText, resolveFace } from "@layoutit/polycss-fonts";
 
 const polygons = composeText(font, "Poly\nCSS", {
-  size: 100,
-  depth: 24,
-  align: "center",
-  warp: { shape: "arch", amount: 0.6 },
-  backColor: "#3a86ff",          // layered: distinct back-cap color…
-  oblique: [14, -14],            // …shifted for the retro front-A / back-B leaning block
+  // 1 · type & layout
+  size: 100, depth: 24, align: "center", scale: [1, 1],
+  letterSpacing: 0, lineHeight: 1.25, underline: false, strike: false,
+  warp: { shape: "arch", amount: 0.6 }, simplify: 0, merge: false,
+
+  // 2 · cross-section / edge profile (one union)
+  profile: { edge: "bevel", coverage: "front" },
+
+  // 3 · per-face material — one `Face` shape for all three
+  faces: {
+    front: resolveFace({ kind: "gradient", from: "#ffe14d", to: "#ff7a1a" }),
+    sides: { color: "#7c4a12" },
+    back:  { color: "#3a86ff" },
+  },
+
+  // 4 · outline
+  outline: { color: "#1a1a2e", width: 3 },
 });
 ```
 
-| Option | Default | Notes |
-|---|---|---|
-| `lineHeight` | `1.25` | Line advance as a multiple of `size`. |
-| `align` | `"center"` | `"left"` · `"center"` · `"right"`. |
-| `scaleX` / `scaleY` | `1` | Horizontal / vertical glyph scale (Photoshop ↔ / ↕). |
-| `underline` / `strike` | `false` | Decoration bars; they follow the active warp. |
-| `warp` | — | `{ shape, amount }`. `shape`: `none`, `arch`, `archDown`, `arc`, `wave`, `bulge`, `cone`, `slantUp`, `slantDown`. `amount` is `0..1`. |
-| `simplify` | `0` | Outline simplification tolerance (world units). Hole-less glyphs only — holed glyphs (`O`, `P`, `a`…) stay full-detail so counters never collapse. |
-| `merge` | `false` | Merge coplanar same-color cap triangles into larger polygons (~⅓ fewer DOM nodes). Has a CPU cost, so off by default. |
-| `backColor` | `color` | Back-cap color — set it apart from `color` for a layered two-tone look. |
-| `oblique` | `[0, 0]` | `[rightward, upward]` shift of the back cap relative to the front (world units). |
+| Group | Options |
+|---|---|
+| **Layout** | `size` · `depth` (0 = flat slab, no edges) · `curveSteps` · `letterSpacing` · `lineHeight` · `align` · `scale: [x,y]` · `underline` · `strike` · `warp` · `simplify` · `merge` |
+| **`profile`** | `"flat"` · `{ edge: "bevel"\|"round", raised?, segments? }` · `{ curve: CubicBezier, segments? }` |
+| **`faces`** | `{ front?, sides?, back? }` · a single `Face` · `FaceStop[]` |
+| **`outline`** | `{ color, width }` — a colored halo around the front face |
+
+- **`profile` (shape)** and **`faces` (color)** are independent functions of the same depth axis `t ∈ [0,1]` (0 = front, 1 = back). `edge` bevels/rounds the edges (`raised` flips a round to a convex dome); `curve` is a custom edge from a CSS `cubic-bezier` easing.
+- **`Face`** = `{ color?, texture?, tile? }`. `texture` is an already-rendered URL/data-URL UV-mapped across the whole word; `tile` repeats it every N units (blocks) vs stretching (gradients/photos).
+- **`faces` resolves to material stops down the axis** — each polygon takes the nearest stop to its depth:
+  - `{ front, sides, back }` → 3 stops at `{0, .5, 1}` (omit `sides` → the front rounds straight into the back, **no side band**).
+  - a single `Face` → one material for the whole solid.
+  - `FaceStop[]` (`Face & { at }`) → **N** materials distributed down the axis.
+- **Flat drop shadow** — `depth: 0` + `faces.back.offset: [x, y]` with a distinct `back.color`.
+
+### Fills — `resolveFace` & `makeFillTexture` (browser)
+
+`composeText` is pure and takes already-rendered textures. The browser helpers turn a high-level fill into a `Face`:
+
+```ts
+resolveFace({ kind: "gradient", from: "#ffe14d", to: "#ff7a1a", angle: 270 })
+// → { color?, texture: "data:image/png;…" }
+```
+
+`FaceFillSpec` (the `kind`): `"solid"` · `"gradient"` (`from`, `to`, `angle?`) · `"rainbow"` (`angle?`) · `"texture"` (`url`, `tile?`) · `"image"` (`src`). `makeFillTexture(FillSpec)` is the lower-level canvas painter if you want the data URL directly.
 
 ## Scope / limitations
 
diff --git a/packages/fonts/src/composeText.test.ts b/packages/fonts/src/composeText.test.ts
index 9165f4c1..23196927 100644
--- a/packages/fonts/src/composeText.test.ts
+++ b/packages/fonts/src/composeText.test.ts
@@ -89,22 +89,22 @@ describe("composeText", () => {
   });
 
   it("round/bevel hold their counters too (inset never overruns the hole)", () => {
-    for (const profile of ["round", "bevel"] as const) {
-      expect(composeText(roboto, "o", { profile }).length).toBeGreaterThan(0);
-      expect(composeText(roboto, "B", { profile, depth: 30 }).length).toBeGreaterThan(0);
+    for (const edge of ["round", "bevel"] as const) {
+      expect(composeText(roboto, "o", { profile: { edge } }).length).toBeGreaterThan(0);
+      expect(composeText(roboto, "B", { profile: { edge }, depth: 30 }).length).toBeGreaterThan(0);
     }
   });
 
   // ── regression: scale / merge / layered ─────────────────────────────────
   it("horizontal scale widens the run", () => {
     const a = bounds(composeText(roboto, "AV"));
-    const b = bounds(composeText(roboto, "AV", { scaleX: 2 }));
+    const b = bounds(composeText(roboto, "AV", { scale: [2, 1] }));
     expect(b.maxY - b.minY).toBeGreaterThan((a.maxY - a.minY) * 1.6);
   });
 
   it("vertical scale heightens the glyphs", () => {
     const a = bounds(composeText(roboto, "A"));
-    const b = bounds(composeText(roboto, "A", { scaleY: 2 }));
+    const b = bounds(composeText(roboto, "A", { scale: [1, 2] }));
     expect(b.maxX - b.minX).toBeGreaterThan((a.maxX - a.minX) * 1.6);
   });
 
@@ -114,10 +114,132 @@ describe("composeText", () => {
     expect(merged.length).toBeLessThan(base.length);
   });
 
-  it("layered back color + oblique recolors and offsets the back", () => {
-    const polys = composeText(roboto, "o", { depth: 10, color: "#ff0000", backColor: "#00ff00", oblique: [12, -12] });
+  it("flat shadow (depth 0) offsets a recolored back layer", () => {
+    const polys = composeText(roboto, "o", { depth: 0, faces: { front: { color: "#ff0000" }, back: { color: "#00ff00", offset: [12, -12] } } });
     const colors = new Set(polys.map((p) => p.color));
-    expect(colors.has("#ff0000")).toBe(true); // front cap
-    expect(colors.has("#00ff00")).toBe(true); // back cap
+    expect(colors.has("#ff0000")).toBe(true); // front
+    expect(colors.has("#00ff00")).toBe(true); // offset back
+  });
+
+  // ── regression: WordArt fills / outline / flat-layer shadow ──────────────
+  it("a face texture UV-maps the front cap across the whole word", () => {
+    const tex = "data:image/png;base64,AAAA";
+    const polys = composeText(roboto, "Hi", { faces: { front: { texture: tex } } });
+    const faces = polys.filter((p) => p.texture === tex);
+    expect(faces.length).toBeGreaterThan(0);
+    // Every textured face carries one UV per vertex…
+    expect(faces.every((p) => p.uvs?.length === p.vertices.length)).toBe(true);
+    // …and the UVs span the whole word (reach both extremes of 0..1).
+    const us = faces.flatMap((p) => p.uvs!.map((uv) => uv[0]));
+    expect(Math.min(...us)).toBeLessThan(0.05);
+    expect(Math.max(...us)).toBeGreaterThan(0.95);
+    // Walls stay untextured.
+    expect(polys.some((p) => !p.texture)).toBe(true);
+  });
+
+  it("solid (no faceTexture) leaves the face untextured", () => {
+    const polys = composeText(roboto, "Hi");
+    expect(polys.every((p) => !p.texture && !p.uvs)).toBe(true);
+  });
+
+  it("outline adds a halo silhouette in the outline color", () => {
+    const plain = composeText(roboto, "o").length;
+    const polys = composeText(roboto, "o", { outline: { color: "#123456", width: 3 } });
+    expect(polys.length).toBeGreaterThan(plain);
+    expect(polys.some((p) => p.color === "#123456")).toBe(true);
+  });
+
+  it("textures each face independently (front / sides / back)", () => {
+    const polys = composeText(roboto, "Hi", {
+      depth: 20,
+      faces: {
+        front: { texture: "/t/dirt.svg" },
+        sides: { texture: "/t/wood.svg" },
+        back: { texture: "/t/brick.svg" },
+      },
+    });
+    const urls = new Set(polys.map((p) => p.texture).filter(Boolean));
+    expect(urls.has("/t/dirt.svg")).toBe(true);  // front cap
+    expect(urls.has("/t/brick.svg")).toBe(true); // back cap
+    expect(urls.has("/t/wood.svg")).toBe(true);  // side walls
+  });
+
+  it("tiling repeats the texture (UV > 1 + repeat wrap) vs stretch", () => {
+    const stretched = composeText(roboto, "WWWW", { faces: { front: { texture: "/t/dirt.svg" } } });
+    const tiled = composeText(roboto, "WWWW", { faces: { front: { texture: "/t/dirt.svg", tile: 20 } } });
+    const maxU = (ps: ReturnType<typeof composeText>) =>
+      Math.max(...ps.filter((p) => p.texture).flatMap((p) => p.uvs!.map((uv) => uv[0])));
+    expect(maxU(stretched)).toBeLessThanOrEqual(1.0001); // normalized to word
+    expect(maxU(tiled)).toBeGreaterThan(1.5);            // repeats across the word
+    expect(tiled.find((p) => p.texture)?.textureWrap?.s).toBe("repeat");
+  });
+
+  it("axial faces band the solid by depth (front cap / body / back cap)", () => {
+    const polys = composeText(roboto, "o", {
+      depth: 30,
+      faces: { front: { color: "#ff0000" }, sides: { color: "#00ff00" }, back: { color: "#0000ff" } },
+    });
+    const front = polys.filter((p) => p.color === "#ff0000");
+    const side = polys.filter((p) => p.color === "#00ff00");
+    const back = polys.filter((p) => p.color === "#0000ff");
+    expect(front.length).toBeGreaterThan(0); // front cap (t≈0)
+    expect(side.length).toBeGreaterThan(0);  // body walls (t≈0.5)
+    expect(back.length).toBeGreaterThan(0);  // back cap (t≈1)
+    // The front cap sits at the most-forward z; the back cap at the most-back.
+    const frontZ = Math.max(...front.flatMap((p) => p.vertices.map((v) => v[2])));
+    const backZ = Math.min(...back.flatMap((p) => p.vertices.map((v) => v[2])));
+    expect(frontZ).toBeGreaterThan(backZ);
+  });
+
+  it("omitting `sides` makes the front meet the back (no side band)", () => {
+    const withSide = composeText(roboto, "o", { depth: 30, faces: { front: { color: "#ff0000" }, sides: { color: "#00ff00" }, back: { color: "#0000ff" } } });
+    const noSide = composeText(roboto, "o", { depth: 30, faces: { front: { color: "#ff0000" }, back: { color: "#0000ff" } } });
+    expect(withSide.some((p) => p.color === "#00ff00")).toBe(true);   // has a side band
+    expect(noSide.some((p) => p.color === "#00ff00")).toBe(false);    // none
+    // Same geometry, but the side band's polys are now front/back instead.
+    expect(noSide.length).toBe(withSide.length);
+    expect(noSide.filter((p) => p.color !== "#00ff00").length).toBeGreaterThan(withSide.filter((p) => p.color !== "#00ff00").length);
+  });
+
+  it("a face set to `false` is covered by its neighbour (no hole, no own color)", () => {
+    const faces = { front: { color: "#ff0000" }, sides: { color: "#00ff00" }, back: { color: "#0000ff" } };
+    const full = composeText(roboto, "o", { depth: 20, faces });
+    const noBack = composeText(roboto, "o", { depth: 20, faces: { ...faces, back: false } });
+    // Geometry is intact (same polygon count → no hole at the back)…
+    expect(noBack.length).toBe(full.length);
+    // …the back has no color of its own…
+    expect(noBack.some((p) => p.color === "#0000ff")).toBe(false);
+    // …and the back cap is covered by the nearest active face (the side).
+    expect(noBack.filter((p) => p.color === "#00ff00").length).toBeGreaterThan(full.filter((p) => p.color === "#00ff00").length);
+  });
+
+  it("an N-stop array distributes materials down the axis", () => {
+    const polys = composeText(roboto, "I", {
+      depth: 40,
+      faces: [
+        { at: 0, color: "#111111" },
+        { at: 0.5, color: "#777777" },
+        { at: 1, color: "#eeeeee" },
+      ],
+    });
+    const colors = new Set(polys.map((p) => p.color));
+    expect(colors.has("#111111")).toBe(true);
+    expect(colors.has("#777777")).toBe(true);
+    expect(colors.has("#eeeeee")).toBe(true);
+  });
+
+  it("custom cubic-bezier profile differs from a round edge", () => {
+    const round = composeText(roboto, "o", { depth: 24, profile: { edge: "round" } });
+    const custom = composeText(roboto, "o", { depth: 24, profile: { curve: [0.1, 0.9, 0.2, 1] } });
+    const hash = (ps: ReturnType<typeof composeText>) => ps.map((p) => p.vertices.flat().join()).join("|");
+    expect(round.length).toBe(custom.length);
+    expect(hash(round)).not.toBe(hash(custom));
+  });
+
+  it("flat (depth 0) drops the side walls vs an extruded depth", () => {
+    const walled = composeText(roboto, "o", { depth: 12, faces: { back: { color: "#00ff00" } } });
+    const flat = composeText(roboto, "o", { depth: 0, faces: { back: { color: "#00ff00", offset: [10, -10] } } });
+    expect(flat.length).toBeLessThan(walled.length);
+    expect(flat.some((p) => p.color === "#00ff00")).toBe(true); // shadow layer kept
   });
 });
diff --git a/packages/fonts/src/composeText.ts b/packages/fonts/src/composeText.ts
index 32764a9e..32cf1613 100644
--- a/packages/fonts/src/composeText.ts
+++ b/packages/fonts/src/composeText.ts
@@ -16,11 +16,13 @@ import {
   groupShapes,
   shade,
   simplifyContour,
+  type CubicBezier,
   type Contour,
+  type ExtrudeProfile,
+  type MaterialStop,
   type Pt,
   type Shape,
 } from "./extrude";
-import type { TextPolygonsOptions } from "./textPolygons";
 
 /** Classic WordArt envelope shapes. */
 export type WarpShape =
@@ -40,40 +42,120 @@ export interface WarpOptions {
   amount?: number;
 }
 
-export interface ComposeTextOptions extends TextPolygonsOptions {
+/** A paintable face: a solid color and/or an already-rendered texture. */
+export interface Face {
+  /** Solid color; also the fallback if the texture fails to load. */
+  color?: string;
+  /**
+   * Texture URL / data URL — a gradient, rainbow, image, or block texture
+   * already rendered (see `resolveFace` / `makeFillTexture`). UV-mapped across
+   * the whole word so the fill flows over every glyph.
+   */
+  texture?: string;
+  /** Tile the texture every N world units (block look); omit to stretch one copy. */
+  tile?: number;
+}
+
+/** The back face, which can be offset for the flat WordArt drop shadow (depth 0). */
+export interface BackFace extends Face {
+  /** [rightward, upward] shift of the back relative to the front (world units). */
+  offset?: [number, number];
+}
+
+/** A `Face` pinned at a position on the depth axis (`at`: 0 = front, 1 = back). */
+export interface FaceStop extends Face {
+  at: number;
+}
+
+/**
+ * Extrusion cross-section / edge profile:
+ * - `"flat"` — straight slab (no edge shaping).
+ * - `{ edge }` — a bevel chamfer or round bullnose on the edge (mirrored
+ *   front/back). `raised` flips a round to a convex dome.
+ * - `{ curve }` — a custom edge whose cross-section is a CSS cubic-bezier easing.
+ */
+export type Profile =
+  | "flat"
+  | { edge: "bevel" | "round"; raised?: boolean; segments?: number }
+  | { curve: CubicBezier; segments?: number };
+
+export interface ComposeTextOptions {
+  /** Cap-em size in world units. Defaults to 100. */
+  size?: number;
+  /** Extrusion depth (world units). 0 = a flat slab with no edges. Defaults to size*0.2. */
+  depth?: number;
+  /** Bézier flattening: segments per glyph curve. Higher = smoother. Defaults to 6. */
+  curveSteps?: number;
+  /** Extra space between glyphs (world units). */
+  letterSpacing?: number;
   /** Line advance as a multiple of `size`. Defaults to 1.25. */
   lineHeight?: number;
   /** Horizontal alignment of each line within the block. Defaults to "center". */
   align?: "left" | "center" | "right";
-  /** Horizontal glyph scale (Photoshop ↔). Defaults to 1. */
-  scaleX?: number;
-  /** Vertical glyph scale (Photoshop ↕). Defaults to 1. */
-  scaleY?: number;
-  /** Draw an underline bar under each line. */
+  /** Non-uniform glyph stretch [x, y] (WordArt-style). Defaults to [1, 1]. */
+  scale?: [number, number];
+  /** Draw an underline / strikethrough bar under each line. */
   underline?: boolean;
-  /** Draw a strikethrough bar across each line. */
   strike?: boolean;
   /** WordArt envelope warp applied to the whole block. */
   warp?: WarpOptions;
-  /**
-   * Outline simplification tolerance in world units (0 = exact). Drops points
-   * within this distance of their neighbours — fewer polygons, blockier glyphs.
-   */
+  /** Outline simplification tolerance (world units, 0 = exact; hole-less glyphs only). */
   simplify?: number;
-  /**
-   * Merge coplanar same-color adjacent triangles into larger convex polygons
-   * (fewer DOM elements). Collapses the triangulated caps; ~⅓ fewer polygons
-   * on flat text. Has a CPU cost, so it's off by default.
-   */
+  /** Merge coplanar same-color cap triangles into larger polygons (fewer DOM nodes). */
   merge?: boolean;
-  /** Back cap color. Set differently from `color` for a layered look. */
-  backColor?: string;
+  /** Extrusion cross-section / edge profile. Defaults to "flat". */
+  profile?: Profile;
   /**
-   * Oblique shift of the back relative to the front ([rightward, upward], world
-   * units). Non-zero + a distinct `backColor` gives the retro front-A / back-B
-   * leaning block.
+   * Material along the depth axis. Three shapes, simplest → most general:
+   * - `{ front?, sides?, back? }` — the classic faces (sugar for 3 stops). Omit
+   *   `sides` for no side band (front rounds into back), or set `sides` / `back`
+   *   to `false` to skip that geometry entirely.
+   * - a single `Face` — one material for the whole solid.
+   * - `FaceStop[]` — N materials distributed down the axis (`at` 0→1).
    */
-  oblique?: [number, number];
+  faces?: Face | FaceStop[] | { front?: Face; sides?: Face | false; back?: BackFace | false };
+  /** Outline stroke drawn as a halo around the front face. */
+  outline?: { color: string; width: number };
+}
+
+function resolveProfile(p: Profile | undefined): {
+  profile: ExtrudeProfile;
+  roundConvex?: boolean;
+  profileBezier?: CubicBezier;
+  segments?: number;
+} {
+  if (!p || p === "flat") return { profile: "flat" };
+  if ("edge" in p) return { profile: p.edge, roundConvex: p.raised, segments: p.segments };
+  return { profile: "custom", profileBezier: p.curve, segments: p.segments };
+}
+
+/**
+ * Normalize the `faces` option into sorted material stops. A face set to `false`
+ * (or `sides` omitted) contributes no stop — the geometry is still rendered, but
+ * the nearest remaining face covers it (no hole, just fewer colour bands). The
+ * active faces split the depth axis evenly (stop i centered at `(i+½)/k`).
+ */
+function resolveStops(
+  faces: ComposeTextOptions["faces"],
+  defaultFront: string,
+): { stops: MaterialStop[]; backOffset?: [number, number] } {
+  const stop = (f: Face, at: number, color: string): MaterialStop => ({ at, color: f.color ?? color, texture: f.texture, tile: f.tile });
+  if (Array.isArray(faces)) {
+    return { stops: faces.length ? faces.map((f) => stop(f, f.at, defaultFront)) : [{ at: 0.5, color: defaultFront }] };
+  }
+  if (faces && ("front" in faces || "sides" in faces || "back" in faces)) {
+    const front = faces.front ?? {};
+    const fc = front.color ?? defaultFront;
+    const items: { f: Face; color: string }[] = [{ f: front, color: fc }];
+    if (faces.sides) items.push({ f: faces.sides, color: shade(fc, 0.72) });
+    if (faces.back !== false) items.push({ f: faces.back ?? {}, color: fc });
+    const k = items.length;
+    const stops = items.map((it, i) => stop(it.f, (i + 0.5) / k, it.color));
+    return { stops, backOffset: faces.back ? faces.back.offset : undefined };
+  }
+  if (faces) return { stops: [stop(faces as Face, 0.5, defaultFront)] }; // single Face → uniform
+  // Default: the classic gold front / darker sides / matching back, even thirds.
+  return { stops: [{ at: 1 / 6, color: defaultFront }, { at: 0.5, color: shade(defaultFront, 0.72) }, { at: 5 / 6, color: defaultFront }] };
 }
 
 type WarpFn = (p: Pt) => Pt;
@@ -83,15 +165,17 @@ export function composeText(font: ParsedFont, text: string, options: ComposeText
   const depth = options.depth ?? size * 0.2;
   const curveSteps = Math.max(1, Math.round(options.curveSteps ?? 6));
   const letterSpacing = options.letterSpacing ?? 0;
-  const color = options.color ?? "#d4a82a";
-  const sideColor = options.sideColor ?? shade(color, 0.72);
-  const profile = options.profile ?? "flat";
-  const profileSegments = Math.max(1, Math.round(options.profileSegments ?? 6));
   const lineHeight = (options.lineHeight ?? 1.25) * size;
   const align = options.align ?? "center";
   const simplify = Math.max(0, options.simplify ?? 0);
-  const scaleX = options.scaleX ?? 1;
-  const scaleY = options.scaleY ?? 1;
+  const [scaleX, scaleY] = options.scale ?? [1, 1];
+
+  const { stops, backOffset } = resolveStops(options.faces, "#d4a82a");
+
+  const prof = resolveProfile(options.profile);
+  const profileSegments = Math.max(1, Math.round(prof.segments ?? 6));
+  // depth 0 → a flat slab with no side walls (and a place for the offset shadow).
+  const flat = depth <= 0;
 
   const scale = size / font.unitsPerEm;
   const barThickness = size * 0.06;
@@ -150,15 +234,31 @@ export function composeText(font: ParsedFont, text: string, options: ComposeText
     }
   });
 
+  // Whole-word front-plane bounds, so the face fill UV-maps across every glyph.
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const s of shapes) {
+    for (const [x, y] of s.outer) {
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  const faceUvBounds = shapes.length ? { minX, minY, maxX, maxY } : undefined;
+
   const polygons = extrudeContours(shapes, {
     depth,
-    profile,
+    profile: prof.profile,
+    roundConvex: prof.roundConvex,
+    profileBezier: prof.profileBezier,
     profileSegments,
     maxInset: size * 0.045,
-    color,
-    sideColor,
-    backColor: options.backColor,
-    oblique: options.oblique,
+    stops,
+    faceUvBounds,
+    backOffset,
+    layered: flat,
+    outlineColor: options.outline?.color,
+    outlineWidth: options.outline?.width,
   });
   return options.merge ? mergePolygons(polygons) : polygons;
 }
diff --git a/packages/fonts/src/extrude.ts b/packages/fonts/src/extrude.ts
index 29553ea9..ff323cc2 100644
--- a/packages/fonts/src/extrude.ts
+++ b/packages/fonts/src/extrude.ts
@@ -12,44 +12,98 @@
  * wound in reverse to stay outward-facing (PolyCSS hides back-faces).
  */
 import earcut from "earcut";
-import type { Polygon, Vec3 } from "@layoutit/polycss-core";
+import type { Polygon, Vec2, Vec3 } from "@layoutit/polycss-core";
 
 export type Pt = [number, number];
 export type Contour = Pt[];
 
 /**
  * Cross-section of the extrusion along its depth:
- * - "flat"  — straight slab with vertical walls (a depth-only extrude).
- * - "round" — a quarter-circle round-over on the front/back edges (bullnose).
- * - "bevel" — a straight 45° chamfer on the front/back edges.
+ * - "flat"   — straight slab with vertical walls (a depth-only extrude).
+ * - "round"  — a quarter-circle round-over on the front/back edges (bullnose).
+ * - "bevel"  — a straight 45° chamfer on the front/back edges.
+ * - "custom" — the edge profile is the CSS easing curve `profileBezier`
+ *   (`cubic-bezier(x1,y1,x2,y2)` semantics), sampled along the depth.
  */
-export type ExtrudeProfile = "flat" | "round" | "bevel";
+export type ExtrudeProfile = "flat" | "round" | "bevel" | "custom";
+
+/** CSS cubic-bezier control points [x1, y1, x2, y2] (P0=(0,0), P3=(1,1)). */
+export type CubicBezier = [number, number, number, number];
+
+/**
+ * CSS `cubic-bezier(x1,y1,x2,y2)` easing → a function mapping x∈[0,1] to y.
+ * Solves x(t)=x by Newton's method (same approach browsers use), then reads y.
+ */
+export function cssCubicBezier([x1, y1, x2, y2]: CubicBezier): (x: number) => number {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t;
+  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t;
+  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
+  return (x: number) => {
+    const xc = Math.min(1, Math.max(0, x));
+    let t = xc;
+    for (let i = 0; i < 8; i++) {
+      const err = sampleX(t) - xc;
+      if (Math.abs(err) < 1e-6) break;
+      const d = slopeX(t);
+      if (Math.abs(d) < 1e-6) break;
+      t -= err / d;
+    }
+    return sampleY(Math.min(1, Math.max(0, t)));
+  };
+}
 
 export interface Shape {
   outer: Contour;
   holes: Contour[];
 }
 
+/**
+ * A material stop on the axial (depth) axis: `at` runs 0 (front face) → 1 (back
+ * face). Each emitted polygon is colored/textured by the nearest stop to its
+ * own depth, so any number of stops can band the solid down its length.
+ */
+export interface MaterialStop {
+  at: number;
+  /** Solid color (and fallback if a texture fails to load). */
+  color?: string;
+  /** Texture URL / data URL — UV-mapped across the word (caps & stretch walls). */
+  texture?: string;
+  /** Tile the texture every N world units (block look) instead of stretching. */
+  tile?: number;
+}
+
 export interface ExtrudeOptions {
   depth: number;
   profile: ExtrudeProfile;
   profileSegments: number;
-  /** Cap on inward edge inset (keeps round/bevel from pinching thin stems). */
-  maxInset: number;
-  /** Front cap color. */
-  color: string;
-  /** Side-wall color. */
-  sideColor: string;
-  /** Back cap color. Defaults to `color`. Set differently for a layered look. */
-  backColor?: string;
+  /** Round only: flip the arc to a raised/convex bullnose (default concave). */
+  roundConvex?: boolean;
   /**
-   * Oblique in-plane shift of the back relative to the front, in world units
-   * ([rightward, upward]). Non-zero turns the extrude into a leaning block so
-   * the differently-colored back peeks out (classic retro 3D / drop shadow).
+   * Custom edge profile (profile === "custom"): a CSS cubic-bezier easing whose
+   * curve is the edge cross-section, sampled over `profileSegments`.
    */
-  oblique?: [number, number];
+  profileBezier?: CubicBezier;
+  /** Cap on inward edge inset (keeps round/bevel from pinching thin stems). */
+  maxInset: number;
+  /** Material stops down the depth axis (≥1). Each polygon takes the nearest. */
+  stops: MaterialStop[];
+  /** Type-plane bounds the face UVs normalize against (the whole word). */
+  faceUvBounds?: { minX: number; minY: number; maxX: number; maxY: number };
+  /** Outline stroke color, drawn as a halo just behind the front face. */
+  outlineColor?: string;
+  /** Outline stroke width in world units (only used with `outlineColor`). */
+  outlineWidth?: number;
+  /** [rightward, upward] in-plane shift of the back cap — the flat drop shadow. */
+  backOffset?: [number, number];
   /** Depth offset applied to the whole shape (for layered/offset effects). */
   zOffset?: number;
+  /**
+   * Flat two-layer mode: emit only the front cap + an offset back cap, with no
+   * connecting side walls — the classic WordArt "two flat meshes" drop shadow.
+   */
+  layered?: boolean;
 }
 
 interface Ring {
@@ -61,23 +115,50 @@ const toWorld = (p: Pt, z: number): Vec3 => [-p[1], p[0], z];
 
 /** Extrude pre-grouped 2D shapes (type-plane, world units) into polygons. */
 export function extrudeContours(shapes: Shape[], opts: ExtrudeOptions): Polygon[] {
-  const { depth, profile, profileSegments, maxInset, color, sideColor } = opts;
-  const backColor = opts.backColor ?? color;
-  const [obx, oby] = opts.oblique ?? [0, 0];
+  const { profile, profileSegments, maxInset } = opts;
+  const layered = opts.layered ?? false;
   const zCenter = opts.zOffset ?? 0;
+  // Layered mode forces a minimum front/back separation so the offset shadow
+  // sits behind the face even when depth is ~0.
+  const depth = layered ? Math.max(opts.depth, 1) : opts.depth;
   const frontZ = zCenter + depth / 2;
   const backZ = zCenter - depth / 2;
-  const rings = buildRings(profile, frontZ, backZ, depth, profileSegments, maxInset);
+  const rings = buildRings(profile, frontZ, backZ, depth, profileSegments, maxInset, opts.roundConvex ?? false, opts.profileBezier);
   const polygons: Polygon[] = [];
 
-  // Each ring is shifted in-plane proportional to how far back it sits, so the
-  // back leans away from the front by the full oblique offset.
-  const obliqueAt = (z: number): Pt => {
-    const t = depth > 0 ? (frontZ - z) / depth : 0;
-    return [obx * t, oby * t];
-  };
+  const ZERO: Pt = [0, 0];
+  const backOffset = opts.backOffset ?? ZERO;
   const place = (p: Pt, z: number, o: Pt): Vec3 => toWorld([p[0] + o[0], p[1] + o[1]], z);
 
+  // Face UV: normalize a type-plane point to the whole-word bounds (v=0 bottom,
+  // OBJ convention — matches PolyCSS UV expectations).
+  const fb = opts.faceUvBounds;
+  const faceW = fb ? Math.max(fb.maxX - fb.minX, 1e-6) : 1;
+  const faceH = fb ? Math.max(fb.maxY - fb.minY, 1e-6) : 1;
+  // tile > 0 → repeat the texture every `tile` world units (crisp block look);
+  // tile === 0 → stretch one copy across the whole word (gradient / photo).
+  const uvAt = (p: Pt, tile: number): Vec2 => tile > 0
+    ? [(p[0] - fb!.minX) / tile, (p[1] - fb!.minY) / tile]
+    : [Math.min(1, Math.max(0, (p[0] - fb!.minX) / faceW)), Math.min(1, Math.max(0, (p[1] - fb!.minY) / faceH))];
+  const REPEAT = { s: "repeat", t: "repeat" } as const;
+  const outlineWidth = opts.outlineColor ? Math.max(0, opts.outlineWidth ?? 0) : 0;
+
+  // Material by axial position t (0 = front face, 1 = back face): nearest stop.
+  const stops = opts.stops.length ? [...opts.stops].sort((a, b) => a.at - b.at) : [{ at: 0.5 }];
+  const materialAt = (t: number): MaterialStop => {
+    let best = stops[0];
+    let bestD = Infinity;
+    // `<=` so a tie (a band exactly on a boundary, e.g. the single flat wall at
+    // t=0.5 between two even stops) resolves toward the deeper stop — the wall
+    // takes the side/back rather than the front.
+    for (const s of stops) {
+      const d = Math.abs(s.at - t);
+      if (d <= bestD) { bestD = d; best = s; }
+    }
+    return best;
+  };
+  const tOf = (z: number) => (depth > 0 ? Math.min(1, Math.max(0, (frontZ - z) / depth)) : 0);
+
   const maxRingInset = rings.reduce((m, r) => Math.max(m, r.inset), 0);
 
   for (const shape of shapes) {
@@ -91,53 +172,93 @@ export function extrudeContours(shapes: Shape[], opts: ExtrudeOptions): Polygon[
       : 1;
     const si = (inset: number) => inset * insetScale;
 
-    const cap = (inset: number, z: number, flip: boolean, capColor: string) => {
-      const o = obliqueAt(z);
+    // Emit a flat cap of `contours` at depth `z`, shifted in-plane by `o`,
+    // painted with `mat` (UV-mapped to the word when it carries a texture).
+    const cap = (offset: number, z: number, o: Pt, flip: boolean, mat: MaterialStop) => {
       const flat: number[] = [];
       const holeIndices: number[] = [];
       for (let r = 0; r < contours.length; r++) {
         if (r > 0) holeIndices.push(flat.length / 2);
-        for (const [x, y] of offsetContour(contours[r], si(inset))) flat.push(x, y);
+        for (const [x, y] of offsetContour(contours[r], offset)) flat.push(x, y);
       }
       const tris = earcut(flat, holeIndices, 2);
       const vert = (i: number): Pt => [flat[i * 2], flat[i * 2 + 1]];
+      const tile = mat.tile ?? 0;
       for (let t = 0; t < tris.length; t += 3) {
         const a = vert(tris[t]);
         const b = vert(tris[t + 1]);
         const c = vert(tris[t + 2]);
         const tri = flip ? [a, b, c] : [a, c, b];
-        polygons.push({
-          vertices: [place(tri[2], z, o), place(tri[1], z, o), place(tri[0], z, o)],
-          color: capColor,
-        });
+        const ordered: [Pt, Pt, Pt] = [tri[2], tri[1], tri[0]];
+        const poly: Polygon = {
+          vertices: [place(ordered[0], z, o), place(ordered[1], z, o), place(ordered[2], z, o)],
+          color: mat.color ?? "#cccccc",
+        };
+        if (mat.texture && fb) {
+          // Inline `texture` (not just `material`) so the mesh atlas planner —
+          // which reads polygon.texture — UV-maps the shared fill across the word.
+          poly.texture = mat.texture;
+          poly.material = { texture: mat.texture };
+          poly.uvs = [uvAt(ordered[0], tile), uvAt(ordered[1], tile), uvAt(ordered[2], tile)];
+          if (tile > 0) poly.textureWrap = REPEAT;
+        }
+        polygons.push(poly);
       }
     };
 
-    cap(rings[0].inset, rings[0].z, false, color);
-    cap(rings[rings.length - 1].inset, rings[rings.length - 1].z, true, backColor);
+    // Outline halo: a larger silhouette in the outline color sitting just behind
+    // the front face, so it peeks out around every outer and counter edge.
+    if (outlineWidth > 0) {
+      cap(-outlineWidth, frontZ - 1e-3, ZERO, false, { at: 0, color: opts.outlineColor });
+    }
+
+    // Front + back caps (material at the two ends of the axis).
+    cap(si(rings[0].inset), rings[0].z, ZERO, false, materialAt(0));
+    if (layered) {
+      // Flat two-layer shadow: offset back cap, no connecting walls.
+      cap(si(rings[rings.length - 1].inset), backZ, backOffset, true, materialAt(1));
+      continue;
+    }
+    cap(si(rings[rings.length - 1].inset), rings[rings.length - 1].z, ZERO, true, materialAt(1));
 
     for (const contour of contours) {
       let prevOffset = offsetContour(contour, si(rings[0].inset));
-      let prevO = obliqueAt(rings[0].z);
       for (let r = 1; r < rings.length; r++) {
         const curOffset = offsetContour(contour, si(rings[r].inset));
-        const curO = obliqueAt(rings[r].z);
         const z0 = rings[r - 1].z;
         const z1 = rings[r].z;
+        const mat = materialAt(tOf((z0 + z1) / 2));
+        const tile = mat.tile ?? 0;
         for (let i = 0, len = contour.length; i < len; i++) {
           const j = (i + 1) % len;
-          polygons.push({
+          const wall: Polygon = {
             vertices: [
-              place(curOffset[i], z1, curO),
-              place(curOffset[j], z1, curO),
-              place(prevOffset[j], z0, prevO),
-              place(prevOffset[i], z0, prevO),
+              place(curOffset[i], z1, ZERO),
+              place(curOffset[j], z1, ZERO),
+              place(prevOffset[j], z0, ZERO),
+              place(prevOffset[i], z0, ZERO),
             ],
-            color: sideColor,
-          });
+            color: mat.color ?? "#cccccc",
+          };
+          if (mat.texture) {
+            wall.texture = mat.texture;
+            wall.material = { texture: mat.texture };
+            if (tile > 0 || !fb) {
+              // Block texture: one full tile per wall quad (voxel edge).
+              wall.uvs = [[0, 1], [1, 1], [1, 0], [0, 0]];
+            } else {
+              // Stretch texture: UV-map the band to the word so it wraps the edge.
+              wall.uvs = [
+                uvAt(curOffset[i], 0),
+                uvAt(curOffset[j], 0),
+                uvAt(prevOffset[j], 0),
+                uvAt(prevOffset[i], 0),
+              ];
+            }
+          }
+          polygons.push(wall);
         }
         prevOffset = curOffset;
-        prevO = curO;
       }
     }
   }
@@ -152,27 +273,37 @@ function buildRings(
   depth: number,
   seg: number,
   maxInset: number,
+  roundConvex: boolean,
+  profileBezier?: CubicBezier,
 ): Ring[] {
   if (profile === "flat" || depth <= 0) {
     return [{ z: frontZ, inset: 0 }, { z: backZ, inset: 0 }];
   }
   const edge = Math.min(maxInset, depth / 2);
-  const s = profile === "round" ? Math.max(2, seg) : 1;
-  const ease = profile === "round"
-    ? (u: number) => Math.cos((u * Math.PI) / 2)
-    : (u: number) => 1 - u;
+  const s = profile === "bevel" ? 1 : Math.max(2, seg);
+  // `insetFrac(u)` is the inset (0..1 of `edge`) at depth fraction u into the
+  // edge (u=0 at the face → 1 at the full-size shoulder). bevel = straight
+  // ramp; round = quarter arc (concave, or convex when raised); custom = the
+  // CSS cubic-bezier easing curve as the cross-section.
+  const insetFrac = profile === "bevel"
+    ? (u: number) => 1 - u
+    : profile === "custom" && profileBezier
+      ? ((b) => (u: number) => 1 - b(u))(cssCubicBezier(profileBezier))
+      : roundConvex
+        ? (u: number) => 1 - Math.sin((u * Math.PI) / 2)
+        : (u: number) => Math.cos((u * Math.PI) / 2);
 
   const rings: Ring[] = [];
   for (let k = 0; k <= s; k++) {
     const u = k / s;
-    rings.push({ z: frontZ - u * edge, inset: edge * ease(u) });
+    rings.push({ z: frontZ - u * edge, inset: edge * insetFrac(u) });
   }
   if (backZ + edge < frontZ - edge - 1e-6) {
     rings.push({ z: backZ + edge, inset: 0 });
   }
   for (let k = 1; k <= s; k++) {
     const u = 1 - k / s;
-    rings.push({ z: backZ + edge * u, inset: edge * ease(u) });
+    rings.push({ z: backZ + edge * u, inset: edge * insetFrac(u) });
   }
   return rings;
 }
diff --git a/packages/fonts/src/fill.test.ts b/packages/fonts/src/fill.test.ts
new file mode 100644
index 00000000..cbf4a348
--- /dev/null
+++ b/packages/fonts/src/fill.test.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { resolveFace } from "./fill";
+
+// resolveFace's solid / texture / image branches are pure (no <canvas>), so
+// they're unit-tested here. The gradient / rainbow branches paint to a canvas
+// and are exercised in the browser (the /wordart Playwright runs) instead.
+describe("resolveFace", () => {
+  it("solid → just a color, no texture", () => {
+    expect(resolveFace({ kind: "solid", color: "#ff0000" })).toEqual({ color: "#ff0000" });
+  });
+
+  it("texture → url + tile passed straight through (block fill)", () => {
+    expect(resolveFace({ kind: "texture", color: "#abcabc", url: "/t/dirt.svg", tile: 50 })).toEqual({
+      color: "#abcabc",
+      texture: "/t/dirt.svg",
+      tile: 50,
+    });
+  });
+
+  it("image → src becomes the texture, no tile (stretch)", () => {
+    const r = resolveFace({ kind: "image", src: "data:image/png;base64,AA" });
+    expect(r.texture).toBe("data:image/png;base64,AA");
+    expect(r.tile).toBeUndefined();
+  });
+
+  it("an empty texture / image source yields no texture", () => {
+    expect(resolveFace({ kind: "texture", url: "" }).texture).toBeUndefined();
+    expect(resolveFace({ kind: "image", src: "" }).texture).toBeUndefined();
+  });
+});
diff --git a/packages/fonts/src/fill.ts b/packages/fonts/src/fill.ts
new file mode 100644
index 00000000..9bdd89c2
--- /dev/null
+++ b/packages/fonts/src/fill.ts
@@ -0,0 +1,111 @@
+/**
+ * Browser-only helpers that paint a WordArt "master fill" onto a `<canvas>` and
+ * return it as a data URL, plus `resolveFace` which turns a high-level fill
+ * spec into the pure-layer `Face` (`{ color?, texture?, tile? }`) that
+ * `composeText` consumes. `composeText` then UV-maps the whole word's face to
+ * that single texture, so a gradient / rainbow / image / block flows
+ * continuously across every glyph (not per-letter).
+ *
+ * Pure-layer code (`composeText`, `extrudeContours`) never imports this — it
+ * only receives the resulting strings — so the Node-testable path stays free of
+ * browser globals.
+ */
+import type { Face } from "./composeText";
+
+/** A WordArt face fill. `solid` means "no texture, use the flat color". */
+export type FillSpec =
+  | { type: "solid" }
+  | { type: "gradient"; from: string; to: string; angle?: number }
+  | { type: "rainbow"; angle?: number }
+  | { type: "image"; src: string };
+
+/** High-level per-face fill the UI works with; `resolveFace` renders it to a `Face`. */
+export type FaceFillSpec =
+  | { kind: "solid"; color: string }
+  | { kind: "gradient"; color?: string; from: string; to: string; angle?: number }
+  | { kind: "rainbow"; color?: string; angle?: number }
+  | { kind: "texture"; color?: string; url: string; tile?: number }
+  | { kind: "image"; color?: string; src: string };
+
+/**
+ * Resolve a high-level face fill into the pure `Face` `composeText` takes —
+ * rendering gradients / rainbows to a data URL via `makeFillTexture`, and
+ * passing block / image URLs straight through. Keeps `composeText` browser-free.
+ */
+export function resolveFace(spec: FaceFillSpec): Face {
+  switch (spec.kind) {
+    case "solid":
+      return { color: spec.color };
+    case "gradient":
+      return { color: spec.color, texture: makeFillTexture({ type: "gradient", from: spec.from, to: spec.to, angle: spec.angle }) };
+    case "rainbow":
+      return { color: spec.color, texture: makeFillTexture({ type: "rainbow", angle: spec.angle }) };
+    case "texture":
+      return { color: spec.color, texture: spec.url || undefined, tile: spec.tile };
+    case "image":
+      return { color: spec.color, texture: spec.src || undefined };
+  }
+}
+
+const RAINBOW = [
+  "#ff3b30", "#ff9500", "#ffcc00", "#34c759",
+  "#00c7be", "#007aff", "#5856d6", "#af52de",
+];
+
+function makeCanvas(w: number, h: number): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  return canvas;
+}
+
+/**
+ * Paint a linear gradient covering the whole canvas at `angleDeg` (measured
+ * CCW from +x in word space, so 90° points up). Canvas y is down while word v
+ * is up, so the direction's y is negated.
+ */
+function paintLinear(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  angleDeg: number,
+  stops: Array<[number, string]>,
+): void {
+  const a = (angleDeg * Math.PI) / 180;
+  const dx = Math.cos(a);
+  const dy = -Math.sin(a);
+  const cx = w / 2;
+  const cy = h / 2;
+  const half = (Math.abs(dx) * w + Math.abs(dy) * h) / 2;
+  const g = ctx.createLinearGradient(cx - dx * half, cy - dy * half, cx + dx * half, cy + dy * half);
+  for (const [offset, color] of stops) g.addColorStop(offset, color);
+  ctx.fillStyle = g;
+  ctx.fillRect(0, 0, w, h);
+}
+
+/**
+ * Build the master fill texture for a face. Returns a data URL, or `undefined`
+ * for `solid` (no texture). For `image`, the source is returned as-is — the
+ * renderer can use any `background-image` URL directly.
+ */
+export function makeFillTexture(spec: FillSpec): string | undefined {
+  if (spec.type === "solid") return undefined;
+  if (spec.type === "image") return spec.src || undefined;
+
+  const size = 256;
+  const canvas = makeCanvas(size, size);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return undefined;
+
+  if (spec.type === "rainbow") {
+    const angle = spec.angle ?? 0;
+    const stops = RAINBOW.map((c, i): [number, string] => [i / (RAINBOW.length - 1), c]);
+    paintLinear(ctx, size, size, angle, stops);
+  } else {
+    // Default 270° = straight down, so `from` is at the top of the word.
+    const angle = spec.angle ?? 270;
+    paintLinear(ctx, size, size, angle, [[0, spec.from], [1, spec.to]]);
+  }
+
+  return canvas.toDataURL("image/png");
+}
diff --git a/packages/fonts/src/index.ts b/packages/fonts/src/index.ts
index 164017d8..cc9b8c81 100644
--- a/packages/fonts/src/index.ts
+++ b/packages/fonts/src/index.ts
@@ -4,17 +4,22 @@
 //   pure    — parseFont(bytes), textPolygons(font, text, config). No browser
 //             globals; runs anywhere, returns plain Polygon[].
 //   browser — listGoogleFonts(), googleFontUrl(), loadFont(url),
-//             loadGoogleFont(). The only part that uses fetch.
+//             loadGoogleFont(), makeFillTexture(). The parts that touch
+//             fetch / canvas.
 
 export { parseFont } from "./parseFont";
 export type { ParsedFont, FontGlyph } from "./parseFont";
 
 export { textPolygons } from "./textPolygons";
 export type { TextPolygonsOptions } from "./textPolygons";
-export type { ExtrudeProfile } from "./extrude";
+export { cssCubicBezier } from "./extrude";
+export type { ExtrudeProfile, CubicBezier, MaterialStop } from "./extrude";
 
 export { composeText } from "./composeText";
-export type { ComposeTextOptions, WarpShape, WarpOptions } from "./composeText";
+export type { ComposeTextOptions, Profile, Face, BackFace, FaceStop, WarpShape, WarpOptions } from "./composeText";
+
+export { makeFillTexture, resolveFace } from "./fill";
+export type { FillSpec, FaceFillSpec } from "./fill";
 
 export {
   listGoogleFonts,
diff --git a/packages/fonts/src/textPolygons.ts b/packages/fonts/src/textPolygons.ts
index 76d69399..351942ff 100644
--- a/packages/fonts/src/textPolygons.ts
+++ b/packages/fonts/src/textPolygons.ts
@@ -73,7 +73,10 @@ export function textPolygons(font: ParsedFont, text: string, options: TextPolygo
     profile,
     profileSegments,
     maxInset: size * 0.045,
-    color,
-    sideColor,
+    stops: [
+      { at: 0, color },
+      { at: 0.5, color: sideColor },
+      { at: 1, color },
+    ],
   });
 }
diff --git a/website/public/textures/wordart/brick.svg b/website/public/textures/wordart/brick.svg
new file mode 100644
index 00000000..f0f19469
--- /dev/null
+++ b/website/public/textures/wordart/brick.svg
@@ -0,0 +1,9 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.5504 35.1004L57.4504 34.9504L61.5004 34.8504L64.1504 34.7504V36.7504L23.3004 37.8504L23.2504 35.8504L27.1504 35.7504L35.2504 35.5504L42.3503 35.3504L46.7504 35.2504L51.5504 35.1004ZM0.150391 5.10039V3.10039L38.3004 4.70039L47.4004 5.05038V5.80038L47.3503 7.05038L0.150391 5.10039ZM64.1504 3.10039V5.10039L53.6504 4.65039L52.6003 29.6004H52.5004L52.7004 25.6504L52.8004 22.5004L53.6504 2.65039L64.1504 3.10039ZM0.150391 36.7504V34.7504L17.0504 34.3004L17.7504 61.3004H17.7004L17.0504 36.3004L0.150391 36.7504Z" fill="#94AFB1"/>
+<path d="M0.150391 36.7504L17.0504 36.3004L17.7004 61.3004L8.15039 61.5504L2.70044 61.7004L0.150391 61.7504V36.7504ZM0.150391 30.1004V5.10039L47.3503 7.05038L46.6504 24.1004H46.6003L46.6504 24.1504L46.3004 31.5504L46.2504 32.0504L42.2004 31.9004L34.0004 31.5504L25.7004 31.2004L0.150391 30.1004ZM64.1504 5.10039V30.1004L52.6003 29.6004L53.6504 4.65039L64.1504 5.10039ZM64.1504 36.7504V61.7504L48.7504 62.1504L39.0504 62.4004L23.9504 62.8004L23.8004 57.1004L23.5504 46.7504L23.3004 37.8504L64.1504 36.7504ZM29.1003 23.4504L24.2504 22.9004L23.7504 27.7504L28.6003 28.3004L29.1003 23.4504ZM33.9504 20.6504L34.5004 15.6004L29.4004 15.0504L28.8503 20.1004L33.9504 20.6504ZM36.1504 20.5504L35.3503 28.1004L42.9004 28.9004L43.7004 21.3504L36.1504 20.5504ZM34.4004 48.4004L34.0504 40.8004L26.4004 41.2004L26.8503 48.7504L34.4004 48.4004ZM36.1504 41.8504L36.4004 46.8504L41.5504 46.6004L41.3004 41.5504L36.1504 41.8504ZM36.1003 50.2004L32.3004 50.3504L32.5004 54.1004L36.3503 53.9504L36.1003 50.2004ZM4.40039 57.1004L8.25037 56.9504L8.00037 53.2004L4.20044 53.3504L4.40039 57.1004ZM14.9504 49.4504L9.80042 49.7504L10.0504 54.7504L15.2004 54.5004L14.9504 49.4504Z" fill="#89A4A6"/>
+<path d="M0.150391 3.09961V0.0996094H38.8503L38.3004 4.69962L0.150391 3.09961ZM48.5004 0.0996094H64.1504V3.09961L53.6504 2.64961L52.8004 22.4996L50.3503 20.1496L46.6504 24.0996L47.3503 7.04961L47.4004 5.79961L47.8503 5.84961L48.5004 0.0996094ZM64.1504 30.0996V34.4996L61.5004 34.8496L57.4504 34.9496L58.4504 32.2496L53.3503 30.2996L51.5504 35.0996L46.7504 35.2496L48.3004 33.9496L46.3004 31.5496L46.6504 24.1496L50.5504 27.8496L52.7004 25.6496L52.5004 29.5996H52.6003L64.1504 30.0996ZM64.1504 61.7496V64.0996H48.5504L48.7504 62.1496L64.1504 61.7496ZM38.8503 64.0996H0.150391V61.7496L2.70044 61.6996L2.80042 62.3996L8.15039 61.5496L17.7004 61.2996H17.7504L17.0504 34.2996L0.150391 34.7496V30.0996L25.7004 31.1996L27.1504 35.7496L23.2504 35.8496L23.3004 37.8496L23.5504 46.7496H23.5004L19.8004 45.8996L17.6504 55.6996L23.7504 57.0996H23.8004L23.9504 62.7996L39.0504 62.3996L38.8503 64.0996ZM34.0004 31.5496L42.2004 31.8996L40.6003 33.1996L42.3503 35.3496L35.2504 35.5496L34.0004 31.5496Z" fill="#677C7E"/>
+<path d="M34.0004 31.5496L35.2504 35.5496L27.1504 35.7496L25.7004 31.1996L34.0004 31.5496ZM38.8503 0.0996094H48.5004L47.8503 5.84961L47.4004 5.79961V5.04961L38.3004 4.69962L38.8503 0.0996094ZM48.5504 64.0996H38.8503L39.0504 62.3996L48.7504 62.1496L48.5504 64.0996ZM46.6504 24.1496L46.6003 24.0996H46.6504L50.3503 20.1496L52.8004 22.4996L52.7004 25.6496L50.5504 27.8496L46.6504 24.1496ZM23.8004 57.0996H23.7504L17.6504 55.6996L19.8004 45.8996L23.5004 46.7496H23.5504L23.8004 57.0996Z" fill="#6C8385"/>
+<path d="M64.1492 34.4998V34.7498L61.4991 34.8498L64.1492 34.4998ZM33.9492 20.6498L28.8491 20.0998L29.3992 15.0498L34.4991 15.5998L33.9492 20.6498ZM29.0991 23.4498L28.5991 28.2998L23.7491 27.7498L24.2491 22.8998L29.0991 23.4498ZM36.1492 20.5498L43.6992 21.3498L42.8992 28.8998L35.3491 28.0998L36.1492 20.5498ZM36.0991 50.1998L36.3491 53.9498L32.4991 54.0998L32.2992 50.3498L36.0991 50.1998ZM36.1492 41.8498L41.2992 41.5498L41.5492 46.5998L36.3992 46.8498L36.1492 41.8498ZM34.3992 48.3998L26.8491 48.7498L26.3992 41.1998L34.0492 40.7998L34.3992 48.3998ZM4.39917 57.0998L4.19922 53.3498L7.99915 53.1998L8.24915 56.9498L4.39917 57.0998ZM14.9492 49.4498L15.1992 54.4998L10.0492 54.7498L9.79919 49.7498L14.9492 49.4498Z" fill="#819A9C"/>
+<path d="M42.1992 31.8998L46.2491 32.0498L46.2992 31.5498L48.2992 33.9498L46.7491 35.2498L42.3491 35.3498L40.5991 33.1998L42.1992 31.8998ZM8.14917 61.5498L2.79919 62.3998L2.69922 61.6998L8.14917 61.5498ZM51.5492 35.0998L53.3491 30.2998L58.4492 32.2498L57.4492 34.9498L51.5492 35.0998Z" fill="#5F7374"/>
+</svg>
diff --git a/website/public/textures/wordart/brick2.svg b/website/public/textures/wordart/brick2.svg
new file mode 100644
index 00000000..efd3d0b8
--- /dev/null
+++ b/website/public/textures/wordart/brick2.svg
@@ -0,0 +1,34 @@
+  <svg
+    width="65"
+    height="65"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+        style="transform:rotate(180deg)"
+
+  >
+    <path
+      d="M47.3992 5.79961V5.04961L38.2992 4.69962L38.8491 0.0996094H48.4991L47.8491 5.84961L47.3992 5.79961ZM27.1492 35.7496L25.6992 31.1996L33.9991 31.5496L35.2491 35.5496L27.1492 35.7496ZM8.14917 61.5496L2.79919 62.3996L2.69922 61.6996L8.14917 61.5496ZM38.8491 64.0996L39.0492 62.3996L48.7491 62.1496L48.5492 64.0996H38.8491ZM23.7992 57.0996H23.7491L17.6492 55.6996L19.7992 45.8996L23.4991 46.7496H23.5492L23.7992 57.0996ZM64.1492 34.7496L61.4991 34.8496L64.1492 34.4996V34.7496ZM57.4492 34.9496L51.5492 35.0996L53.3491 30.2996L58.4492 32.2496L57.4492 34.9496ZM46.7491 35.2496L42.3491 35.3496L40.5991 33.1996L42.1992 31.8996L46.2491 32.0496L46.2992 31.5496L48.2992 33.9496L46.7491 35.2496Z"
+      fill="#819A9C"
+    />
+    <path
+      d="M46.7504 35.2504L51.5504 35.1004L57.4504 34.9504L61.5004 34.8504L64.1504 34.7504V36.7504L23.3004 37.8504L23.2504 35.8504L27.1504 35.7504L35.2504 35.5504L42.3503 35.3504L46.7504 35.2504ZM38.3004 4.70039L47.4004 5.05038V5.80038L47.3503 7.05038L0.150391 5.10039V3.10039L38.3004 4.70039ZM0.150391 34.7504L17.0504 34.3004L17.7504 61.3004H17.7004L17.0504 36.3004L0.150391 36.7504V34.7504ZM52.8004 22.5004L53.6504 2.65039L64.1504 3.10039V5.10039L53.6504 4.65039L52.6003 29.6004H52.5004L52.7004 25.6504L52.8004 22.5004Z"
+      fill="#EC855B"
+    />
+    <path
+      d="M52.8004 22.4996L50.3503 20.1496L46.6504 24.0996L47.3503 7.04961L47.4004 5.79961L47.8503 5.84961L48.5004 0.0996094H64.1504V3.09961L53.6504 2.64961L52.8004 22.4996ZM38.8503 0.0996094L38.3004 4.69962L0.150391 3.09961V0.0996094H38.8503ZM27.1504 35.7496L23.2504 35.8496L23.3004 37.8496L23.5504 46.7496H23.5004L19.8004 45.8996L17.6504 55.6996L23.7504 57.0996H23.8004L23.9504 62.7996L39.0504 62.3996L38.8503 64.0996H0.150391V61.7496L2.70044 61.6996L2.80042 62.3996L8.15039 61.5496L17.7004 61.2996H17.7504L17.0504 34.2996L0.150391 34.7496V30.0996L25.7004 31.1996L27.1504 35.7496ZM61.5004 34.8496L57.4504 34.9496L58.4504 32.2496L53.3503 30.2996L51.5504 35.0996L46.7504 35.2496L48.3004 33.9496L46.3004 31.5496L46.6504 24.1496L50.5504 27.8496L52.7004 25.6496L52.5004 29.5996H52.6003L64.1504 30.0996V34.4996L61.5004 34.8496ZM42.3503 35.3496L35.2504 35.5496L34.0004 31.5496L42.2004 31.8996L40.6003 33.1996L42.3503 35.3496ZM64.1504 61.7496V64.0996H48.5504L48.7504 62.1496L64.1504 61.7496Z"
+      fill="#89A4A6"
+    />
+    <path
+      d="M64.1504 61.7504L48.7504 62.1504L39.0504 62.4004L23.9504 62.8004L23.8004 57.1004L23.5504 46.7504L23.3004 37.8504L64.1504 36.7504V61.7504ZM0.150391 5.10039L47.3503 7.05038L46.6504 24.1004H46.6003L46.6504 24.1504L46.3004 31.5504L46.2504 32.0504L42.2004 31.9004L34.0004 31.5504L25.7004 31.2004L0.150391 30.1004V5.10039ZM28.8503 20.1004L33.9504 20.6504L34.5004 15.6004L29.4004 15.0504L28.8503 20.1004ZM17.7004 61.3004L8.15039 61.5504L2.70044 61.7004L0.150391 61.7504V36.7504L17.0504 36.3004L17.7004 61.3004ZM29.1003 23.4504L24.2504 22.9004L23.7504 27.7504L28.6003 28.3004L29.1003 23.4504ZM52.6003 29.6004L53.6504 4.65039L64.1504 5.10039V30.1004L52.6003 29.6004ZM43.7004 21.3504L36.1504 20.5504L35.3503 28.1004L42.9004 28.9004L43.7004 21.3504ZM9.80042 49.7504L10.0504 54.7504L15.2004 54.5004L14.9504 49.4504L9.80042 49.7504ZM8.25037 56.9504L8.00037 53.2004L4.20044 53.3504L4.40039 57.1004L8.25037 56.9504ZM36.1504 41.8504L36.4004 46.8504L41.5504 46.6004L41.3004 41.5504L36.1504 41.8504ZM26.4004 41.2004L26.8503 48.7504L34.4004 48.4004L34.0504 40.8004L26.4004 41.2004ZM36.3503 53.9504L36.1003 50.2004L32.3004 50.3504L32.5004 54.1004L36.3503 53.9504Z"
+      fill="#E07B51"
+    />
+    <path
+      d="M36.3491 53.9498L32.4991 54.0998L32.2992 50.3498L36.0991 50.1998L36.3491 53.9498ZM28.8491 20.0998L29.3992 15.0498L34.4991 15.5998L33.9492 20.6498L28.8491 20.0998ZM29.0991 23.4498L28.5991 28.2998L23.7491 27.7498L24.2491 22.8998L29.0991 23.4498ZM43.6992 21.3498L42.8992 28.8998L35.3491 28.0998L36.1492 20.5498L43.6992 21.3498ZM8.24915 56.9498L4.39917 57.0998L4.19922 53.3498L7.99915 53.1998L8.24915 56.9498ZM9.79919 49.7498L14.9492 49.4498L15.1992 54.4998L10.0492 54.7498L9.79919 49.7498ZM36.1492 41.8498L41.2992 41.5498L41.5492 46.5998L36.3992 46.8498L36.1492 41.8498ZM26.3992 41.1998L34.0492 40.7998L34.3992 48.3998L26.8491 48.7498L26.3992 41.1998Z"
+      fill="#D77147"
+    />
+    <path
+      d="M46.6497 24.1004L50.3496 20.1504L52.7997 22.5004L52.6997 25.6504L50.5497 27.8504L46.6497 24.1504L46.5996 24.1004H46.6497Z"
+      fill="#8EABAD"
+    />
+  </svg>
diff --git a/website/public/textures/wordart/cacti.svg b/website/public/textures/wordart/cacti.svg
new file mode 100644
index 00000000..2406aead
--- /dev/null
+++ b/website/public/textures/wordart/cacti.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg)">
+<path d="M32 23.05V9.39999H27.65V23.05V60H32V23.05ZM21.35 4H17V46.1H21.35V4ZM13.2 0H38.85V19.6H43.2V0H60.25L64 6.39999L60.25 12.75L64 19.2L60.25 25.55L64 32L60.25 38.35L64 44.8L60.25 51.15L64 57.6L60.25 63.95H64V64H55.2V54.45V46.75H50.85V54.45V64H21.35V54.45H17V64H0V63.95H3.75L0 57.6L3.75 51.15L0 44.8L3.75 38.35L0 32L3.75 25.55L0 19.2L3.75 12.75L0 6.39999L3.75 0H8.84998V19.6V33.25V42.8H13.2V33.25V19.6V0ZM43.2 47V32.3H38.85V47V54.7H43.2V47ZM50.85 31.4V39.1H55.2V31.4V6.8H50.85V31.4Z" fill="#27AE60"/>
+<path d="M50.85 31.4H55.2V39.1H50.85V31.4ZM27.65 23.05V9.39999H32V23.05H27.65ZM60.25 0H64V6.39999V19.2V32V44.8V57.6V63.95H60.25L64 57.6L60.25 51.15L64 44.8L60.25 38.35L64 32L60.25 25.55L64 19.2L60.25 12.75L64 6.39999L60.25 0ZM0 63.95V57.6V44.8V32V19.2V6.39999V0H3.75L0 6.39999L3.75 12.75L0 19.2L3.75 25.55L0 32L3.75 38.35L0 44.8L3.75 51.15L0 57.6L3.75 63.95H0ZM8.84998 19.6H13.2V33.25H8.84998V19.6ZM43.2 47V54.7H38.85V47H43.2ZM50.85 54.45V46.75H55.2V54.45H50.85Z" fill="#29BB67"/>
+<path d="M50.8496 54.45H55.1996V64H50.8496V54.45ZM31.9996 23.05V60H27.6497V23.05H31.9996ZM21.3496 4V46.1H16.9996V4H21.3496ZM8.84961 0H13.1996V19.6H8.84961V0ZM38.8496 0H43.1996V19.6H38.8496V0ZM21.3496 64H16.9996V54.45H21.3496V64ZM13.1996 33.25V42.8H8.84961V33.25H13.1996ZM38.8496 47V32.3H43.1996V47H38.8496ZM50.8496 31.4V6.8H55.1996V31.4H50.8496Z" fill="#24A159"/>
+</svg>
diff --git a/website/public/textures/wordart/dirt.svg b/website/public/textures/wordart/dirt.svg
new file mode 100644
index 00000000..7d84a644
--- /dev/null
+++ b/website/public/textures/wordart/dirt.svg
@@ -0,0 +1,8 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64.1504 12.3996L63.6004 11.7996L60.6004 21.1496L64.1504 20.3996V33.0496L57.9004 34.2996L64.1504 41.3496V49.7496L61.2504 52.1496L64.1504 53.2496V64.0996H40.0004L41.0504 60.8996L31.4004 62.8496L32.5004 64.0996H0.150391V53.2496L6.40039 55.6496L4.80042 45.8996L0.150391 49.7496V41.2996L0.450378 41.6496L3.6004 32.3496L0.150391 33.0496V20.3996L6.15039 19.0996L0.150391 12.4496V0.0996094H32.5004L37.9004 6.19961L40.0004 0.0996094H64.1504V12.3996ZM57.9004 3.19961L59.1504 9.19961L63.7004 5.14961L57.9004 3.19961ZM43.5004 12.9996H33.7004L38.6004 21.4996L43.5004 12.9996ZM44.5504 28.6996L51.0504 36.0496L54.2004 26.7496L44.5504 28.6996ZM40.8504 32.6996L41.2504 26.5996L35.7504 29.3496L40.8504 32.6996ZM52.8504 2.44961L45.8504 9.34961L55.3004 11.9496L52.8504 2.44961ZM47.2504 17.1496L52.3004 20.4496L52.7004 14.3496L47.2504 17.1496ZM24.8004 11.7996L15.1504 13.7496L21.6504 21.0996L24.8004 11.7996ZM24.6004 4.54961L18.8004 2.59961L20.0504 8.59961L24.6004 4.54961ZM4.50037 1.79961L9.40039 10.2996L14.3004 1.79961H4.50037ZM7.90039 15.2996L11.4504 20.2496L14.0504 14.6996L7.90039 15.2996ZM8.90039 23.6996L8.55042 33.5496L17.2004 28.9496L8.90039 23.6996ZM27.1504 20.3996L33.2504 20.7496L30.5004 15.2996L27.1504 20.3996ZM28.4004 24.3496L23.8004 33.0496L33.6504 32.6996L28.4004 24.3496ZM22.9504 63.5496L26.0504 54.2496L16.4004 56.1996L22.9504 63.5496ZM17.0504 47.7496L25.1504 42.1996L16.3004 37.9496L17.0504 47.7496ZM31.5004 48.4996L28.1004 53.5996L34.2004 53.9496L31.5004 48.4996ZM7.80042 40.0496L11.8504 44.5996L13.8004 38.7996L7.80042 40.0496ZM8.80042 55.6996L10.0504 61.6996L14.6004 57.6496L8.80042 55.6996ZM55.9004 47.3496L56.3004 41.2496L50.8004 43.9496L55.9004 47.3496ZM52.4004 51.2496L48.1004 60.0996L57.9004 59.3996L52.4004 51.2496ZM35.5004 40.7496L32.7504 35.2996L29.4504 40.4496L35.5004 40.7496ZM44.0004 51.0496L38.5004 53.7996L43.6504 57.1496L44.0004 51.0496ZM38.0004 48.4996L46.6504 43.8996L38.3004 38.6496L38.0004 48.4996Z" fill="#E79648"/>
+<path d="M38.0004 48.4996L38.3004 38.6496L46.6504 43.8996L38.0004 48.4996ZM57.9004 3.19961L63.7004 5.14961L59.1504 9.19961L57.9004 3.19961ZM64.1504 20.3996L60.6004 21.1496L63.6004 11.7996L64.1504 12.3996V20.3996ZM40.0004 0.0996094L37.9004 6.19961L32.5004 0.0996094H40.0004ZM0.150391 12.4496L6.15039 19.0996L0.150391 20.3996V12.4496ZM0.150391 33.0496L3.6004 32.3496L0.450378 41.6496L0.150391 41.2996V33.0496ZM0.150391 49.7496L4.80042 45.8996L6.40039 55.6496L0.150391 53.2496V49.7496ZM32.5004 64.0996L31.4004 62.8496L41.0504 60.8996L40.0004 64.0996H32.5004ZM64.1504 53.2496L61.2504 52.1496L64.1504 49.7496V53.2496ZM64.1504 41.3496L57.9004 34.2996L64.1504 33.0496V41.3496ZM52.8504 2.44961L55.3004 11.9496L45.8504 9.34961L52.8504 2.44961ZM40.8504 32.6996L35.7504 29.3496L41.2504 26.5996L40.8504 32.6996ZM44.5504 28.6996L54.2004 26.7496L51.0504 36.0496L44.5504 28.6996ZM24.8004 11.7996L21.6504 21.0996L15.1504 13.7496L24.8004 11.7996ZM4.50037 1.79961H14.3004L9.40039 10.2996L4.50037 1.79961ZM28.4004 24.3496L33.6504 32.6996L23.8004 33.0496L28.4004 24.3496ZM27.1504 20.3996L30.5004 15.2996L33.2504 20.7496L27.1504 20.3996ZM17.0504 47.7496L16.3004 37.9496L25.1504 42.1996L17.0504 47.7496ZM22.9504 63.5496L16.4004 56.1996L26.0504 54.2496L22.9504 63.5496ZM44.0004 51.0496L43.6504 57.1496L38.5004 53.7996L44.0004 51.0496ZM35.5004 40.7496L29.4504 40.4496L32.7504 35.2996L35.5004 40.7496Z" fill="#DB8D42"/>
+<path d="M43.5007 12.9996L38.6008 21.4996L33.7007 12.9996H43.5007ZM24.6008 4.54961L20.0508 8.59961L18.8008 2.59961L24.6008 4.54961ZM31.5007 48.4996L34.2007 53.9496L28.1008 53.5996L31.5007 48.4996ZM8.80078 55.6996L14.6008 57.6496L10.0508 61.6996L8.80078 55.6996ZM55.9008 47.3496L50.8008 43.9496L56.3008 41.2496L55.9008 47.3496Z" fill="#F0A256"/>
+<path d="M47.2507 17.1496L52.7007 14.3496L52.3008 20.4496L47.2507 17.1496ZM8.90076 23.6996L17.2007 28.9496L8.55078 33.5496L8.90076 23.6996ZM7.90076 15.2996L14.0508 14.6996L11.4507 20.2496L7.90076 15.2996ZM7.80078 40.0496L13.8008 38.7996L11.8508 44.5996L7.80078 40.0496ZM52.4008 51.2496L57.9008 59.3996L48.1008 60.0996L52.4008 51.2496Z" fill="#D28439"/>
+</svg>
+
diff --git a/website/public/textures/wordart/dirt2.svg b/website/public/textures/wordart/dirt2.svg
new file mode 100644
index 00000000..913590d2
--- /dev/null
+++ b/website/public/textures/wordart/dirt2.svg
@@ -0,0 +1,8 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.80042 55.6996L10.0504 61.6996L14.6004 57.6496L8.80042 55.6996ZM38.4004 4.74961L47.8504 5.84961L48.5004 0.0996094H64.1504V9.34961L56.6504 11.1496L58.4004 18.6996L61.6504 17.9996L60.6003 21.1496L64.1504 20.3996V33.0496L57.9004 34.2996L61.2004 37.9996L61.4504 40.2996L63.0504 40.1496L64.1504 41.3496V49.7496L61.2504 52.1496L64.1504 53.2496V64.0996H48.5504L48.9504 60.2996L39.4004 59.1996L39.2004 61.2996L31.4004 62.8496L32.5004 64.0996H0.150391V53.2496L6.40039 55.6496L4.80042 45.8996L0.150391 49.7496V41.2996L0.450378 41.6496L1.05042 39.8996L2.8504 39.6496L2.40039 35.8996L3.6004 32.3496L0.150391 33.0496V20.3996L6.15039 19.0996L1.25037 13.6496L0.200378 9.34961H0.150391V0.0996094H32.5004L37.9004 6.19961L38.4004 4.74961ZM42.2004 15.2996L43.4004 16.1496L46.5504 11.7496L42.1504 8.54961L38.9504 12.9996H33.7004L38.6004 21.4996L42.2004 15.2996ZM55.3004 11.9496L52.8503 2.44961L45.8504 9.34961L55.3004 11.9496ZM57.9004 3.19961L59.1504 9.19961L63.7004 5.14961L57.9004 3.19961ZM51.0004 27.3996L54.3004 23.8996L50.3504 20.1496L46.6004 24.0996L50.2504 27.5496L44.5504 28.6996L51.0504 36.0496L54.2004 26.7496L51.0004 27.3996ZM56.5504 37.3996L58.4504 32.2496L53.3503 30.2996L51.4004 35.3996L56.5504 37.3996ZM48.3004 33.9496L44.8004 29.7496L40.6004 33.1996L44.0504 37.3996L48.3004 33.9496ZM40.8504 32.6996L41.2504 26.5996L35.7504 29.3496L40.8504 32.6996ZM47.2504 17.1496L52.3004 20.4496L52.7004 14.3496L47.2504 17.1496ZM16.9004 13.3996L15.1504 13.7496L21.6504 21.0996L24.8004 11.7996L23.9504 11.9996L26.3504 9.34961L22.8504 6.14961L24.6004 4.54961L18.8004 2.59961L19.0004 3.49961L13.1004 9.89961L16.9004 13.3996ZM7.95038 7.79961L9.40039 10.2996L14.3004 1.79961H8.15039H4.50037L5.25037 3.09961L3.15039 3.99961L5.40039 8.94961L7.95038 7.79961ZM11.8004 19.5496L14.0504 14.6996L7.90039 15.2996L10.9504 19.5496L9.75037 24.2496L8.90039 23.6996L8.75037 28.0996L8.45038 29.1996L8.70038 29.2996L8.55042 33.5496L14.0004 30.6996L18.3004 31.7996L20.8504 21.8996L11.8004 19.5496ZM12.5504 42.4996L15.4504 38.4496L11.1004 35.2996L7.90039 39.6496L8.30042 39.9496L7.80042 40.0496L11.8504 44.5996L12.5504 42.4996ZM31.1504 20.6496L30.8004 24.1496L36.2004 24.6996L36.7504 19.2996L32.3004 18.8496L30.5004 15.2996L27.1504 20.3996L31.1504 20.6496ZM26.2504 32.9996L28.0504 38.5496L31.3504 37.5496L29.4504 40.4496L35.5004 40.7496L33.5504 36.8496L35.4504 36.1996L33.1004 28.7496L31.5004 29.2496L28.4004 24.3496L23.8004 33.0496L26.2504 32.9996ZM38.0504 47.9996L37.2004 46.1996L32.3004 48.4496L34.5004 53.3996L39.4504 51.1996L38.2004 48.3996L43.3504 45.6996L45.2504 51.7496L52.6504 49.3996L50.9504 44.0496L55.9004 47.3496L56.3004 41.2496L50.9004 43.8996L50.3004 41.9996L45.9004 43.3996L38.3004 38.6496L38.0504 47.9996ZM25.0504 57.3496L27.3504 57.8496L28.3004 53.5996L34.2004 53.9496L31.5004 48.4996L28.4004 53.1496L29.5504 48.0996L19.8004 45.8996L17.6504 55.6996L18.2504 55.8496L16.4004 56.1996L22.9504 63.5496L25.0504 57.3496ZM14.9004 50.0996L13.3504 45.4496L8.75037 47.0496L10.3004 51.6496L14.9004 50.0996ZM1.95038 57.0496L2.80042 62.3996L8.15039 61.5496L7.30042 56.1996L1.95038 57.0496ZM17.0504 47.7496L25.1504 42.1996L16.3004 37.9496L17.0504 47.7496ZM55.0004 55.0996L60.2504 55.5996L60.8503 50.1496L55.4004 49.5996L54.9004 54.8996L52.4004 51.2496L48.1004 60.0996L57.9004 59.3996L55.0004 55.0996ZM43.6504 57.1496L44.0004 51.0496L38.5004 53.7996L43.6504 57.1496Z" fill="#E79648"/>
+<path d="M43.6504 57.1496L38.5004 53.7996L44.0004 51.0496L43.6504 57.1496ZM38.4004 4.74961L37.9004 6.19961L32.5004 0.0996094H38.8504L38.3004 4.74961H38.4004ZM1.25037 13.6496L6.15039 19.0996L0.150391 20.3996V17.3996L2.00037 16.9496L1.25037 13.6496ZM0.150391 33.0496L3.6004 32.3496L2.40039 35.8996L2.20038 34.2496L0.150391 34.4996V33.0496ZM1.05042 39.8996L0.450378 41.6496L0.150391 41.2996V39.9996L1.05042 39.8996ZM0.150391 49.7496L4.80042 45.8996L6.40039 55.6496L0.150391 53.2496V49.7496ZM32.5004 64.0996L31.4004 62.8496L39.2004 61.2996L38.8504 64.0996H32.5004ZM64.1504 53.2496L61.2504 52.1496L64.1504 49.7496V53.2496ZM64.1504 41.3496L63.0504 40.1496L64.1504 39.9996V41.3496ZM61.2004 37.9996L57.9004 34.2996L64.1504 33.0496V34.4996L60.8004 34.8996L61.2004 37.9996ZM64.1504 20.3996L60.6003 21.1496L61.6504 17.9996L64.1504 17.3996V20.3996ZM57.9004 3.19961L63.7004 5.14961L59.1504 9.19961L57.9004 3.19961ZM55.3004 11.9496L45.8504 9.34961L52.8503 2.44961L55.3004 11.9496ZM51.0004 27.3996L54.2004 26.7496L51.0504 36.0496L44.5504 28.6996L50.2504 27.5496L50.5504 27.8496L51.0004 27.3996ZM40.8504 32.6996L35.7504 29.3496L41.2504 26.5996L40.8504 32.6996ZM23.9504 11.9996L24.8004 11.7996L21.6504 21.0996L15.1504 13.7496L16.9004 13.3996L20.0004 16.2496L23.9504 11.9996ZM5.25037 3.09961L4.50037 1.79961H8.15039H14.3004L9.40039 10.2996L7.95038 7.79961L10.3504 6.69961L8.15039 1.79961L5.25037 3.09961ZM31.1504 20.6496L27.1504 20.3996L30.5004 15.2996L32.3004 18.8496L31.3504 18.7496L31.1504 20.6496ZM26.2504 32.9996L23.8004 33.0496L28.4004 24.3496L31.5004 29.2496L25.6504 31.0996L26.2504 32.9996ZM33.5504 36.8496L35.5004 40.7496L29.4504 40.4496L31.3504 37.5496L33.5504 36.8496ZM38.0504 47.9996L38.3004 38.6496L45.9004 43.3996L42.9004 44.3496L43.3504 45.6996L38.2004 48.3996L38.0504 47.9996ZM25.0504 57.3496L22.9504 63.5496L16.4004 56.1996L18.2504 55.8496L25.0504 57.3496ZM17.0504 47.7496L16.3004 37.9496L25.1504 42.1996L17.0504 47.7496Z" fill="#DB8D42"/>
+<path d="M47.2507 17.1496L52.7008 14.3496L52.3008 20.4496L47.2507 17.1496ZM11.8008 19.5496L11.0007 19.3496L10.9507 19.5496L7.90076 15.2996L14.0508 14.6996L11.8008 19.5496ZM9.75073 24.2496L8.75073 28.0996L8.90076 23.6996L9.75073 24.2496ZM8.70074 29.2996L14.0007 30.6996L8.55078 33.5496L8.70074 29.2996ZM12.5508 42.4996L11.8508 44.5996L7.80078 40.0496L8.30078 39.9496L12.3008 42.8496L12.5508 42.4996ZM55.0007 55.0996L57.9008 59.3996L48.1008 60.0996L52.4008 51.2496L54.9008 54.8996L54.8507 55.0496L55.0007 55.0996Z" fill="#D28439"/>
+<path d="M42.2007 15.2996L38.6008 21.4996L33.7007 12.9996H38.9507L42.2007 15.2996ZM19.0007 3.49961L18.8008 2.59961L24.6008 4.54961L22.8508 6.14961L19.4507 2.99961L19.0007 3.49961ZM50.9008 43.8996L56.3008 41.2496L55.9008 47.3496L50.9507 44.0496L50.9008 43.8996ZM28.4008 53.1496L31.5007 48.4996L34.2007 53.9496L28.3008 53.5996L28.4008 53.1496ZM8.80078 55.6996L14.6008 57.6496L10.0508 61.6996L8.80078 55.6996Z" fill="#F0A256"/>
+</svg>
+
diff --git a/website/public/textures/wordart/glass.svg b/website/public/textures/wordart/glass.svg
new file mode 100644
index 00000000..3c21cf53
--- /dev/null
+++ b/website/public/textures/wordart/glass.svg
@@ -0,0 +1,8 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.1003 0.0996094L55.1003 3.09961H41.3004L44.3004 0.0996094H58.1003ZM61.1504 27.5496L64.1504 24.5496V64.0996H24.6003L27.6003 61.0996H61.1504V27.5496ZM0.150391 58.0496V44.2496L3.15039 41.2496V55.0496L0.150391 58.0496ZM0.150391 14.0496V0.0996094H14.1003L11.1003 3.09961H3.15039V11.0496L0.150391 14.0496Z" fill="#DEF6FF"/>
+<path d="M0.150391 14.0496L3.15039 11.0496V41.2496L0.150391 44.2496V14.0496ZM55.1003 3.09961L58.1003 0.0996094H64.1504V24.5496L61.1504 27.5496V3.09961H55.1003ZM44.3004 0.0996094L41.3004 3.09961H11.1003L14.1003 0.0996094H44.3004ZM24.6003 64.0996H0.150391V58.0496L3.15039 55.0496V61.0996H27.6003L24.6003 64.0996Z" fill="white"/>
+<path d="M8.45044 25.3L8.15039 22.05L11.4504 21.75L11.7504 25L8.45044 25.3ZM29.0004 11L24.7004 10.55L25.2004 6.25L29.5004 6.70001L29.0004 11ZM51.0004 55.3L50.0004 49.35L55.9004 48.35L56.9004 54.3L51.0004 55.3ZM36.3004 57.1V54.7H38.7004V57.1H36.3004Z" fill="white" fill-opacity="0.2"/>
+<path d="M52.0007 43.6996L52.3507 39.7996L56.2507 40.0996L55.9008 43.9996L52.0007 43.6996ZM42.3008 48.4496L45.8507 48.9996L45.2507 52.5496L41.7008 51.9996L42.3008 48.4496ZM20.3507 11.7996L21.2008 19.7996L13.2008 20.6496L12.3507 12.6496L20.3507 11.7996ZM9.95081 14.2496H7.05078V11.3496H9.95081V14.2496Z" fill="white" fill-opacity="0.4"/>
+</svg>
+
diff --git a/website/public/textures/wordart/grass3.svg b/website/public/textures/wordart/grass3.svg
new file mode 100644
index 00000000..abd941c3
--- /dev/null
+++ b/website/public/textures/wordart/grass3.svg
@@ -0,0 +1,8 @@
+
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.15 11.85L52.7 2.35L45.7 9.25L55.15 11.85ZM57.75 3.1L59 9.1L63.55 5.05L57.75 3.1ZM38.25 4.65L47.7 5.75L48.35 0H64V9.25L56.5 11.05L58.25 18.6L61.5 17.9L60.45 21.05L64 20.3V32.95L57.75 34.2L61.05 37.9L61.3 40.2L62.9 40.05L64 41.25V49.65L61.1 52.05L64 53.15V64H48.4L48.8 60.2L39.25 59.1L39.05 61.2L31.25 62.75L32.35 64H0V53.15L6.25 55.55L4.65002 45.8L0 49.65V41.2L0.299988 41.55L0.900024 39.8L2.70001 39.55L2.25 35.8L3.45001 32.25L0 32.95V20.3L6 19L1.09998 13.55L0.0499878 9.25H0V0H32.35L37.75 6.1L38.25 4.65ZM42.05 15.2L43.25 16.05L46.4 11.65L42 8.45L38.8 12.9H33.55L38.45 21.4L42.05 15.2ZM31 20.55L30.65 24.05L36.05 24.6L36.6 19.2L32.15 18.75L30.35 15.2L27 20.3L31 20.55ZM33.35 36.7L35.3 36.1L32.95 28.65L31.35 29.15L28.25 24.25L23.65 32.95L26.1 32.9L27.9 38.45L31.2 37.4L29.3 40.35L35.35 40.65L33.35 36.7ZM44.65 29.65L40.45 33.1L43.9 37.3L48.15 33.85L44.65 29.65ZM40.7 32.6L41.1 26.5L35.6 29.25L40.7 32.6ZM50.85 27.3L54.15 23.8L50.2 20.05L46.45 24L50.1 27.45L44.4 28.6L50.9 35.95L54.05 26.65L50.85 27.3ZM47.1 17.05L52.15 20.35L52.55 14.25L47.1 17.05ZM53.2 30.2L51.25 35.3L56.4 37.3L58.3 32.15L53.2 30.2ZM7.79999 7.7L9.25 10.2L14.15 1.7H8H4.34998L5.09998 3L3 3.9L5.25 8.85L7.79999 7.7ZM23.8 11.9L26.2 9.25L22.7 6.05L24.45 4.45L18.65 2.5L18.85 3.4L12.95 9.8L16.75 13.3L15 13.65L21.5 21L24.65 11.7L23.8 11.9ZM11.65 19.45L13.9 14.6L7.75 15.2L10.8 19.45L9.59998 24.15L8.75 23.6L8.59998 27.95L8.29999 29.1L8.54999 29.2L8.40002 33.45L13.85 30.6L18.15 31.7L20.7 21.8L11.65 19.45ZM12.4 42.4L15.3 38.35L10.95 35.2L7.75 39.55L8.15002 39.85L7.65002 39.95L11.7 44.5L12.4 42.4ZM16.9 47.65L25 42.1L16.15 37.85L16.9 47.65ZM8.59998 46.95L10.15 51.55L14.75 50L13.2 45.35L8.59998 46.95ZM14.45 57.55L8.65002 55.6L9.90002 61.6L14.45 57.55ZM8 61.45L7.15002 56.1L1.79999 56.95L2.65002 62.3L8 61.45ZM18.1 55.75L16.25 56.1L22.8 63.45L24.9 57.25L27.2 57.75L28.2 53.5L34.05 53.85L31.35 48.4L28.3 53.05L29.4 48L19.65 45.8L17.5 55.6L18.1 55.75ZM50.75 43.8L50.15 41.9L45.75 43.3L38.15 38.55L37.9 47.9L37.05 46.1L32.15 48.35L34.35 53.3L39.3 51.1L38.05 48.3L43.2 45.6L45.1 51.65L52.5 49.3L50.8 43.95L55.75 47.25L56.15 41.15L50.75 43.8ZM54.75 54.8L52.25 51.15L47.95 60L57.75 59.3L54.85 55L60.1 55.5L60.7 50.05L55.25 49.5L54.75 54.8ZM38.35 53.7L43.5 57.05L43.85 50.95L38.35 53.7Z" fill="#27AE60"/>
+<path d="M55.15 11.8502L45.7 9.2502L52.7 2.3502L55.15 11.8502ZM61.5 17.9002L64 17.3002V20.3002L60.45 21.0502L61.5 17.9002ZM0 20.3002V17.3002L1.84998 16.8502L1.09998 13.5502L6 19.0002L0 20.3002ZM42.05 15.2002L38.45 21.4002L33.55 12.9002H38.8L42.05 15.2002ZM33.35 36.7002L35.35 40.6502L29.3 40.3502L31.2 37.4002L33.35 36.7002ZM50.85 27.3002L54.05 26.6502L50.9 35.9502L44.4 28.6002L50.1 27.4502L50.4 27.7502L50.85 27.3002ZM5.09998 3.0002L4.34998 1.7002H8H14.15L9.25 10.2002L7.79999 7.7002L10.2 6.6002L8 1.7002L5.09998 3.0002ZM24.9 57.2502L22.8 63.4502L16.25 56.1002L18.1 55.7502L24.9 57.2502Z" fill="#229A55"/>
+<path d="M57.75 3.1L63.55 5.05L59 9.1L57.75 3.1ZM64 32.95V34.4L60.65 34.8L61.05 37.9L57.75 34.2L64 32.95ZM62.9 40.05L64 39.9V41.25L62.9 40.05ZM39.05 61.2L38.7 64H32.35L31.25 62.75L39.05 61.2ZM0 41.2V39.9L0.900024 39.8L0.299988 41.55L0 41.2ZM2.25 35.8L2.04999 34.15L0 34.4V32.95L3.45001 32.25L2.25 35.8ZM32.35 0H38.7L38.15 4.65H38.25L37.75 6.1L32.35 0ZM31 20.55L27 20.3L30.35 15.2L32.15 18.75L31.2 18.65L31 20.55ZM26.1 32.9L23.65 32.95L28.25 24.25L31.35 29.15L25.5 31L26.1 32.9ZM18.85 3.4L18.65 2.5L24.45 4.45L22.7 6.05L19.3 2.9L18.85 3.4ZM11.65 19.45L10.85 19.25L10.8 19.45L7.75 15.2L13.9 14.6L11.65 19.45ZM9.59998 24.15L8.59998 27.95L8.75 23.6L9.59998 24.15ZM8.54999 29.2L13.85 30.6L8.40002 33.45L8.54999 29.2ZM12.4 42.4L11.7 44.5L7.65002 39.95L8.15002 39.85L12.15 42.75L12.4 42.4ZM28.3 53.05L31.35 48.4L34.05 53.85L28.2 53.5L28.3 53.05ZM50.75 43.8L56.15 41.15L55.75 47.25L50.8 43.95L50.75 43.8ZM43.2 45.6L38.05 48.3L37.9 47.9L38.15 38.55L45.75 43.3L42.75 44.25L43.2 45.6ZM54.75 54.8L54.7 54.95L54.85 55L57.75 59.3L47.95 60L52.25 51.15L54.75 54.8ZM38.35 53.7L43.85 50.95L43.5 57.05L38.35 53.7Z" fill="#24A159"/>
+<path d="M64 49.6502V53.1502L61.1 52.0502L64 49.6502ZM0 53.1502V49.6502L4.65002 45.8002L6.25 55.5502L0 53.1502ZM40.7 32.6002L35.6 29.2502L41.1 26.5002L40.7 32.6002ZM47.1 17.0502L52.55 14.2502L52.15 20.3502L47.1 17.0502ZM23.8 11.9002L24.65 11.7002L21.5 21.0002L15 13.6502L16.75 13.3002L19.85 16.1502L23.8 11.9002ZM16.9 47.6502L16.15 37.8502L25 42.1002L16.9 47.6502ZM14.45 57.5502L9.90002 61.6002L8.65002 55.6002L14.45 57.5502Z" fill="#29BB67"/>
+</svg>
+
diff --git a/website/public/textures/wordart/ice.svg b/website/public/textures/wordart/ice.svg
new file mode 100644
index 00000000..46c2865e
--- /dev/null
+++ b/website/public/textures/wordart/ice.svg
@@ -0,0 +1,9 @@
+
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.2 20.95L58.95 17L55 13.25L51.25 17.2L55.2 20.95ZM54.2 0H64V23.15C58.4333 30.5167 50.2833 35.8667 39.55 39.2L39.6 39.25C35.2666 40.3167 31.3333 41.8833 27.8 43.95C20.1667 48.35 14.3167 55.0333 10.25 64H0V41.25L1.95001 38.7C7.68335 31.6333 15.25 26.9333 24.65 24.6L24.6 24.55C37.3666 20.6167 46.5167 13.8333 52.05 4.2L54.2 0ZM64 41.25V64H54.2C55.2333 61.6667 56.0833 59.1667 56.75 56.5C58.2167 51.8333 60.0667 47.65 62.3 43.95L64 41.25ZM0 23.15V0H10.25C9.18333 2.3 8.25001 4.73333 7.45001 7.3C6.35001 11.6 4.78333 15.5 2.75 19L1.95001 20.35L0 23.15ZM52.3 26.75L47.2 24.8L45.25 29.9L50.4 31.9L52.3 26.75ZM35.05 30.2L38.5 34.4L42.75 30.95L39.25 26.75L35.05 30.2ZM5.84998 39.55L10.25 42.75L13.4 38.35L9.04999 35.2L5.84998 39.55ZM8.59998 46.95L10.15 51.55L14.75 50L13.2 45.35L8.59998 46.95Z" fill="white"/>
+<path d="M8.59961 46.9506L13.1996 45.3506L14.7496 50.0006L10.1497 51.5506L8.59961 46.9506ZM55.1996 20.9506L51.2496 17.2006L54.9996 13.2506L58.9496 17.0006L55.1996 20.9506ZM53.9496 55.5006L48.5496 54.9506L49.0996 49.5006L54.5496 50.0506L53.9496 55.5006ZM20.6996 13.4006L20.1497 18.8006L14.7496 18.2506L15.2996 12.8506L20.6996 13.4006ZM24.2496 9.55058L23.3997 4.20059L28.7496 3.35059L29.5996 8.70059L24.2496 9.55058ZM35.0496 30.2006L39.2496 26.7506L42.7496 30.9506L38.4996 34.4006L35.0496 30.2006Z" fill="#F5FCFF"/>
+<path d="M64 23.15V41.25L62.3 43.95C60.0667 47.65 58.2167 51.8333 56.75 56.5C56.0833 59.1667 55.2333 61.6667 54.2 64H10.25C14.3167 55.0333 20.1667 48.35 27.8 43.95C31.3333 41.8833 35.2666 40.3167 39.6 39.25L39.55 39.2C50.2833 35.8667 58.4333 30.5167 64 23.15ZM0 41.25V23.15L1.95001 20.35L2.75 19C4.78333 15.5 6.35001 11.6 7.45001 7.3C8.25001 4.73333 9.18333 2.3 10.25 0H54.2L52.05 4.2C46.5167 13.8333 37.3666 20.6167 24.6 24.55L24.65 24.6C15.25 26.9333 7.68335 31.6333 1.95001 38.7L0 41.25ZM53.95 55.5L54.55 50.05L49.1 49.5L48.55 54.95L53.95 55.5ZM43 10.95L46.15 6.55L41.75 3.35L38.55 7.8L43 10.95ZM24.25 9.55L29.6 8.7L28.75 3.35L23.4 4.2L24.25 9.55ZM20.7 13.4L15.3 12.85L14.75 18.25L20.15 18.8L20.7 13.4ZM26.95 56.55L29.15 61.5L34.1 59.3L31.85 54.3L26.95 56.55Z" fill="#E7F9FF"/>
+<path d="M26.9492 56.5506L31.8492 54.3006L34.0992 59.3006L29.1492 61.5006L26.9492 56.5506ZM42.9992 10.9506L38.5492 7.80058L41.7492 3.35059L46.1492 6.55058L42.9992 10.9506Z" fill="#D9F5FF"/>
+<path d="M52.2996 26.7508L50.3997 31.9008L45.2496 29.9008L47.1996 24.8008L52.2996 26.7508ZM5.84961 39.5508L9.04962 35.2008L13.3997 38.3508L10.2496 42.7508L5.84961 39.5508Z" fill="#EEFAFF"/>
+</svg>
+
diff --git a/website/public/textures/wordart/ice3.svg b/website/public/textures/wordart/ice3.svg
new file mode 100644
index 00000000..99f8a953
--- /dev/null
+++ b/website/public/textures/wordart/ice3.svg
@@ -0,0 +1,30 @@
+
+  <svg
+    width="65"
+    height="65"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M64.1504 48.7996V64.0996H48.8503L64.1504 48.7996ZM14.1003 64.0996H0.150391V48.9996L48.6003 0.0996094H64.1504V14.0496L14.1003 64.0996ZM0.150391 14.0496V0.0996094H14.1003L0.150391 14.0496ZM49.1003 10.3996L47.0004 6.74961L43.3503 8.89961L45.4504 12.5496L49.1003 10.3996ZM57.8503 11.5496V9.24961H55.6504L55.6003 11.4996L57.8503 11.5496ZM45.5004 20.8496L49.1504 22.9996L51.3004 19.2996L47.6504 17.1496L45.5004 20.8496ZM14.8503 49.5996V47.2996H12.6504L12.6003 49.5496L14.8503 49.5996Z"
+      fill="#B8EBFC"
+    />
+    <path
+      d="M64.1504 14.0496V38.7996L38.8503 64.0996H14.1003L64.1504 14.0496ZM0.150391 38.7996V14.0496L14.1003 0.0996094H38.8503L0.150391 38.7996ZM28.3503 5.04961H26.1504L26.1003 7.29961L28.3503 7.34961V5.04961ZM35.3503 59.4496L37.5004 55.7496L33.8503 53.5996L31.7004 57.2996L35.3503 59.4496ZM53.6003 44.2496L55.8503 44.2996V41.9996H53.6504L53.6003 44.2496ZM54.7004 35.7996L50.5004 35.7496L50.4504 39.9996L54.7004 40.0996V35.7996ZM12.6003 20.9496L10.5004 17.1996L6.80042 19.2996L8.95044 22.9996L12.6003 20.9496ZM13.7504 9.24961L11.6003 12.9496L15.2504 15.0996L17.4004 11.3996L13.7504 9.24961ZM8.45044 14.1996V11.8996H6.25037L6.20044 14.1496L8.45044 14.1996Z"
+      fill="#B0E9FC"
+    />
+    <path
+      d="M57.8496 11.55L55.5996 11.5L55.6497 9.25H57.8496V11.55ZM49.0996 10.4L45.4497 12.55L43.3496 8.9L46.9996 6.75L49.0996 10.4ZM45.4996 20.85L47.6497 17.15L51.2997 19.3L49.1497 23L45.4996 20.85ZM14.8496 49.6L12.5996 49.55L12.6497 47.3H14.8496V49.6Z"
+      fill="#C6EFFC"
+    />
+    <path
+      d="M28.3491 5.0498V7.3498L26.0991 7.29981L26.1492 5.0498H28.3491ZM54.6992 35.7998V40.0998L50.4492 39.9998L50.4991 35.7498L54.6992 35.7998ZM53.5991 44.2498L53.6492 41.9998H55.8491V44.2998L53.5991 44.2498ZM35.3491 59.4498L31.6992 57.2998L33.8491 53.5998L37.4991 55.7498L35.3491 59.4498ZM8.44922 14.1998L6.19922 14.1498L6.24915 11.8998H8.44922V14.1998ZM13.7491 9.2498L17.3992 11.3998L15.2491 15.0998L11.5991 12.9498L13.7491 9.2498ZM12.5991 20.9498L8.94922 22.9998L6.79919 19.2998L10.4991 17.1998L12.5991 20.9498Z"
+      fill="#BFEDFC"
+    />
+    <path
+      d="M64.1504 38.7996V48.7996L48.8503 64.0996H38.8503L64.1504 38.7996ZM0.150391 48.9996V38.7996L38.8503 0.0996094H48.6003L0.150391 48.9996Z"
+      fill="#A6E6FC"
+    />
+  </svg>
+
diff --git a/website/public/textures/wordart/mine.svg b/website/public/textures/wordart/mine.svg
new file mode 100644
index 00000000..057b2ce6
--- /dev/null
+++ b/website/public/textures/wordart/mine.svg
@@ -0,0 +1,13 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(180deg)">
+<path d="M8.75037 47.0496L10.3004 51.6496L14.9004 50.0996L13.3504 45.4496L8.75037 47.0496ZM38.8504 0.0996094L38.3004 4.7496L47.8504 5.84961L48.5004 0.0996094H64.1504V9.34961L56.6504 11.1496L58.4004 18.6996L64.1504 17.3996V34.4996L60.8004 34.8996L61.4504 40.2996L64.1504 39.9996V64.0996H48.5504L48.9504 60.2996L39.4004 59.1996L38.8504 64.0996H0.150391V39.9996L2.8504 39.6496L2.20038 34.2496L0.150391 34.4996V17.3996L2.00037 16.9496L0.200378 9.34961H0.150391V0.0996094H38.8504ZM26.3504 9.34961L19.4504 2.9996L13.1004 9.89961L20.0004 16.2496L26.3504 9.34961ZM3.15039 3.9996L5.40039 8.94962L10.3504 6.69962L8.15039 1.79961L3.15039 3.9996ZM15.4504 38.4496L11.1004 35.2996L7.90039 39.6496L12.3004 42.8496L15.4504 38.4496ZM31.3504 18.7496L30.8004 24.1496L36.2004 24.6996L36.7504 19.2996L31.3504 18.7496ZM28.0504 38.5496L35.4504 36.1996L33.1004 28.7496L25.6504 31.0996L28.0504 38.5496ZM8.45038 29.1996L18.3004 31.7996L20.8504 21.8996L11.0004 19.3496L8.45038 29.1996ZM54.3004 23.8996L50.3504 20.1496L46.6004 24.0996L50.5504 27.8496L54.3004 23.8996ZM46.5504 11.7496L42.1504 8.54961L38.9504 12.9996L43.4004 16.1496L46.5504 11.7496ZM53.3504 30.2996L51.4004 35.3996L56.5504 37.3996L58.4504 32.2496L53.3504 30.2996ZM40.6004 33.1996L44.0504 37.3996L48.3004 33.9496L44.8004 29.7496L40.6004 33.1996ZM60.2504 55.5996L60.8504 50.1496L55.4004 49.5996L54.8504 55.0496L60.2504 55.5996ZM52.6504 49.3996L50.3004 41.9996L42.9004 44.3496L45.2504 51.7496L52.6504 49.3996ZM32.3004 48.4496L34.5004 53.3996L39.4504 51.1996L37.2004 46.1996L32.3004 48.4496ZM29.5504 48.0996L19.8004 45.8996L17.6504 55.6996L27.3504 57.8496L29.5504 48.0996ZM1.95038 57.0496L2.80042 62.3996L8.15039 61.5496L7.30042 56.1996L1.95038 57.0496Z" fill="#89A4A6"/>
+<path d="M26.3504 9.34961L20.0004 16.2496L13.1004 9.89961L19.4504 2.9996L26.3504 9.34961ZM48.5004 0.0996094L47.8504 5.84961L38.3004 4.7496L38.8504 0.0996094H48.5004ZM0.150391 9.34961H0.200378L2.00037 16.9496L0.150391 17.3996V9.34961ZM0.150391 34.4996L2.20038 34.2496L2.8504 39.6496L0.150391 39.9996V34.4996ZM38.8504 64.0996L39.4004 59.1996L48.9504 60.2996L48.5504 64.0996H38.8504ZM64.1504 39.9996L61.4504 40.2996L60.8004 34.8996L64.1504 34.4996V39.9996ZM64.1504 17.3996L58.4004 18.6996L56.6504 11.1496L64.1504 9.34961V17.3996ZM8.45038 29.1996L11.0004 19.3496L20.8504 21.8996L18.3004 31.7996L8.45038 29.1996ZM28.0504 38.5496L25.6504 31.0996L33.1004 28.7496L35.4504 36.1996L28.0504 38.5496ZM31.3504 18.7496L36.7504 19.2996L36.2004 24.6996L30.8004 24.1496L31.3504 18.7496ZM40.6004 33.1996L44.8004 29.7496L48.3004 33.9496L44.0504 37.3996L40.6004 33.1996ZM53.3504 30.2996L58.4504 32.2496L56.5504 37.3996L51.4004 35.3996L53.3504 30.2996ZM60.2504 55.5996L54.8504 55.0496L55.4004 49.5996L60.8504 50.1496L60.2504 55.5996ZM29.5504 48.0996L27.3504 57.8496L17.6504 55.6996L19.8004 45.8996L29.5504 48.0996ZM32.3004 48.4496L37.2004 46.1996L39.4504 51.1996L34.5004 53.3996L32.3004 48.4496ZM1.95038 57.0496L7.30042 56.1996L8.15039 61.5496L2.80042 62.3996L1.95038 57.0496Z" fill="#819A9C"/>
+<path d="M3.15039 3.9998L8.15039 1.7998L10.3504 6.69981L5.40039 8.94981L3.15039 3.9998ZM15.4504 38.4498L12.3004 42.8498L7.90039 39.6498L11.1004 35.2998L15.4504 38.4498ZM46.5504 11.7498L43.4004 16.1498L38.9504 12.9998L42.1504 8.5498L46.5504 11.7498ZM54.3004 23.8998L50.5504 27.8498L46.6004 24.0998L50.3504 20.1498L54.3004 23.8998ZM52.6504 49.3998L45.2504 51.7498L42.9004 44.3498L50.3004 41.9998L52.6504 49.3998ZM8.75037 47.0498L13.3504 45.4498L14.9004 50.0998L10.3004 51.6498L8.75037 47.0498Z" fill="#8EABAD"/>
+<path d="M20.0504 8.59961L24.6004 4.54961L18.8004 2.59961L20.0504 8.59961ZM37.6504 12.9996L32.2004 9.7496L23.8004 14.7496L24.8004 11.7996L16.9504 13.3996L10.8004 9.7496L2.30042 14.8496L0.150391 12.4496V2.09961H4.70038L9.40039 10.2996L14.1504 2.09961H34.3004L37.9004 6.19962L39.3004 2.09961H64.1504V12.3996L63.6004 11.7996L62.5504 15.1496L54.9504 10.6496L52.8504 2.44962L45.8504 9.34961L51.5504 10.9496L42.8004 16.0996L42.0004 15.6496L43.5004 12.9996H37.6504ZM57.9004 3.19962L59.1504 9.19962L63.7004 5.14961L57.9004 3.19962Z" fill="#2ECC71"/>
+<path d="M57.8992 3.19962L63.6992 5.14961L59.1492 9.19962L57.8992 3.19962ZM20.0493 8.59961L18.7993 2.59961L24.5992 4.54961L20.0493 8.59961ZM51.5493 10.9496L45.8492 9.34961L52.8492 2.44962L54.9492 10.6496L53.4992 9.7496L51.5493 10.9496ZM39.2993 2.09961L37.8992 6.19962L34.2993 2.09961H39.2993ZM16.9492 13.3996L24.7993 11.7996L23.7993 14.7496L21.4992 16.0996L16.9492 13.3996Z" fill="#2CC46C"/>
+<path d="M16.9504 13.4L21.5004 16.1L23.8004 14.75L32.2004 9.75L37.6504 13L42.0004 15.65L42.8004 16.1L51.5504 10.95L53.5004 9.75L54.9504 10.65L62.5504 15.15L64.1504 16.1V20.2L53.5004 12.2L42.8004 20.2L32.2004 12.2L21.5004 20.2L10.8004 12.2L0.150391 20.2V16.1L2.30042 14.85L10.8004 9.75L16.9504 13.4Z" fill="#28B162"/>
+<path d="M37.6504 12.9998H43.5004L42.0004 15.6498L37.6504 12.9998ZM62.5504 15.1498L63.6004 11.7998L64.1504 12.3998V16.0998L62.5504 15.1498ZM0.150391 12.4498L2.30042 14.8498L0.150391 16.0998V12.4498Z" fill="#2ABB67"/>
+<path d="M14.1492 2.09961L9.39923 10.2996L4.69922 2.09961H14.1492Z" fill="#30D475"/>
+<path d="M64.1504 20.2002V26.1502L53.5004 15.6502L42.8004 26.1502L32.2004 15.6502L21.5004 26.1502L10.8004 15.6502L0.150391 26.1502V20.2002L10.8004 12.2002L21.5004 20.2002L32.2004 12.2002L42.8004 20.2002L53.5004 12.2002L64.1504 20.2002Z" fill="black" fill-opacity="0.101961"/>
+</svg>
+
diff --git a/website/public/textures/wordart/mine4.svg b/website/public/textures/wordart/mine4.svg
new file mode 100644
index 00000000..ef2f710f
--- /dev/null
+++ b/website/public/textures/wordart/mine4.svg
@@ -0,0 +1,12 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"  style="transform:rotate(180deg)">
+<path d="M38.8504 0.0996094L38.3004 4.7496L47.8504 5.84961L48.5004 0.0996094H64.1504V9.34961L56.6504 11.1496L58.4004 18.6996L64.1504 17.3996V34.4996L60.8004 34.8996L61.4504 40.2996L64.1504 39.9996V64.0996H48.5504L48.9504 60.2996L39.4004 59.1996L38.8504 64.0996H0.150391V39.9996L2.8504 39.6496L2.20038 34.2496L0.150391 34.4996V17.3996L2.00037 16.9496L0.200378 9.34961H0.150391V0.0996094H38.8504ZM54.3004 23.8996L50.3504 20.1496L46.6004 24.0996L50.5504 27.8496L54.3004 23.8996ZM53.3504 30.2996L51.4004 35.3996L56.5504 37.3996L58.4504 32.2496L53.3504 30.2996ZM52.6504 49.3996L50.3004 41.9996L42.9004 44.3496L45.2504 51.7496L52.6504 49.3996ZM55.4004 49.5996L54.8504 55.0496L60.2504 55.5996L60.8504 50.1496L55.4004 49.5996ZM3.15039 3.9996L5.40039 8.94962L10.3504 6.69962L8.15039 1.79961L3.15039 3.9996ZM42.1504 8.54961L38.9504 12.9996L43.4004 16.1496L46.5504 11.7496L42.1504 8.54961ZM19.4504 2.9996L13.1004 9.89961L20.0004 16.2496L26.3504 9.34961L19.4504 2.9996ZM11.1004 35.2996L7.90039 39.6496L12.3004 42.8496L15.4504 38.4496L11.1004 35.2996ZM34.5004 53.3996L39.4504 51.1996L37.2004 46.1996L32.3004 48.4496L34.5004 53.3996ZM27.3504 57.8496L29.5504 48.0996L19.8004 45.8996L17.6504 55.6996L27.3504 57.8496ZM40.6004 33.1996L44.0504 37.3996L48.3004 33.9496L44.8004 29.7496L40.6004 33.1996ZM35.4504 36.1996L33.1004 28.7496L25.6504 31.0996L28.0504 38.5496L35.4504 36.1996ZM36.2004 24.6996L36.7504 19.2996L31.3504 18.7496L30.8004 24.1496L36.2004 24.6996ZM11.0004 19.3496L8.45038 29.1996L18.3004 31.7996L20.8504 21.8996L11.0004 19.3496ZM10.3004 51.6496L14.9004 50.0996L13.3504 45.4496L8.75037 47.0496L10.3004 51.6496ZM8.15039 61.5496L7.30042 56.1996L1.95038 57.0496L2.80042 62.3996L8.15039 61.5496Z" fill="#89A4A6"/>
+<path d="M8.15039 61.5496L2.80042 62.3996L1.95038 57.0496L7.30042 56.1996L8.15039 61.5496ZM48.5004 0.0996094L47.8504 5.84961L38.3004 4.7496L38.8504 0.0996094H48.5004ZM0.150391 9.34961H0.200378L2.00037 16.9496L0.150391 17.3996V9.34961ZM0.150391 34.4996L2.20038 34.2496L2.8504 39.6496L0.150391 39.9996V34.4996ZM38.8504 64.0996L39.4004 59.1996L48.9504 60.2996L48.5504 64.0996H38.8504ZM64.1504 39.9996L61.4504 40.2996L60.8004 34.8996L64.1504 34.4996V39.9996ZM64.1504 17.3996L58.4004 18.6996L56.6504 11.1496L64.1504 9.34961V17.3996ZM53.3504 30.2996L58.4504 32.2496L56.5504 37.3996L51.4004 35.3996L53.3504 30.2996ZM55.4004 49.5996L60.8504 50.1496L60.2504 55.5996L54.8504 55.0496L55.4004 49.5996ZM19.4504 2.9996L26.3504 9.34961L20.0004 16.2496L13.1004 9.89961L19.4504 2.9996ZM11.0004 19.3496L20.8504 21.8996L18.3004 31.7996L8.45038 29.1996L11.0004 19.3496ZM36.2004 24.6996L30.8004 24.1496L31.3504 18.7496L36.7504 19.2996L36.2004 24.6996ZM35.4504 36.1996L28.0504 38.5496L25.6504 31.0996L33.1004 28.7496L35.4504 36.1996ZM40.6004 33.1996L44.8004 29.7496L48.3004 33.9496L44.0504 37.3996L40.6004 33.1996ZM27.3504 57.8496L17.6504 55.6996L19.8004 45.8996L29.5504 48.0996L27.3504 57.8496ZM34.5004 53.3996L32.3004 48.4496L37.2004 46.1996L39.4504 51.1996L34.5004 53.3996Z" fill="#819A9C"/>
+<path d="M54.3004 23.8998L50.5504 27.8498L46.6004 24.0998L50.3504 20.1498L54.3004 23.8998ZM52.6504 49.3998L45.2504 51.7498L42.9004 44.3498L50.3004 41.9998L52.6504 49.3998ZM3.15039 3.9998L8.15039 1.7998L10.3504 6.69981L5.40039 8.94981L3.15039 3.9998ZM42.1504 8.5498L46.5504 11.7498L43.4004 16.1498L38.9504 12.9998L42.1504 8.5498ZM11.1004 35.2998L15.4504 38.4498L12.3004 42.8498L7.90039 39.6498L11.1004 35.2998ZM10.3004 51.6498L8.75037 47.0498L13.3504 45.4498L14.9004 50.0998L10.3004 51.6498Z" fill="#8EABAD"/>
+<path d="M46.7504 11.7002C52.7837 11.4335 58.5837 12.3668 64.1504 14.5002V17.4502L62.4004 16.7002C60.5337 15.9002 58.6337 15.2835 56.7004 14.8502L54.2504 14.3502C50.9504 13.8169 47.6004 13.7502 44.2004 14.1502C40.9337 14.5502 37.5837 15.4002 34.1504 16.7002L32.1504 17.4502C29.4837 18.7502 26.767 19.6835 24.0004 20.2502C17.367 21.6502 10.4337 21.1002 3.20038 18.6002L0.150391 17.4502V14.5002L4.6004 15.8502C8.13374 16.7502 11.6004 17.2669 15.0004 17.4002L20.5004 17.2502L24.0004 16.8002L24.6004 16.7002C27.1671 16.2002 29.6837 15.4668 32.1504 14.5002C37.1504 12.8002 42.017 11.8669 46.7504 11.7002ZM38.7004 7.90019L41.9004 3.4502L46.3004 6.65019L43.1504 11.0502L38.7004 7.90019Z" fill="#D7C9A8"/>
+<path d="M64.1504 14.5004C58.5837 12.367 52.7837 11.4337 46.7504 11.7004C48.8504 9.43373 50.667 6.96705 52.2004 4.30038L53.5504 1.90039H64.1504V14.5004ZM20.5004 17.2504L15.0004 17.4004L15.4504 12.9504L20.8504 13.5004L20.5004 17.2504ZM4.6004 15.8504L0.150391 14.5004V1.90039H9.6004L7.6004 7.40039C6.83374 10.4004 5.83374 13.2171 4.6004 15.8504ZM29.7504 8.80038L24.4004 9.65039L23.5504 4.30038L28.9004 3.45039L29.7504 8.80038Z" fill="#ECDCB8"/>
+<path d="M64.1504 1.89961H53.5504H9.6004H0.150391V0.0996094H64.1504V1.89961Z" fill="#FCEBC4"/>
+<path d="M46.7496 11.7004C42.0162 11.8671 37.1496 12.8004 32.1496 14.5004C29.6829 15.467 27.1663 16.2004 24.5996 16.7004L23.9996 16.8004L20.4996 17.2504L20.8496 13.5004L15.4496 12.9504L14.9996 17.4004C11.5996 17.2671 8.13294 16.7504 4.59961 15.8504C5.83294 13.2171 6.83294 10.4004 7.59961 7.40039L9.59961 1.90039H53.5496L52.1996 4.30038C50.6663 6.96705 48.8496 9.43373 46.7496 11.7004ZM29.7496 8.80038L28.8996 3.45039L23.5496 4.30038L24.3996 9.65039L29.7496 8.80038ZM38.6996 7.90039L43.1496 11.0504L46.2996 6.65039L41.8996 3.45039L38.6996 7.90039Z" fill="#E0D1AF"/>
+<path d="M0.150391 17.4497L3.20038 18.5997C10.4337 21.0997 17.367 21.6497 24.0004 20.2497C26.767 19.683 29.4837 18.7497 32.1504 17.4497L34.1504 16.6997C37.5837 15.3997 40.9337 14.5497 44.2004 14.1497C47.6004 13.7497 50.9504 13.8164 54.2504 14.3497L56.7004 14.8497C58.6337 15.2831 60.5337 15.8997 62.4004 16.6997L64.1504 17.4497V21.5997C62.0171 20.3331 59.867 19.3331 57.7004 18.5997C55.667 17.8997 53.6004 17.4497 51.5004 17.2497C46.767 16.783 41.917 17.5164 36.9504 19.4497C35.3504 20.0497 33.7504 20.7664 32.1504 21.5997L30.0504 22.7997C28.0504 23.7997 26.0337 24.5831 24.0004 25.1497L21.1004 25.7997C14.6671 26.7997 7.98375 25.5497 1.05042 22.0497L0.150391 21.5997V17.4497Z" fill="black" fill-opacity="0.101961"/>
+</svg>
+
diff --git a/website/public/textures/wordart/rock.svg b/website/public/textures/wordart/rock.svg
new file mode 100644
index 00000000..414a74dc
--- /dev/null
+++ b/website/public/textures/wordart/rock.svg
@@ -0,0 +1,10 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.5004 0.0996094H64.1504V9.34961L56.6504 11.1496L58.4004 18.6996L64.1504 17.3996V34.4996L60.8004 34.8996L61.4504 40.2996L64.1504 39.9996V64.0996H48.5504L48.9504 60.2996L39.4004 59.1996L38.8504 64.0996H0.150391V39.9996L2.8504 39.6496L2.20038 34.2496L0.150391 34.4996V17.3996L2.00037 16.9496L0.200378 9.34961H0.150391V0.0996094H38.8504L38.3004 4.7496L47.8504 5.84961L48.5004 0.0996094ZM42.1504 8.54961L38.9504 12.9996L43.4004 16.1496L46.5504 11.7496L42.1504 8.54961ZM19.4504 2.9996L13.1004 9.89961L20.0004 16.2496L26.3504 9.34961L19.4504 2.9996ZM5.40039 8.94962L10.3504 6.69962L8.15039 1.79961L3.15039 3.9996L5.40039 8.94962ZM15.4504 38.4496L11.1004 35.2996L7.90039 39.6496L12.3004 42.8496L15.4504 38.4496ZM11.0004 19.3496L8.45038 29.1996L18.3004 31.7996L20.8504 21.8996L11.0004 19.3496ZM8.75037 47.0496L10.3004 51.6496L14.9004 50.0996L13.3504 45.4496L8.75037 47.0496ZM2.80042 62.3996L8.15039 61.5496L7.30042 56.1996L1.95038 57.0496L2.80042 62.3996ZM50.5504 27.8496L54.3004 23.8996L50.3504 20.1496L46.6004 24.0996L50.5504 27.8496ZM37.2004 46.1996L32.3004 48.4496L34.5004 53.3996L39.4504 51.1996L37.2004 46.1996ZM27.3504 57.8496L29.5504 48.0996L19.8004 45.8996L17.6504 55.6996L27.3504 57.8496ZM36.2004 24.6996L36.7504 19.2996L31.3504 18.7496L30.8004 24.1496L36.2004 24.6996ZM35.4504 36.1996L33.1004 28.7496L25.6504 31.0996L28.0504 38.5496L35.4504 36.1996ZM58.4504 32.2496L53.3504 30.2996L51.4004 35.3996L56.5504 37.3996L58.4504 32.2496ZM44.8004 29.7496L40.6004 33.1996L44.0504 37.3996L48.3004 33.9496L44.8004 29.7496ZM52.6504 49.3996L50.3004 41.9996L42.9004 44.3496L45.2504 51.7496L52.6504 49.3996ZM55.4004 49.5996L54.8504 55.0496L60.2504 55.5996L60.8504 50.1496L55.4004 49.5996Z" fill="#89A4A6"/>
+<path d="M42.1504 8.5498L46.5504 11.7498L43.4004 16.1498L38.9504 12.9998L42.1504 8.5498ZM5.40039 8.94981L3.15039 3.9998L8.15039 1.7998L10.3504 6.69981L5.40039 8.94981ZM15.4504 38.4498L12.3004 42.8498L7.90039 39.6498L11.1004 35.2998L15.4504 38.4498ZM8.75037 47.0498L13.3504 45.4498L14.9004 50.0998L10.3004 51.6498L8.75037 47.0498ZM50.5504 27.8498L46.6004 24.0998L50.3504 20.1498L54.3004 23.8998L50.5504 27.8498ZM52.6504 49.3998L45.2504 51.7498L42.9004 44.3498L50.3004 41.9998L52.6504 49.3998Z" fill="#8EABAD"/>
+<path d="M38.8504 0.0996094H48.5004L47.8504 5.84961L38.3004 4.7496L38.8504 0.0996094ZM64.1504 9.34961V17.3996L58.4004 18.6996L56.6504 11.1496L64.1504 9.34961ZM64.1504 34.4996V39.9996L61.4504 40.2996L60.8004 34.8996L64.1504 34.4996ZM48.5504 64.0996H38.8504L39.4004 59.1996L48.9504 60.2996L48.5504 64.0996ZM0.150391 39.9996V34.4996L2.20038 34.2496L2.8504 39.6496L0.150391 39.9996ZM0.150391 17.3996V9.34961H0.200378L2.00037 16.9496L0.150391 17.3996ZM19.4504 2.9996L26.3504 9.34961L20.0004 16.2496L13.1004 9.89961L19.4504 2.9996ZM11.0004 19.3496L20.8504 21.8996L18.3004 31.7996L8.45038 29.1996L11.0004 19.3496ZM2.80042 62.3996L1.95038 57.0496L7.30042 56.1996L8.15039 61.5496L2.80042 62.3996ZM44.8004 29.7496L48.3004 33.9496L44.0504 37.3996L40.6004 33.1996L44.8004 29.7496ZM58.4504 32.2496L56.5504 37.3996L51.4004 35.3996L53.3504 30.2996L58.4504 32.2496ZM35.4504 36.1996L28.0504 38.5496L25.6504 31.0996L33.1004 28.7496L35.4504 36.1996ZM36.2004 24.6996L30.8004 24.1496L31.3504 18.7496L36.7504 19.2996L36.2004 24.6996ZM27.3504 57.8496L17.6504 55.6996L19.8004 45.8996L29.5504 48.0996L27.3504 57.8496ZM37.2004 46.1996L39.4504 51.1996L34.5004 53.3996L32.3004 48.4496L37.2004 46.1996ZM55.4004 49.5996L60.8504 50.1496L60.2504 55.5996L54.8504 55.0496L55.4004 49.5996Z" fill="#819A9C"/>
+<path d="M25.3504 10.4496L26.3504 11.3496L20.0004 18.2496L13.1004 11.8996L14.1004 10.8496L20.0004 16.2496L25.3504 10.4496ZM48.3004 2.09961H48.5004L47.8504 7.84961L38.3004 6.7496L38.5504 4.79961L47.8504 5.84961L48.3004 2.09961ZM45.6004 13.0996L46.5504 13.7496L43.4004 18.1496L38.9504 14.9996L39.9004 13.6996L43.4004 16.1496L45.6004 13.0996ZM64.1504 17.3996V19.3996L58.4004 20.6996L56.6504 13.1496L57.1004 13.0496L58.4004 18.6996L64.1504 17.3996ZM9.6004 7.04961L10.3504 8.69962L5.40039 10.9496L3.15039 5.9996L3.90039 5.69962L5.40039 8.94962L9.6004 7.04961ZM1.55042 17.0496L2.00037 18.9496L0.150391 19.3996V17.3996L1.55042 17.0496ZM2.65039 39.6996L2.8504 41.6496L0.150391 41.9996V39.9996L2.65039 39.6996ZM20.4004 23.7996L20.8504 23.8996L18.3004 33.7996L8.45038 31.1996L8.95038 29.3496L18.3004 31.7996L20.4004 23.7996ZM14.5004 39.7996L15.4504 40.4496L12.3004 44.8496L7.90039 41.6496L8.8504 40.3496L12.3004 42.8496L14.5004 39.7996ZM9.3504 48.8496L10.3004 51.6496L14.3004 50.2996L14.9004 52.0996L10.3004 53.6496L8.75037 49.0496L9.3504 48.8496ZM2.25037 58.9996L2.80042 62.3996L7.8504 61.5996L8.15039 63.5496L4.70038 64.0996H2.75037L1.95038 59.0496L2.25037 58.9996ZM29.1504 49.9996L29.5504 50.0996L27.3504 59.8496L17.6504 57.6996L18.1004 55.7996L27.3504 57.8496L29.1504 49.9996ZM53.3004 24.9496L54.3004 25.8996L50.5504 29.8496L46.6004 26.0996L47.6004 25.0496L50.5504 27.8496L53.3004 24.9496ZM47.3004 34.7496L48.3004 35.9496L44.0504 39.3996L40.6004 35.1996L41.6004 34.3996L44.0504 37.3996L47.3004 34.7496ZM57.8004 33.9996L58.4504 34.2496L56.5504 39.3996L51.4004 37.3996L52.1004 35.6496L56.5504 37.3996L57.8004 33.9996ZM36.5504 21.2996H36.7504L36.2004 26.6996L30.8004 26.1496L31.0004 24.1996L36.2004 24.6996L36.5504 21.2996ZM26.2504 32.9496L28.0504 38.5496L34.9004 36.3996L35.4504 38.1996L28.0504 40.5496L25.6504 33.0996L26.2504 32.9496ZM38.7004 51.5496L39.4504 53.1996L34.5004 55.3996L32.3004 50.4496L33.0504 50.0996L34.5004 53.3996L38.7004 51.5496ZM48.7504 62.2996H48.9504L48.7504 64.0996H48.5504L48.7504 62.2996ZM52.1004 49.5996L52.6504 51.3996L45.2504 53.7496L42.9004 46.3496L43.5004 46.1996L45.2504 51.7496L52.1004 49.5996ZM60.6504 52.1496H60.8504L60.2504 57.5996L54.8504 57.0496L55.0504 55.0996L60.2504 55.5996L60.6504 52.1496ZM61.0504 36.8996L61.4504 40.2996L64.1504 39.9996V41.9996L61.4504 42.2996L60.8004 36.8996H61.0504Z" fill="black" fill-opacity="0.101961"/>
+<path d="M61.0504 36.8996L60.8004 34.8996L64.1504 34.4996V39.9996L61.4504 40.2996L61.0504 36.8996ZM38.5504 4.79961L38.3004 4.7496L38.8504 0.0996094H48.5004L48.3004 2.09961L47.8504 5.84961L38.5504 4.79961ZM57.1004 13.0496L56.6504 11.1496L64.1504 9.34961V17.3996L58.4004 18.6996L57.1004 13.0496ZM3.90039 5.69962L3.15039 3.9996L8.15039 1.79961L10.3504 6.69962L9.6004 7.04961L5.40039 8.94962L3.90039 5.69962ZM0.150391 17.3996V9.34961H0.200378L2.00037 16.9496L1.55042 17.0496L0.150391 17.3996ZM0.150391 39.9996V34.4996L2.20038 34.2496L2.8504 39.6496L2.65039 39.6996L0.150391 39.9996ZM8.95038 29.3496L8.45038 29.1996L11.0004 19.3496L20.8504 21.8996L20.4004 23.7996L18.3004 31.7996L8.95038 29.3496ZM7.8504 61.5996L2.80042 62.3996L2.25037 58.9996L1.95038 57.0496L7.30042 56.1996L8.15039 61.5496L7.8504 61.5996ZM18.1004 55.7996L17.6504 55.6996L19.8004 45.8996L29.5504 48.0996L29.1504 49.9996L27.3504 57.8496L18.1004 55.7996ZM47.6004 25.0496L46.6004 24.0996L50.3504 20.1496L54.3004 23.8996L53.3004 24.9496L50.5504 27.8496L47.6004 25.0496ZM41.6004 34.3996L40.6004 33.1996L44.8004 29.7496L48.3004 33.9496L47.3004 34.7496L44.0504 37.3996L41.6004 34.3996ZM52.1004 35.6496L51.4004 35.3996L53.3504 30.2996L58.4504 32.2496L57.8004 33.9996L56.5504 37.3996L52.1004 35.6496ZM31.0004 24.1996L30.8004 24.1496L31.3504 18.7496L36.7504 19.2996L36.5504 21.2996L36.2004 24.6996L31.0004 24.1996ZM48.5504 64.0996H38.8504L39.4004 59.1996L48.9504 60.2996L48.7504 62.2996L48.5504 64.0996ZM43.5004 46.1996L42.9004 44.3496L50.3004 41.9996L52.6504 49.3996L52.1004 49.5996L45.2504 51.7496L43.5004 46.1996Z" fill="#A1C2C4"/>
+<path d="M14.1004 10.85L13.1004 9.90001L19.4504 3L26.3504 9.35001L25.3504 10.45L20.0004 16.25L14.1004 10.85ZM39.9004 13.7L38.9504 13L42.1504 8.55L46.5504 11.75L45.6004 13.1L43.4004 16.15L39.9004 13.7ZM8.8504 40.35L7.90039 39.65L11.1004 35.3L15.4504 38.45L14.5004 39.8L12.3004 42.85L8.8504 40.35ZM14.3004 50.3L10.3004 51.65L9.3504 48.85L8.75037 47.05L13.3504 45.45L14.9004 50.1L14.3004 50.3ZM34.9004 36.4L28.0504 38.55L26.2504 32.95L25.6504 31.1L33.1004 28.75L35.4504 36.2L34.9004 36.4ZM33.0504 50.1L32.3004 48.45L37.2004 46.2L39.4504 51.2L38.7004 51.55L34.5004 53.4L33.0504 50.1ZM55.0504 55.1L54.8504 55.05L55.4004 49.6L60.8504 50.15L60.6504 52.15L60.2504 55.6L55.0504 55.1Z" fill="#95B4B6"/>
+</svg>
+
diff --git a/website/public/textures/wordart/rock3.svg b/website/public/textures/wordart/rock3.svg
new file mode 100644
index 00000000..5cc1b9e1
--- /dev/null
+++ b/website/public/textures/wordart/rock3.svg
@@ -0,0 +1,9 @@
+
+<svg width="64" height="64"  viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.9004 12.9496L39.7004 12.7996L31.3503 7.04962L20.0504 12.3996L19.8004 15.4496L19.0004 24.8496L29.3004 31.9496L40.6003 26.6496L41.5004 16.0496L41.6504 14.1496L39.9004 12.9496ZM0.150391 5.9996V0.0996094H8.85034L8.80042 3.79962L8.85034 3.84961L18.4004 9.4996L28.1504 3.9996L28.2004 0.0996094H41.1504L38.7504 1.79962L39.7004 10.8496L48.0004 14.5996L55.4004 9.2496L54.4504 0.199615L54.1504 0.0996094H64.1504V5.9996H61.2004L54.6003 17.0996L55.2004 18.1496L60.9504 28.3496H64.1504V39.9496L52.6003 40.0996L46.1504 51.5496L46.7504 52.5496L52.8503 62.8496L64.1504 62.7496V64.0996H54.2004L46.1504 60.4996L41.1504 64.0996H28.2504L28.3004 58.7996V56.7996L18.6504 51.1496L8.90039 56.5996L8.85034 64.0996H0.150391V62.7496L2.00037 62.6996L7.90039 52.2496L8.45044 51.1996L1.75037 39.9496H0.150391V28.3496L9.85034 28.4496L15.8503 18.3496L16.4004 17.3496L10.0504 6.09961L0.150391 5.9996ZM25.4504 32.0496L16.3004 28.4996L8.65039 34.5996L10.1003 44.3496L19.2504 47.9496L26.9504 41.7996L25.4504 32.0496ZM58.0004 31.6996L55.2504 24.1496L47.4004 22.7496L42.2004 28.8996L44.9504 36.3996L52.8004 37.8496L58.0004 31.6996ZM45.3004 47.9996V45.9996L38.5004 39.9496L29.9004 42.7496L28.0004 51.6496V53.6496L34.7504 59.6996L43.4004 56.8996L45.3004 47.9996Z" fill="#677C7E"/>
+<path d="M8.85034 0.0996094H28.2004L28.1504 3.9996L18.4004 9.4996L8.85034 3.84961L8.80042 3.79962L8.85034 0.0996094ZM64.1504 7.9996V28.3496H60.9504L55.2004 18.1496L61.2004 7.9996H64.1504ZM64.1504 41.9496V62.7496L52.8503 62.8496L46.7504 52.5496L52.6003 42.0996L64.1504 41.9496ZM28.2504 64.0996H8.90039V58.5996L18.6504 53.1496L28.3004 58.7996L28.2504 64.0996ZM0.150391 62.7496V41.9496H1.75037L7.90039 52.2496L2.00037 62.6996L0.150391 62.7496ZM0.150391 28.3496V7.9996L10.0504 8.09961L15.8503 18.3496L9.85034 28.4496L0.150391 28.3496ZM19.8004 15.4496L19.9004 14.4496L31.3503 9.04962L41.5004 16.0496L40.6003 26.6496L29.3004 31.9496L19.0004 24.8496L19.8004 15.4496ZM45.3004 47.9996L43.4004 56.8996L34.7504 59.6996L28.0004 53.6496L29.9004 44.7496L38.5004 41.9496L45.3004 47.9996Z" fill="#5F7374"/>
+<path d="M45.3004 48L38.5004 41.95L29.9004 44.75L28.0004 53.65V51.65L29.9004 42.75L38.5004 39.95L45.3004 46V48ZM64.1504 6V8H61.2004L55.2004 18.15L54.6003 17.1L61.2004 6H64.1504ZM64.1504 39.95V41.95L52.6003 42.1L46.7504 52.55L46.1504 51.55L52.6003 40.1L64.1504 39.95ZM8.90039 64.1H8.85034L8.90039 56.6L18.6504 51.15L28.3004 56.8V58.8L18.6504 53.15L8.90039 58.6V64.1ZM0.150391 41.95V39.95H1.75037L8.45044 51.2L7.90039 52.25L1.75037 41.95H0.150391ZM0.150391 8V6L10.0504 6.10001L16.4004 17.35L15.8503 18.35L10.0504 8.10001L0.150391 8ZM19.8004 15.45L20.0504 12.4L31.3503 7.05002L39.7004 12.8V12.85L39.9004 12.95L41.6504 14.15L41.5004 16.05L31.3503 9.05002L19.9004 14.45L19.8004 15.45Z" fill="#5B6F70"/>
+<path d="M41.1504 0.0996094H54.1504L54.4504 0.199615L55.4004 9.2496L48.0004 14.5996L39.7004 10.8496L38.7504 1.79962L41.1504 0.0996094ZM54.2004 64.0996H41.1504L46.1504 60.4996L54.2004 64.0996ZM58.0004 31.6996L52.8004 37.8496L44.9504 36.3996L42.2004 28.8996L47.4004 22.7496L55.2504 24.1496L58.0004 31.6996ZM25.4504 32.0496L26.9504 41.7996L19.2504 47.9496L10.1003 44.3496L8.65039 34.5996L16.3004 28.4996L25.4504 32.0496Z" fill="#6C8385"/>
+<path d="M39.8992 12.9498L39.6992 12.8498V12.7998L39.8992 12.9498Z" fill="#AD7E6E"/>
+</svg>
+
diff --git a/website/public/textures/wordart/sand.svg b/website/public/textures/wordart/sand.svg
new file mode 100644
index 00000000..f38e70e3
--- /dev/null
+++ b/website/public/textures/wordart/sand.svg
@@ -0,0 +1,8 @@
+
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.95 56.55L29.15 61.5L34.1 59.3L31.85 54.3L26.95 56.55ZM54.2 0L52.05 4.2C46.5167 13.8333 37.3666 20.6167 24.6 24.55L24.65 24.6C14.15 27.2 5.93333 32.75 0 41.25V23.15L2.75 19C4.78333 15.5 6.35001 11.6 7.45001 7.3C8.25001 4.73333 9.18333 2.3 10.25 0H54.2ZM10.25 64C16.2167 50.8667 26 42.6167 39.6 39.25L39.55 39.2C50.2833 35.8667 58.4333 30.5167 64 23.15V41.25C61 45.5833 58.5833 50.6667 56.75 56.5C56.0833 59.1667 55.2333 61.6667 54.2 64H10.25ZM52.3 26.75L50.4 31.9L45.25 29.9L47.2 24.8L52.3 26.75ZM49.1 49.5L48.55 54.95L53.95 55.5L54.55 50.05L49.1 49.5ZM41.75 3.35L38.55 7.8L43 10.95L46.15 6.55L41.75 3.35ZM29.6 8.7L28.75 3.35L23.4 4.2L24.25 9.55L29.6 8.7ZM20.7 13.4L15.3 12.85L14.75 18.25L20.15 18.8L20.7 13.4ZM13.4 38.35L10.25 42.75L5.84998 39.55L9.04999 35.2L13.4 38.35Z" fill="#E0D1AF"/>
+<path d="M0 41.25C5.93333 32.75 14.15 27.2 24.65 24.6L24.6 24.55C37.3666 20.6167 46.5167 13.8333 52.05 4.2L54.2 0H64V23.15C58.4333 30.5167 50.2833 35.8667 39.55 39.2L39.6 39.25C26 42.6167 16.2167 50.8667 10.25 64H0V41.25ZM10.25 0C9.18333 2.3 8.25001 4.73333 7.45001 7.3C6.35001 11.6 4.78333 15.5 2.75 19L0 23.15V0H10.25ZM55.2 20.95L58.95 17L55 13.25L51.25 17.2L55.2 20.95ZM52.3 26.75L47.2 24.8L45.25 29.9L50.4 31.9L52.3 26.75ZM64 41.25V64H54.2C55.2333 61.6667 56.0833 59.1667 56.75 56.5C58.5833 50.6667 61 45.5833 64 41.25ZM49.1 49.5L54.55 50.05L53.95 55.5L48.55 54.95L49.1 49.5ZM29.6 8.7L24.25 9.55L23.4 4.2L28.75 3.35L29.6 8.7ZM13.4 38.35L9.04999 35.2L5.84998 39.55L10.25 42.75L13.4 38.35ZM35.05 30.2L38.5 34.4L42.75 30.95L39.25 26.75L35.05 30.2ZM14.75 50L13.2 45.35L8.59998 46.95L10.15 51.55L14.75 50Z" fill="#ECDCB8"/>
+<path d="M14.7496 50L10.1497 51.55L8.59961 46.95L13.1996 45.35L14.7496 50ZM55.1996 20.95L51.2496 17.2L54.9996 13.25L58.9496 17L55.1996 20.95ZM35.0496 30.2L39.2496 26.75L42.7496 30.95L38.4996 34.4L35.0496 30.2Z" fill="#F3E2BE"/>
+<path d="M41.75 3.35059L46.15 6.55058L43 10.9506L38.55 7.80058L41.75 3.35059ZM20.7 13.4006L20.15 18.8006L14.75 18.2506L15.3 12.8506L20.7 13.4006ZM26.95 56.5506L31.85 54.3006L34.1 59.3006L29.15 61.5006L26.95 56.5506Z" fill="#D7C9A8"/>
+</svg>
+
diff --git a/website/public/textures/wordart/wood.svg b/website/public/textures/wordart/wood.svg
new file mode 100644
index 00000000..09658059
--- /dev/null
+++ b/website/public/textures/wordart/wood.svg
@@ -0,0 +1,9 @@
+
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg)">
+<path d="M31.9 27.25L32.8 3.2L20.4 2.75L19.9 16.25L16 15.8L15.5 0H35.3L36.1 26.95L31.9 27.25ZM18.65 47.85L18.1 62.3L30.5 62.8L30.65 58.9L35.15 58.6L35.3 64H15.5L15.05 47.4L18.65 47.85ZM3.79999 64H0V0H3.79999L4.70001 32.15L12.1 31.95L11.6 36.4L3 36.65L3.79999 64ZM38.7 37.85L38.35 33.4L48 33.1L47.85 27.8L50.4 27.95L49.75 60.3L46.95 60.15L46.25 37.65L38.7 37.85ZM57.25 3.7L57.45 0H64V64H57.45L57.5 63.25L61.4 63.3L62.6 3.8L57.25 3.7Z" fill="#B47B41"/>
+<path d="M57.25 3.7L62.6 3.8L61.4 63.3L57.5 63.25L49.7 63.05L49.75 60.3L50.4 27.95L50.9 3.55L57.25 3.7ZM19.9 16.25L20.4 2.75L32.8 3.2L31.9 27.25L30.65 58.9L30.5 62.8L18.1 62.3L18.65 47.85L19.9 16.25ZM36.1 26.95L35.3 0H47.05L47.85 27.8L48 33.1L38.35 33.4L36.25 33.45L36.1 26.95ZM15.5 0L16 15.8L16.45 31.8L12.1 31.95L4.70001 32.15L3.79999 0H15.5ZM13.6 7.55L7.34998 7.45L7 28.65L13.3 28.8L13.6 7.55ZM3.79999 64L3 36.65L11.6 36.4L14.7 36.3L15.05 47.4L15.5 64H3.79999ZM38.7 37.85L46.25 37.65L46.95 60.15L47.05 64H35.3L35.15 58.6L34.55 37.95L38.7 37.85ZM58.6 14.1L52.35 13.85L51.55 35.1L57.8 35.35L58.6 14.1ZM26.8 31.6L20.55 31.95L21.8 53.15L28.05 52.85L26.8 31.6ZM43.35 62.3L44.15 41.05L37.9 40.8L37.1 62.05L43.35 62.3Z" fill="#C48647"/>
+<path d="M43.35 62.3002L37.1 62.0502L37.9 40.8002L44.15 41.0502L43.35 62.3002ZM13.6 7.5502L13.3 28.8002L7 28.6502L7.34998 7.4502L13.6 7.5502Z" fill="#CB8B49"/>
+<path d="M31.8997 27.25L36.0996 26.95L36.2496 33.45L38.3496 33.4L38.6996 37.85L34.5496 37.95L35.1497 58.6L30.6497 58.9L31.8997 27.25ZM15.9996 15.8L19.8997 16.25L18.6497 47.85L15.0496 47.4L14.6996 36.3L11.5996 36.4L12.0996 31.95L16.4496 31.8L15.9996 15.8ZM46.9496 60.15L49.7496 60.3L49.6996 63.05L57.4996 63.25L57.4496 64H47.0496L46.9496 60.15ZM50.3997 27.95L47.8496 27.8L47.0496 0H57.4496L57.2496 3.7L50.8997 3.55L50.3997 27.95Z" fill="#AA743D"/>
+<path d="M26.7988 31.6006L28.0488 52.8506L21.7988 53.1506L20.5488 31.9506L26.7988 31.6006ZM58.5988 14.1006L57.7989 35.3506L51.5488 35.1006L52.3488 13.8506L58.5988 14.1006Z" fill="#D08E4A"/>
+</svg>
+
diff --git a/website/public/textures/wordart/wood3.svg b/website/public/textures/wordart/wood3.svg
new file mode 100644
index 00000000..5a8d06aa
--- /dev/null
+++ b/website/public/textures/wordart/wood3.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+<path d="M64.15 64.05H60.4L64.15 57.7L60.4 51.25L64.15 44.9L60.4 38.45L64.15 32.1L60.4 25.65L64.15 19.3L60.4 12.85L64.15 6.50001L60.4 0.100006H64.15V6.50001V19.3V32.1V44.9V57.7V64.05ZM3.90002 0.100006L0.150024 6.50001L3.90002 12.85L0.150024 19.3L3.90002 25.65L0.150024 32.1L3.90002 38.45L0.150024 44.9L3.90002 51.25L0.150024 57.7L3.90002 64.05H0.150024V57.7V44.9V32.1V19.3V6.50001V0.100006H3.90002Z" fill="#7B5632"/>
+<path d="M60.4 0.100006L64.15 6.50001L60.4 12.85L64.15 19.3L60.4 25.65L64.15 32.1L60.4 38.45L64.15 44.9L60.4 51.25L64.15 57.7L60.4 64.05H64.15V64.1H55.35V54.55V46.85H51V54.55V64.1H21.5V54.55H17.15V64.1H0.150024V64.05H3.90002L0.150024 57.7L3.90002 51.25L0.150024 44.9L3.90002 38.45L0.150024 32.1L3.90002 25.65L0.150024 19.3L3.90002 12.85L0.150024 6.50001L3.90002 0.100006H9V19.7V33.35V42.9H13.35V33.35V19.7V0.100006H39V19.7H43.35V0.100006H60.4ZM55.35 31.5V6.90001H51V31.5V39.2H55.35V31.5ZM32.15 23.15V9.50001H27.8V23.15V60.1H32.15V23.15ZM21.5 4.10001H17.15V46.2H21.5V4.10001ZM39 47.1V54.8H43.35V47.1V32.4H39V47.1Z" fill="#91673F"/>
+<path d="M39 47.1V32.4H43.35V47.1H39ZM43.35 0.100006V19.7H39V0.100006H43.35ZM13.35 0.100006V19.7H9V0.100006H13.35ZM13.35 33.35V42.9H9V33.35H13.35ZM17.15 64.1V54.55H21.5V64.1H17.15ZM51 64.1V54.55H55.35V64.1H51ZM51 31.5V6.90001H55.35V31.5H51ZM32.15 23.15V60.1H27.8V23.15H32.15ZM21.5 4.10001V46.2H17.15V4.10001H21.5Z" fill="#8A6038"/>
+<path d="M13.35 19.7V33.35H9V19.7H13.35ZM51 54.55V46.85H55.35V54.55H51ZM55.35 31.5V39.2H51V31.5H55.35ZM27.8 23.15V9.5H32.15V23.15H27.8ZM43.35 47.1V54.8H39V47.1H43.35Z" fill="#9C7249"/>
+</svg>
\ No newline at end of file
diff --git a/website/src/components/WordArtWorkbench/WordArtWorkbench.tsx b/website/src/components/WordArtWorkbench/WordArtWorkbench.tsx
index 4367711c..fa1d1729 100644
--- a/website/src/components/WordArtWorkbench/WordArtWorkbench.tsx
+++ b/website/src/components/WordArtWorkbench/WordArtWorkbench.tsx
@@ -16,15 +16,54 @@ import {
   listGoogleFonts,
   loadFont,
   loadGoogleFont,
+  resolveFace,
   pickWeight,
+  type BackFace,
   type ExtrudeProfile,
+  type Face,
+  type FaceFillSpec,
   type FontEntry,
   type ParsedFont,
+  type Profile,
   type WarpShape,
 } from "@layoutit/polycss-fonts";
 import "./wordart.css";
 
 type Align = "left" | "center" | "right";
+type FillType = "solid" | "gradient" | "rainbow" | "texture" | "image";
+type FaceFill = "solid" | "texture" | "none";
+type Bezier4 = [number, number, number, number];
+
+// Named CSS easings → cubic-bezier control points, for the custom edge profile.
+const CSS_EASINGS: Record<string, Bezier4> = {
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  "ease-in": [0.42, 0, 1, 1],
+  "ease-out": [0, 0, 0.58, 1],
+  "ease-in-out": [0.42, 0, 0.58, 1],
+};
+
+/** Parse a CSS easing string (`cubic-bezier(...)` or a keyword) to 4 controls. */
+function parseBezier(input: string): Bezier4 | null {
+  const s = input.trim().toLowerCase();
+  if (CSS_EASINGS[s]) return CSS_EASINGS[s];
+  const m = /cubic-bezier\(\s*([\d.+-]+)[ ,]+([\d.+-]+)[ ,]+([\d.+-]+)[ ,]+([\d.+-]+)\s*\)/.exec(s);
+  if (!m) return null;
+  const p = [m[1], m[2], m[3], m[4]].map(Number) as Bezier4;
+  return p.every((n) => !Number.isNaN(n)) ? p : null;
+}
+const bezierToCss = (b: Bezier4) => `cubic-bezier(${b.map((n) => +n.toFixed(2)).join(", ")})`;
+
+// Bundled voxel-style block textures (Layoutit voxels set), served locally from
+// public/textures/wordart so the atlas canvas stays same-origin (no CORS taint).
+const TEXTURES: { id: string; label: string }[] = [
+  { id: "dirt", label: "Dirt" }, { id: "dirt2", label: "Dirt 2" }, { id: "grass3", label: "Grass" },
+  { id: "brick", label: "Brick" }, { id: "brick2", label: "Brick 2" }, { id: "wood", label: "Wood" },
+  { id: "wood3", label: "Plank" }, { id: "rock", label: "Rock" }, { id: "rock3", label: "Rock 2" },
+  { id: "ice", label: "Ice" }, { id: "ice3", label: "Ice 2" }, { id: "glass", label: "Glass" },
+  { id: "sand", label: "Sand" }, { id: "cacti", label: "Cactus" }, { id: "mine", label: "Ore" }, { id: "mine4", label: "Ore 2" },
+];
+const texUrl = (id: string) => (id ? `/textures/wordart/${id}.svg` : "");
 
 interface Preset {
   label: string;
@@ -37,19 +76,48 @@ interface Preset {
   /** Diagonal back offset for the layered block (down-right). */
   offset?: number;
   warp?: { shape: WarpShape; amount: number };
+  /** Face fill (defaults to solid `color`). */
+  fill?: FillType;
+  gradA?: string;
+  gradB?: string;
+  gradAngle?: number;
+  /** Block-texture ids for the front / sides / back faces. */
+  faceTex?: string;
+  sideTex?: string;
+  backTex?: string;
+  outline?: { color: string; width: number };
+  /** Flat two-layer drop shadow (no extrusion walls). */
+  layered?: boolean;
+  /** CSS background for the preset tile thumbnail (defaults to `color`). */
+  thumb?: string;
 }
 
 // Left-rail style presets — each is a full "look": extrusion, layered front/back,
 // and/or a baked-in WordArt warp (like the builder's shape tiles).
 const PRESETS: Preset[] = [
+  { label: "Gold Gradient", profile: "bevel", depth: 26, color: "#ffd23f", sideColor: "#7c4a12",
+    fill: "gradient", gradA: "#ffe14d", gradB: "#ff7a1a", gradAngle: 270, thumb: "linear-gradient(#ffe14d,#ff7a1a)" },
+  { label: "Grape Pop", profile: "flat", depth: 5, color: "#b14be0", sideColor: "#7a8cff", backColor: "#8aa0ff", offset: 14, layered: true,
+    fill: "gradient", gradA: "#c45cf0", gradB: "#7a1fb8", gradAngle: 270, thumb: "linear-gradient(#c45cf0,#7a1fb8)" },
+  { label: "Chrome", profile: "bevel", depth: 22, color: "#d7dde4", sideColor: "#3a2222",
+    fill: "gradient", gradA: "#f4f8ff", gradB: "#9a4b4b", gradAngle: 270, thumb: "linear-gradient(#f4f8ff 45%,#9a4b4b)" },
+  { label: "Rainbow", profile: "flat", depth: 10, color: "#ff5e3a", sideColor: "#7a2a55",
+    fill: "rainbow", gradAngle: 0, thumb: "linear-gradient(90deg,#ff3b30,#ffcc00,#34c759,#007aff,#af52de)" },
+  { label: "Sky Outline", profile: "flat", depth: 8, color: "#7ec8ff", sideColor: "#2b50b0",
+    outline: { color: "#1838b8", width: 3 }, thumb: "#7ec8ff" },
+  { label: "Grass Block", profile: "flat", depth: 18, color: "#6ab04c", sideColor: "#6b4a2b",
+    fill: "texture", faceTex: "grass3", sideTex: "dirt", thumb: "url(/textures/wordart/grass3.svg) center/cover" },
+  { label: "Brick Wall", profile: "bevel", depth: 22, color: "#a8432a", sideColor: "#7a2f1d",
+    fill: "texture", faceTex: "brick", sideTex: "brick2", thumb: "url(/textures/wordart/brick.svg) center/cover" },
+  { label: "Stone", profile: "flat", depth: 20, color: "#8d8d8d", sideColor: "#5a5a5a",
+    fill: "texture", faceTex: "rock", sideTex: "rock3", thumb: "url(/textures/wordart/rock.svg) center/cover" },
+  { label: "Ice", profile: "bevel", depth: 18, color: "#b9e6ff", sideColor: "#6aa9cc",
+    fill: "texture", faceTex: "ice", sideTex: "ice3", thumb: "url(/textures/wordart/ice.svg) center/cover" },
   { label: "Gold Bevel", profile: "bevel", depth: 26, color: "#d4a82a", sideColor: "#7c5e16" },
-  { label: "Chrome Round", profile: "round", depth: 32, color: "#cdd3da", sideColor: "#5f6772" },
-  { label: "Retro Block", profile: "flat", depth: 6, color: "#ff4d6d", sideColor: "#3a0ca3", backColor: "#3a0ca3", offset: 16 },
-  { label: "Comic Pop", profile: "flat", depth: 6, color: "#ffd166", sideColor: "#1d3557", backColor: "#1d3557", offset: 13 },
+  { label: "Retro Block", profile: "flat", depth: 6, color: "#ff4d6d", sideColor: "#3a0ca3", backColor: "#3a0ca3", offset: 16, layered: true, thumb: "#ff4d6d" },
   { label: "Arch Gold", profile: "bevel", depth: 22, color: "#e9b949", sideColor: "#8a5a12", warp: { shape: "arch", amount: 0.6 } },
   { label: "Wave Mint", profile: "round", depth: 24, color: "#7cffb2", sideColor: "#2f8f5e", warp: { shape: "wave", amount: 0.55 } },
-  { label: "Arc Crimson", profile: "flat", depth: 16, color: "#ff5470", sideColor: "#9c2740", warp: { shape: "arc", amount: 0.7 } },
-  { label: "Ink Shadow", profile: "flat", depth: 4, color: "#e8edf2", sideColor: "#2b313b", backColor: "#2b313b", offset: 12 },
+  { label: "Ink Shadow", profile: "flat", depth: 4, color: "#e8edf2", sideColor: "#2b313b", backColor: "#2b313b", offset: 12, layered: true, thumb: "#e8edf2" },
 ];
 
 function applyCase(text: string, mode: "as-typed" | "upper" | "lower" | "title"): string {
@@ -130,6 +198,11 @@ export function WordArtWorkbench() {
   const [scaleX, setScaleX] = useState(() => qn("sx", 100));
   const [scaleY, setScaleY] = useState(() => qn("sy", 100));
   const [profile, setProfile] = useState<ExtrudeProfile>(() => qs("profile", "bevel") as ExtrudeProfile);
+  const [roundConvex, setRoundConvex] = useState(() => qb("rconv", false));
+  const [bezier, setBezier] = useState<Bezier4>(() => {
+    const p = qs("bez", "").split(",").map(Number);
+    return p.length === 4 && p.every((n) => !Number.isNaN(n)) ? (p as Bezier4) : [0.3, 0.9, 0.7, 0.1];
+  });
   const [depth, setDepth] = useState(() => qn("depth", 26));
   const [letterSpacing, setLetterSpacing] = useState(() => qn("ls", 0));
   const [lineHeight, setLineHeight] = useState(() => qn("lh", 1.15));
@@ -147,6 +220,21 @@ export function WordArtWorkbench() {
   const [warpShape, setWarpShape] = useState<WarpShape>(() => qs("warp", "none") as WarpShape);
   const [warpAmount, setWarpAmount] = useState(() => qn("bend", 0.5));
   const [spin, setSpin] = useState(() => qb("spin", true));
+  // Face fill (solid / gradient / rainbow / image), outline, flat-layer shadow.
+  const [fillType, setFillType] = useState<FillType>(() => qs("fill", "solid") as FillType);
+  const [gradA, setGradA] = useState(() => qs("ga", "#ffd23f"));
+  const [gradB, setGradB] = useState(() => qs("gb", "#ff5e3a"));
+  const [gradAngle, setGradAngle] = useState(() => qn("gang", 270));
+  const [fillImage, setFillImage] = useState("");
+  const [faceTex, setFaceTex] = useState(() => qs("ftex", "dirt"));
+  const [sideFill, setSideFill] = useState<FaceFill>(() => qs("sfill", "solid") as FaceFill);
+  const [sideTex, setSideTex] = useState(() => qs("stex", "dirt"));
+  const [backFill, setBackFill] = useState<FaceFill>(() => qs("bfill", "solid") as FaceFill);
+  const [backTex, setBackTex] = useState(() => qs("btex", "dirt"));
+  const [outlineOn, setOutlineOn] = useState(() => qb("ol", false));
+  const [outlineColor, setOutlineColor] = useState(() => qs("olc", "#1a1a2e"));
+  const [outlineWidth, setOutlineWidth] = useState(() => qn("olw", 3));
+  const [layered, setLayered] = useState(() => qb("layer", false));
   // Camera + lighting (gallery-style)
   const [perspective, setPerspective] = useState(() => qb("persp", true));
   const [zoomScale, setZoomScale] = useState(() => qn("zoom", 1));
@@ -211,6 +299,8 @@ export function WordArtWorkbench() {
     sn("sx", scaleX, 100);
     sn("sy", scaleY, 100);
     ss("profile", profile, "bevel");
+    if (roundConvex) p.set("rconv", "1");
+    if (profile === "custom") p.set("bez", bezier.map((n) => +n.toFixed(3)).join(","));
     sn("depth", depth, 26);
     sn("ls", letterSpacing, 0);
     sn("lh", lineHeight, 1.15);
@@ -235,9 +325,22 @@ export function WordArtWorkbench() {
     ss("lc", lightColor, "#ffffff");
     sn("laz", lightAz, -25);
     sn("lel", lightEl, 45);
+    ss("fill", fillType, "solid");
+    ss("ga", gradA, "#ffd23f");
+    ss("gb", gradB, "#ff5e3a");
+    sn("gang", gradAngle, 270);
+    ss("ftex", faceTex, "dirt");
+    ss("sfill", sideFill, "solid");
+    ss("stex", sideTex, "dirt");
+    ss("bfill", backFill, "solid");
+    ss("btex", backTex, "dirt");
+    if (outlineOn) p.set("ol", "1");
+    ss("olc", outlineColor, "#1a1a2e");
+    sn("olw", outlineWidth, 3);
+    if (layered) p.set("layer", "1");
     const search = p.toString();
     window.history.replaceState(null, "", `${window.location.pathname}${search ? `?${search}` : ""}${window.location.hash}`);
-  }, [text, entry, weight, italic, textCase, scaleX, scaleY, profile, depth, letterSpacing, lineHeight, align, underline, strike, color, sideColor, backColor, offset, curveSegments, simplify, merge, profileSegments, warpShape, warpAmount, spin, perspective, zoomScale, lightIntensity, ambient, lightColor, lightAz, lightEl]);
+  }, [text, entry, weight, italic, textCase, scaleX, scaleY, profile, depth, letterSpacing, lineHeight, align, underline, strike, color, sideColor, backColor, offset, curveSegments, simplify, merge, profileSegments, warpShape, warpAmount, spin, perspective, zoomScale, lightIntensity, ambient, lightColor, lightAz, lightEl, roundConvex, bezier, fillType, gradA, gradB, gradAngle, faceTex, sideFill, sideTex, backFill, backTex, outlineOn, outlineColor, outlineWidth, layered]);
 
   // Load the picked Google font whenever family / weight / style changes.
   useEffect(() => {
@@ -257,30 +360,58 @@ export function WordArtWorkbench() {
     };
   }, [entry, weight, italic]);
 
+  // Resolve each face's UI fill into a pure `Face` (gradients/rainbow → data URL
+  // via resolveFace; solid/texture pass through). One key so the memo is stable.
+  const TILE = 52;
+  const frontKey = `${fillType}:${gradA}:${gradB}:${gradAngle}:${faceTex}:${color}:${fillImage.slice(0, 40)}`;
+  const front = useMemo<Face>(() => {
+    const spec: FaceFillSpec =
+      fillType === "gradient" ? { kind: "gradient", color, from: gradA, to: gradB, angle: gradAngle }
+      : fillType === "rainbow" ? { kind: "rainbow", color, angle: gradAngle }
+      : fillType === "texture" ? { kind: "texture", color, url: texUrl(faceTex), tile: TILE }
+      : fillType === "image" ? { kind: "image", color, src: fillImage }
+      : { kind: "solid", color };
+    return resolveFace(spec);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [frontKey]);
+
   const polygons = useMemo<Polygon[]>(() => {
     if (!font) return [];
+    // "None" → no separate material for that face (it's covered by the nearest
+    // active face), but the geometry still renders — no hole.
+    const sides: Face | false =
+      sideFill === "texture" ? resolveFace({ kind: "texture", color: sideColor, url: texUrl(sideTex), tile: TILE })
+      : sideFill === "solid" ? { color: sideColor }
+      : false;
+    let back: BackFace | false =
+      backFill === "texture" ? resolveFace({ kind: "texture", color: backColor, url: texUrl(backTex), tile: TILE })
+      : backFill === "solid" ? { color: backColor }
+      : false;
+    if (back !== false && layered) back.offset = [offset || 12, -(offset || 12)];
+
+    const profileObj: Profile =
+      profile === "flat" ? "flat"
+      : profile === "custom" ? { curve: bezier, segments: profileSegments }
+      : { edge: profile, raised: roundConvex, segments: profileSegments };
+
     return composeText(font, applyCase(text, textCase), {
       size: 100,
-      depth,
-      profile,
+      depth: layered ? 0 : depth,        // "Flat layers" = no edges (depth 0)
+      profile: profileObj,
+      scale: [scaleX / 100, scaleY / 100],
       letterSpacing,
       lineHeight,
       align,
-      scaleX: scaleX / 100,
-      scaleY: scaleY / 100,
       underline,
       strike,
-      color,
-      sideColor,
-      backColor,
-      oblique: offset ? [offset, -offset] : undefined,
       curveSteps: curveSegments,
       simplify,
       merge,
-      profileSegments,
       warp: { shape: warpShape, amount: warpAmount },
+      faces: { front, sides, back },
+      outline: outlineOn ? { color: outlineColor, width: outlineWidth } : undefined,
     });
-  }, [font, text, textCase, scaleX, scaleY, depth, profile, letterSpacing, lineHeight, align, underline, strike, color, sideColor, backColor, offset, curveSegments, simplify, merge, profileSegments, warpShape, warpAmount]);
+  }, [font, text, textCase, scaleX, scaleY, depth, profile, roundConvex, bezier, letterSpacing, lineHeight, align, underline, strike, sideColor, backColor, offset, curveSegments, simplify, merge, profileSegments, warpShape, warpAmount, front, fillType, backFill, backTex, sideFill, sideTex, outlineOn, outlineColor, outlineWidth, layered]);
 
   // Directional light direction from azimuth (left/right) + elevation (height),
   // always biased toward the front so the face stays lit.
@@ -308,10 +439,27 @@ export function WordArtWorkbench() {
     setOffset(p.offset ?? 0);
     setWarpShape(p.warp?.shape ?? "none");
     setWarpAmount(p.warp?.amount ?? 0.5);
+    setFillType(p.fill ?? "solid");
+    if (p.gradA) setGradA(p.gradA);
+    if (p.gradB) setGradB(p.gradB);
+    setGradAngle(p.gradAngle ?? 270);
+    if (p.faceTex) setFaceTex(p.faceTex);
+    setSideFill(p.sideTex ? "texture" : "solid");
+    if (p.sideTex) setSideTex(p.sideTex);
+    setBackFill(p.backTex ? "texture" : "solid");
+    if (p.backTex) setBackTex(p.backTex);
+    setOutlineOn(!!p.outline);
+    if (p.outline) { setOutlineColor(p.outline.color); setOutlineWidth(p.outline.width); }
+    setLayered(!!p.layered);
     setActivePreset(p.label);
   }
 
-  const leftValues: LeftValues = { weight, italic, underline, strike, textCase, align, color, sideColor, backColor };
+  const leftValues: LeftValues = {
+    weight, italic, underline, strike, textCase, align, color, sideColor, backColor,
+    fillType, gradA, gradB, gradAngle, image: fillImage, faceTex,
+    sideFill, sideTex, backFill, backTex,
+    outlineOn, outlineColor, outlineWidth,
+  };
   const leftSet = (k: keyof LeftValues, v: number | string | boolean) => {
     switch (k) {
       case "weight": setWeight(v as number); break;
@@ -323,11 +471,31 @@ export function WordArtWorkbench() {
       case "color": setColor(v as string); break;
       case "sideColor": setSideColor(v as string); break;
       case "backColor": setBackColor(v as string); break;
+      case "fillType": setFillType(v as FillType); break;
+      case "gradA": setGradA(v as string); break;
+      case "gradB": setGradB(v as string); break;
+      case "gradAngle": setGradAngle(v as number); break;
+      case "image": setFillImage(v as string); break;
+      case "faceTex": setFaceTex(v as string); break;
+      case "sideFill": setSideFill(v as FaceFill); break;
+      case "sideTex": setSideTex(v as string); break;
+      case "backFill": setBackFill(v as FaceFill); break;
+      case "backTex": setBackTex(v as string); break;
+      case "outlineOn": setOutlineOn(v as boolean); break;
+      case "outlineColor": setOutlineColor(v as string); break;
+      case "outlineWidth": setOutlineWidth(v as number); break;
     }
   };
 
+  // The Profile dropdown encodes edge shape only — colors now come from the
+  // axial face stops, so there's no coverage to bundle in.
+  const profileMode = profile === "flat" ? "flat"
+    : profile === "custom" ? "custom"
+    : profile === "round" ? (roundConvex ? "roundup" : "round")
+    : "bevel";
   const guiValues: GuiValues = {
-    profile, warp: warpShape, bend: warpAmount,
+    layered,
+    profileMode, warp: warpShape, bend: warpAmount,
     depth, letterSpacing, lineHeight, scaleX, scaleY,
     curveSegments, simplify, merge, profileSegments, offset,
     perspective, zoom: zoomScale, spin,
@@ -335,7 +503,14 @@ export function WordArtWorkbench() {
   };
   const guiSet = (k: keyof GuiValues, v: number | string | boolean) => {
     switch (k) {
-      case "profile": setProfile(v as ExtrudeProfile); break;
+      case "layered": setLayered(v as boolean); break;
+      case "profileMode": {
+        const base = v as string;
+        setProfile(base === "flat" ? "flat" : base === "custom" ? "custom" : base.startsWith("round") ? "round" : "bevel");
+        setRoundConvex(base === "roundup");
+        break;
+      }
+      case "warp": setWarpShape(v as WarpShape); break;
       case "warp": setWarpShape(v as WarpShape); break;
       case "bend": setWarpAmount(v as number); break;
       case "depth": setDepth(v as number); break;
@@ -403,7 +578,7 @@ export function WordArtWorkbench() {
           <div className="wa-grid">
             {PRESETS.map((p) => (
               <button key={p.label} type="button" className={`wa-tile ${activePreset === p.label ? "is-active" : ""}`} onClick={() => applyPreset(p)}>
-                <span className="wa-tile__thumb" style={{ background: p.color, color: readable(p.color) }}>Aa</span>
+                <span className="wa-tile__thumb" style={{ background: p.thumb ?? p.color, color: readable(p.color) }}>Aa</span>
                 <span className="wa-tile__label">{p.label}</span>
               </button>
             ))}
@@ -416,6 +591,8 @@ export function WordArtWorkbench() {
         className={mobilePanel === "controls" ? "is-mobile-open" : ""}
         values={guiValues}
         set={guiSet}
+        bezier={bezier}
+        onBezier={setBezier}
       />
 
       <button type="button" className="wa-codepen" onClick={handleCodePen} disabled={exporting}>
@@ -566,23 +743,111 @@ function Stage({ polygons, zoomScale, setZoomScale, perspective, lightDir, light
 }
 
 interface GuiValues {
-  profile: string; warp: string; bend: number;
+  layered: boolean;
+  profileMode: string; warp: string; bend: number;
   depth: number; letterSpacing: number; lineHeight: number; scaleX: number; scaleY: number;
   curveSegments: number; simplify: number; merge: boolean; profileSegments: number; offset: number;
   perspective: boolean; zoom: number; spin: boolean;
   light: number; ambient: number; az: number; el: number; lightColor: string;
 }
 
+/** One coordinate of a cubic Bézier P0..P3 at parameter t. */
+function cubicAt(p0: number, p1: number, p2: number, p3: number, t: number): number {
+  const m = 1 - t;
+  return m * m * m * p0 + 3 * m * m * t * p1 + 3 * m * t * t * p2 + t * t * t * p3;
+}
+
+/**
+ * Mount a draggable cubic-bezier editor (the CSS easing curve) into `parent`.
+ * P0=(0,0) and P3=(1,1) are fixed; the two control handles drive `setB`.
+ * Returns a `redraw()` to resync the SVG when the value changes elsewhere.
+ */
+function mountBezierEditor(parent: HTMLElement, getB: () => Bezier4, setB: (b: Bezier4) => void): () => void {
+  const NS = "http://www.w3.org/2000/svg";
+  const W = 220, H = 150, pad = 16;
+  const X = (x: number) => pad + x * (W - 2 * pad);
+  const Y = (y: number) => (H - pad) - y * (H - 2 * pad);
+  const el = (n: string, a: Record<string, string>) => {
+    const e = document.createElementNS(NS, n);
+    for (const k in a) e.setAttribute(k, a[k]);
+    return e;
+  };
+  const svg = el("svg", { viewBox: `0 0 ${W} ${H}`, class: "wa-bez" });
+  const frame = el("rect", { x: `${X(0)}`, y: `${Y(1)}`, width: `${W - 2 * pad}`, height: `${H - 2 * pad}`, class: "wa-bez__frame" });
+  const diag = el("line", { x1: `${X(0)}`, y1: `${Y(0)}`, x2: `${X(1)}`, y2: `${Y(1)}`, class: "wa-bez__diag" });
+  const l1 = el("line", { class: "wa-bez__leg" });
+  const l2 = el("line", { class: "wa-bez__leg" });
+  const curve = el("path", { class: "wa-bez__curve" });
+  const h1 = el("circle", { r: "5", class: "wa-bez__h" });
+  const h2 = el("circle", { r: "5", class: "wa-bez__h" });
+  svg.append(frame, diag, l1, l2, curve, h1, h2);
+  parent.appendChild(svg);
+
+  // `drawB` is the editor's live value; the SVG follows it every move (cheap),
+  // but the mesh re-extrude (`setB`) is debounced so dragging stays smooth.
+  let drawB: Bezier4 = getB();
+  let active = 0;
+  let timer = 0;
+  const commit = (now: boolean) => {
+    clearTimeout(timer);
+    if (now) setB(drawB);
+    else timer = window.setTimeout(() => setB(drawB), 130);
+  };
+  const render = () => {
+    const [x1, y1, x2, y2] = drawB;
+    let d = `M ${X(0)} ${Y(0)}`;
+    for (let i = 1; i <= 24; i++) {
+      const t = i / 24;
+      d += ` L ${X(cubicAt(0, x1, x2, 1, t))} ${Y(cubicAt(0, y1, y2, 1, t))}`;
+    }
+    curve.setAttribute("d", d);
+    l1.setAttribute("x1", `${X(0)}`); l1.setAttribute("y1", `${Y(0)}`); l1.setAttribute("x2", `${X(x1)}`); l1.setAttribute("y2", `${Y(y1)}`);
+    l2.setAttribute("x1", `${X(1)}`); l2.setAttribute("y1", `${Y(1)}`); l2.setAttribute("x2", `${X(x2)}`); l2.setAttribute("y2", `${Y(y2)}`);
+    h1.setAttribute("cx", `${X(x1)}`); h1.setAttribute("cy", `${Y(y1)}`);
+    h2.setAttribute("cx", `${X(x2)}`); h2.setAttribute("cy", `${Y(y2)}`);
+  };
+
+  const toData = (ev: PointerEvent): [number, number] => {
+    const r = svg.getBoundingClientRect();
+    const x = (((ev.clientX - r.left) / r.width) * W - pad) / (W - 2 * pad);
+    const y = ((H - pad) - ((ev.clientY - r.top) / r.height) * H) / (H - 2 * pad);
+    return [Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y))];
+  };
+  const move = (ev: PointerEvent) => {
+    if (!active) return;
+    const [x, y] = toData(ev);
+    drawB = [...drawB] as Bezier4;
+    if (active === 1) { drawB[0] = x; drawB[1] = y; } else { drawB[2] = x; drawB[3] = y; }
+    render();
+    commit(false);
+  };
+  const start = (handle: number, e: PointerEvent, target: SVGElement) => {
+    active = handle;
+    drawB = [...getB()] as Bezier4;
+    target.setPointerCapture(e.pointerId);
+  };
+  h1.addEventListener("pointerdown", (e) => start(1, e as PointerEvent, h1 as SVGElement));
+  h2.addEventListener("pointerdown", (e) => start(2, e as PointerEvent, h2 as SVGElement));
+  svg.addEventListener("pointermove", move as EventListener);
+  svg.addEventListener("pointerup", () => { if (active) { active = 0; commit(true); } });
+  render();
+  // External redraw (state changed elsewhere) — adopt it only when not dragging.
+  return () => { if (!active) drawB = getB(); render(); };
+}
+
 /**
  * Right-hand control panel built with the SAME library the /gallery uses
  * (lil-gui), themed with the gallery's exact CSS variables — so the controls
  * are identical, not a CSS approximation. lil-gui is imperative, so we mount it
  * once and bridge its onChange → React, and React state → updateDisplay().
  */
-function GuiPanel({ id, className = "", values, set }: { id?: string; className?: string; values: GuiValues; set: (k: keyof GuiValues, v: number | string | boolean) => void }) {
+function GuiPanel({ id, className = "", values, set, bezier, onBezier }: { id?: string; className?: string; values: GuiValues; set: (k: keyof GuiValues, v: number | string | boolean) => void; bezier: Bezier4; onBezier: (b: Bezier4) => void }) {
   const hostRef = useRef<HTMLDivElement>(null);
   const cfgRef = useRef<GuiValues>({ ...values });
   const ctrlRef = useRef<Record<string, ReturnType<GUI["add"]>>>({});
+  const bezierRef = useRef(bezier);
+  const onBezierRef = useRef(onBezier);
+  const bezUiRef = useRef<{ wrap: HTMLElement; input: HTMLInputElement; redraw: () => void } | null>(null);
 
   useEffect(() => {
     const cfg = cfgRef.current;
@@ -591,7 +856,38 @@ function GuiPanel({ id, className = "", values, set }: { id?: string; className?
     const on = (k: keyof GuiValues) => (v: number | string | boolean) => set(k, v);
 
     const shape = gui.addFolder("Shape");
-    c.profile = shape.add(cfg, "profile", { "Flat (slab)": "flat", "Round (bullnose)": "round", "Bevel (rounded edge)": "bevel" }).name("Profile").onChange(on("profile"));
+    c.profileMode = shape.add(cfg, "profileMode", {
+      "Flat (slab)": "flat",
+      "Bevel": "bevel",
+      "Round in": "round",
+      "Round out": "roundup",
+      "Custom curve": "custom",
+    }).name("Profile").onChange(on("profileMode"));
+
+    // Custom-profile curve: a CSS cubic-bezier() text field + a draggable editor
+    // (shown only for the Custom profile). Both drive the `bezier` prop.
+    c.bezierText = shape.add({ _: "" }, "_").name("Curve");
+    {
+      const widget = c.bezierText.domElement.querySelector<HTMLElement>(".widget");
+      const wrap = document.createElement("div");
+      wrap.className = "wa-bezwrap";
+      let input = document.createElement("input");
+      if (widget) {
+        widget.replaceChildren();
+        input.type = "text";
+        input.className = "wa-input wa-bezinput";
+        input.spellcheck = false;
+        input.addEventListener("change", () => {
+          const parsed = parseBezier(input.value);
+          if (parsed) onBezierRef.current(parsed);
+        });
+        widget.appendChild(input);
+      }
+      shape.domElement.querySelector(".children")?.appendChild(wrap);
+      const redraw = mountBezierEditor(wrap, () => bezierRef.current, (b) => onBezierRef.current(b));
+      bezUiRef.current = { wrap, input, redraw };
+    }
+
     c.warp = shape.add(cfg, "warp", { None: "none", "Arch up": "arch", "Arch down": "archDown", "Arc (circle)": "arc", Wave: "wave", Bulge: "bulge", "Cone (taper)": "cone", "Slant up": "slantUp", "Slant down": "slantDown" }).name("Warp").onChange(on("warp"));
     c.bend = shape.add(cfg, "bend", 0, 1, 0.02).name("Bend").onChange(on("bend"));
 
@@ -599,13 +895,14 @@ function GuiPanel({ id, className = "", values, set }: { id?: string; className?
     c.depth = layout.add(cfg, "depth", 2, 80, 1).name("Depth").onChange(on("depth"));
     c.letterSpacing = layout.add(cfg, "letterSpacing", -20, 60, 1).name("Letter spacing").onChange(on("letterSpacing"));
     c.lineHeight = layout.add(cfg, "lineHeight", 0.8, 2.5, 0.05).name("Line height").onChange(on("lineHeight"));
-    c.scaleX = layout.add(cfg, "scaleX", 40, 200, 1).name("Width %").onChange(on("scaleX"));
-    c.scaleY = layout.add(cfg, "scaleY", 40, 200, 1).name("Height %").onChange(on("scaleY"));
+    c.scaleX = layout.add(cfg, "scaleX", 40, 200, 1).name("Scale X").onChange(on("scaleX"));
+    c.scaleY = layout.add(cfg, "scaleY", 40, 200, 1).name("Scale Y").onChange(on("scaleY"));
     c.curveSegments = layout.add(cfg, "curveSegments", 1, 12, 1).name("Curve segments").onChange(on("curveSegments"));
     c.simplify = layout.add(cfg, "simplify", 0, 8, 0.5).name("Simplify").onChange(on("simplify"));
     c.merge = layout.add(cfg, "merge").name("Merge polygons").onChange(on("merge"));
     c.profileSegments = layout.add(cfg, "profileSegments", 2, 10, 1).name("Edge segments").onChange(on("profileSegments"));
     c.offset = layout.add(cfg, "offset", 0, 32, 1).name("Layer offset").onChange(on("offset"));
+    c.layered = layout.add(cfg, "layered").name("Flat layers").onChange(on("layered"));
 
     const cam = gui.addFolder("Camera");
     c.perspective = cam.add(cfg, "perspective").name("Perspective").onChange(on("perspective"));
@@ -627,8 +924,17 @@ function GuiPanel({ id, className = "", values, set }: { id?: string; className?
   useEffect(() => {
     Object.assign(cfgRef.current, values);
     for (const ctrl of Object.values(ctrlRef.current)) ctrl?.updateDisplay();
+    bezierRef.current = bezier;
+    onBezierRef.current = onBezier;
+    const isCustom = values.profileMode.startsWith("custom");
     ctrlRef.current.bend?.[values.warp !== "none" ? "show" : "hide"]();
-    ctrlRef.current.profileSegments?.[values.profile === "round" ? "show" : "hide"]();
+    ctrlRef.current.profileSegments?.[(values.profileMode.startsWith("round") || isCustom) ? "show" : "hide"]();
+    ctrlRef.current.bezierText?.[isCustom ? "show" : "hide"]();
+    if (bezUiRef.current) {
+      bezUiRef.current.wrap.style.display = isCustom ? "" : "none";
+      bezUiRef.current.redraw();
+      if (document.activeElement !== bezUiRef.current.input) bezUiRef.current.input.value = bezierToCss(bezier);
+    }
   });
 
   return <div id={id} className={`wa-gui ${className}`} ref={hostRef} />;
@@ -637,6 +943,9 @@ function GuiPanel({ id, className = "", values, set }: { id?: string; className?
 interface LeftValues {
   weight: number; italic: boolean; underline: boolean; strike: boolean;
   textCase: string; align: string; color: string; sideColor: string; backColor: string;
+  fillType: string; gradA: string; gradB: string; gradAngle: number; image: string;
+  faceTex: string; sideFill: string; sideTex: string; backFill: string; backTex: string;
+  outlineOn: boolean; outlineColor: string; outlineWidth: number;
 }
 
 /** lil-gui typography + color panel for the left card (blends in, borderless). */
@@ -645,6 +954,8 @@ function LeftGuiPanel({ values, set }: { values: LeftValues; set: (k: keyof Left
   const cfgRef = useRef<LeftValues>({ ...values });
   const ctrlRef = useRef<Record<string, ReturnType<GUI["add"]>>>({});
   const segRef = useRef<Record<string, (v: string) => void>>({});
+  const texRef = useRef<Record<string, (v: string) => void>>({});
+  const texWrapRef = useRef<Record<string, HTMLElement>>({});
 
   useEffect(() => {
     const cfg = cfgRef.current;
@@ -683,10 +994,84 @@ function LeftGuiPanel({ values, set }: { values: LeftValues; set: (k: keyof Left
     segmented(type, "Case", "textCase", [["as-typed", "Aa", "As typed"], ["upper", "AB", "UPPERCASE"], ["lower", "ab", "lowercase"], ["title", "Ab", "Title Case"]]);
     segmented(type, "Align", "align", [["left", "L", "Left"], ["center", "C", "Center"], ["right", "R", "Right"]]);
 
+    // Each face (front / sides / back) has its own fill-type selector that
+    // generates the matching input below it.
     const col = gui.addFolder("Color");
-    c.color = col.addColor(cfg, "color").name("Face").onChange(on("color"));
-    c.sideColor = col.addColor(cfg, "sideColor").name("Sides").onChange(on("sideColor"));
-    c.backColor = col.addColor(cfg, "backColor").name("Back").onChange(on("backColor"));
+    const colChildren = col.domElement.querySelector(".children");
+
+    // A grid of bundled block-texture swatches injected into the folder
+    // (lil-gui has no image picker). Shown only when that face is in Texture mode.
+    const texGrid = (key: keyof LeftValues) => {
+      const wrap = document.createElement("div");
+      wrap.className = "wa-texrow";
+      const grid = document.createElement("div");
+      grid.className = "wa-texgrid";
+      wrap.append(grid);
+      const swatches: Record<string, HTMLButtonElement> = {};
+      for (const t of TEXTURES) {
+        const sw = document.createElement("button");
+        sw.type = "button";
+        sw.className = "wa-texgrid__sw";
+        sw.title = t.label;
+        sw.style.backgroundImage = `url(${texUrl(t.id)})`;
+        sw.addEventListener("click", () => set(key, t.id));
+        grid.appendChild(sw);
+        swatches[t.id] = sw;
+      }
+      colChildren?.appendChild(wrap);
+      texRef.current[key] = (v: string) => {
+        for (const id in swatches) swatches[id].classList.toggle("is-on", id === v);
+      };
+      texWrapRef.current[key] = wrap;
+    };
+
+    // Front — the full fill set.
+    c.fillType = col.add(cfg, "fillType", { Solid: "solid", Gradient: "gradient", Rainbow: "rainbow", Texture: "texture", Image: "image" }).name("Front").onChange(on("fillType"));
+    c.color = col.addColor(cfg, "color").name("Color").onChange(on("color"));
+    c.gradA = col.addColor(cfg, "gradA").name("Color A").onChange(on("gradA"));
+    c.gradB = col.addColor(cfg, "gradB").name("Color B").onChange(on("gradB"));
+    c.gradAngle = col.add(cfg, "gradAngle", 0, 360, 5).name("Angle").onChange(on("gradAngle"));
+    // lil-gui has no file input — inject a "Choose image" button that reads the
+    // picked file as a data URL (the renderer uses it as a background-image).
+    c.image = col.add({ _: "" }, "_").name("Image");
+    {
+      const widget = c.image.domElement.querySelector<HTMLElement>(".widget");
+      if (widget) {
+        widget.replaceChildren();
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "wa-imgbtn";
+        btn.textContent = "Choose image…";
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.style.display = "none";
+        btn.addEventListener("click", () => input.click());
+        input.addEventListener("change", () => {
+          const file = input.files?.[0];
+          if (!file) return;
+          const reader = new FileReader();
+          reader.onload = () => set("image", String(reader.result));
+          reader.readAsDataURL(file);
+        });
+        widget.append(btn, input);
+      }
+    }
+    texGrid("faceTex");
+
+    // Sides — solid color or block texture.
+    c.sideFill = col.add(cfg, "sideFill", { Solid: "solid", Texture: "texture", None: "none" }).name("Sides").onChange(on("sideFill"));
+    c.sideColor = col.addColor(cfg, "sideColor").name("Color").onChange(on("sideColor"));
+    texGrid("sideTex");
+
+    // Back — solid color or block texture.
+    c.backFill = col.add(cfg, "backFill", { Solid: "solid", Texture: "texture", None: "none" }).name("Back").onChange(on("backFill"));
+    c.backColor = col.addColor(cfg, "backColor").name("Color").onChange(on("backColor"));
+    texGrid("backTex");
+
+    c.outlineOn = col.add(cfg, "outlineOn").name("Outline").onChange(on("outlineOn"));
+    c.outlineColor = col.addColor(cfg, "outlineColor").name("Outline color").onChange(on("outlineColor"));
+    c.outlineWidth = col.add(cfg, "outlineWidth", 0.5, 12, 0.5).name("Outline width").onChange(on("outlineWidth"));
 
     return () => gui.destroy();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -697,6 +1082,23 @@ function LeftGuiPanel({ values, set }: { values: LeftValues; set: (k: keyof Left
     for (const ctrl of Object.values(ctrlRef.current)) ctrl?.updateDisplay();
     segRef.current.textCase?.(values.textCase);
     segRef.current.align?.(values.align);
+    // Show only the input that matches each face's selected fill mode.
+    const grad = values.fillType === "gradient";
+    ctrlRef.current.color?.[values.fillType === "solid" ? "show" : "hide"]();
+    ctrlRef.current.gradA?.[grad ? "show" : "hide"]();
+    ctrlRef.current.gradB?.[grad ? "show" : "hide"]();
+    ctrlRef.current.gradAngle?.[grad || values.fillType === "rainbow" ? "show" : "hide"]();
+    ctrlRef.current.image?.[values.fillType === "image" ? "show" : "hide"]();
+    texWrapRef.current.faceTex?.style.setProperty("display", values.fillType === "texture" ? "" : "none");
+    ctrlRef.current.sideColor?.[values.sideFill === "solid" ? "show" : "hide"]();
+    texWrapRef.current.sideTex?.style.setProperty("display", values.sideFill === "texture" ? "" : "none");
+    ctrlRef.current.backColor?.[values.backFill === "solid" ? "show" : "hide"]();
+    texWrapRef.current.backTex?.style.setProperty("display", values.backFill === "texture" ? "" : "none");
+    ctrlRef.current.outlineColor?.[values.outlineOn ? "show" : "hide"]();
+    ctrlRef.current.outlineWidth?.[values.outlineOn ? "show" : "hide"]();
+    texRef.current.faceTex?.(values.faceTex);
+    texRef.current.sideTex?.(values.sideTex);
+    texRef.current.backTex?.(values.backTex);
   });
 
   return <div className="wa-gui wa-gui--inline" ref={hostRef} />;
diff --git a/website/src/components/WordArtWorkbench/wordart.css b/website/src/components/WordArtWorkbench/wordart.css
index f4784bf5..47cc070a 100644
--- a/website/src/components/WordArtWorkbench/wordart.css
+++ b/website/src/components/WordArtWorkbench/wordart.css
@@ -202,6 +202,42 @@ textarea.wa-input { resize: vertical; line-height: 1.35; height: auto; padding:
 .wa-seg button:hover { border-color: #3a4757; }
 .wa-seg button.is-on { background: #142033; border-color: #22d3ee; color: #e8f9ff; }
 
+/* Image-upload button injected into a lil-gui Fill row. */
+.wa-imgbtn {
+  width: 100%; height: 22px; padding: 0 8px;
+  background: #0b0d10; border: 1px solid #2a3340; color: #c2cad4;
+  border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
+}
+.wa-imgbtn:hover { border-color: #22d3ee; color: #e8f9ff; }
+
+/* Custom-profile cubic-bezier editor. */
+.wa-bezinput { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
+.wa-bezwrap { padding: 6px 0 2px; }
+.wa-bez { width: 100%; height: auto; touch-action: none; display: block; }
+.wa-bez__frame { fill: #0b0d10; stroke: #2a3340; stroke-width: 1; }
+.wa-bez__diag { stroke: #2a3340; stroke-width: 1; stroke-dasharray: 3 3; }
+.wa-bez__leg { stroke: #3a4757; stroke-width: 1.5; }
+.wa-bez__curve { fill: none; stroke: #22d3ee; stroke-width: 2.5; }
+.wa-bez__h { fill: #142033; stroke: #22d3ee; stroke-width: 2; cursor: grab; }
+.wa-bez__h:active { cursor: grabbing; fill: #22d3ee; }
+
+/* Bundled-texture swatch grid (front / sides / back face pickers). */
+.wa-texrow { padding: 4px 0 2px; }
+.wa-texrow__label { font-size: 12px; color: #9aa4b1; margin: 0 0 4px; }
+.wa-texgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
+.wa-texgrid__sw {
+  aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 4px;
+  border: 1px solid #2a3340; background: #0b0d10 center/cover no-repeat;
+  cursor: pointer; image-rendering: pixelated;
+}
+.wa-texgrid__sw:hover { border-color: #3a4757; }
+.wa-texgrid__sw.is-on { border-color: #22d3ee; box-shadow: 0 0 0 1px #22d3ee; }
+.wa-texgrid__sw--none { position: relative; background: #0b0d10; }
+.wa-texgrid__sw--none::after {
+  content: "∅"; position: absolute; inset: 0; display: grid; place-items: center;
+  color: #5b6675; font-size: 12px;
+}
+
 /* Searchable font dropdown. */
 .wa-fontpick { position: relative; }
 .wa-fontpick__list {