Skip to content

WordArt rich materials: per-face fills, textures, and edge-profile curves#54

Merged
apresmoi merged 4 commits into
mainfrom
wordart-fills
May 31, 2026
Merged

WordArt rich materials: per-face fills, textures, and edge-profile curves#54
apresmoi merged 4 commits into
mainfrom
wordart-fills

Conversation

@apresmoi
Copy link
Copy Markdown
Collaborator

@apresmoi apresmoi commented May 31, 2026

Builds the WordArt composer (/wordart) and the @layoutit/polycss-fonts API into a full material + cross-section system. The composer drives it; the renderer needed no changes (the fonts package returns plain Polygon[]).

@layoutit/polycss-fonts — grouped API + axial engine

composeText's options were regrouped from a ~30-field flat bag into five concerns, and the material engine generalized:

  • profile (shape) — one union: "flat" · { edge: "bevel"|"round", raised? } · { curve: CubicBezier }. Round comes in concave / convex; curve is a custom edge defined by a CSS cubic-bezier easing (cssCubicBezier).
  • faces (color) — axial material stops down the depth axis t ∈ [0,1]: each polygon takes the nearest stop. Accepts { front?, sides?, back? } (sugar — active faces split the axis evenly; a face set to false is covered by its neighbour, no hole), a single Face, or FaceStop[] for N bands. Face = { color?, texture?, tile? } (texture UV-maps across the whole word; tile repeats vs stretches).
  • outline, scale: [x,y], flat drop shadow via depth: 0 + faces.back.offset.
  • Browser helpers resolveFace / makeFillTexture turn a high-level fill (solid / gradient / rainbow / texture / image) into a pure Face, keeping composeText browser-free.

/wordart composer

  • Per-face materials (Front / Sides / Back), each Solid · Texture (· Gradient · Rainbow · Image on Front, · None on Sides/Back).
  • 16 bundled voxel block textures (served locally, same-origin) with a swatch picker per face.
  • Profile dropdown (Flat · Bevel · Round in/out · Custom curve) with a draggable cubic-bezier editor + CSS-syntax text field (debounced so dragging stays smooth).
  • All controls URL-synced.

Validation

  • pnpm test && pnpm build
  • 44 polycss-fonts tests (the geometry/API engine — extrude.ts 98.9%, composeText.ts 95.6% line coverage): profile union, axial stops + even split, no-side/covered, custom cubic-bezier, per-face textures + tiling, outline, flat shadow, resolveFace mapping.
  • Playwright across /wordart: every fill mode, per-face textures, no-side, custom curve, and shadow render with no console errors. (The canvas fill painter and the React component are covered by these manual runs, not unit tests.)

@apresmoi apresmoi changed the title WordArt face fills, outline, and flat-layer shadow WordArt rich materials: per-face fills, textures, and edge-profile curves May 31, 2026
@apresmoi apresmoi merged commit ba64e4f into main May 31, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant