Add 3D-style textures, text effects, and proper descender centering#17
Merged
Merged
Conversation
Textures (4 new, all CSS-only via inline SVG turbulence + repeating
gradients — no asset bundling, no licensing):
- paper: fine fractal grain, multiply blend so it darkens the bg
- fabric: woven thread look from layered repeating gradients + tiny
highlight dots
- clouds: large soft turbulence, screen blend so it lightens the bg
- tarmac: dense high-frequency dark grain, multiply blend
Text effects (5 new, applied as a CSS preset map in src/effects.ts):
- shadow: drop shadow
- emboss: raised — bright highlight + dark inset
- engrave: sunken — bright lower + dark upper
- outline: text-stroke
- glow: soft white halo
State adds defaultTextEffect (board-wide) and Line.textEffect (per-line
override, null = inherit). Backend migrates and validates both.
Descender centering: replaced the fixed translateY(0.09em) hack —
which only worked for all-caps fonts — with text-box-trim/text-box-edge
inside an @supports block. Modern browsers trim the line box to the
actual cap-to-text bounds so any font (Lobster, Permanent Marker, etc.)
centers correctly without descenders bleeding into the next row. The
translateY fallback is preserved for browsers without text-box-trim.
UI: BackgroundEditor lists the new textures; Admin Typography section
gains a Default Effect picker; LineEditor packs the per-line font and
text-effect selects into a small two-row group between the text input
and colour swatch.
https://claude.ai/code/session_011pGzV6osudSkwYLZ93A74R
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Textures (4 new, all CSS-only via inline SVG turbulence + repeating gradients — no asset bundling, no licensing):
Text effects (5 new, applied as a CSS preset map in src/effects.ts):
State adds defaultTextEffect (board-wide) and Line.textEffect (per-line override, null = inherit). Backend migrates and validates both.
Descender centering: replaced the fixed translateY(0.09em) hack — which only worked for all-caps fonts — with text-box-trim/text-box-edge inside an @supports block. Modern browsers trim the line box to the actual cap-to-text bounds so any font (Lobster, Permanent Marker, etc.) centers correctly without descenders bleeding into the next row. The translateY fallback is preserved for browsers without text-box-trim.
UI: BackgroundEditor lists the new textures; Admin Typography section gains a Default Effect picker; LineEditor packs the per-line font and text-effect selects into a small two-row group between the text input and colour swatch.
https://claude.ai/code/session_011pGzV6osudSkwYLZ93A74R