fix(Shuffle): clip wrapper is shorter than the glyph, cutting descenders

[Baltsar]

The problem

Shuffle.jsx sizes the clip wrapper from the character box:

const h = ch.getBoundingClientRect().height;
// ...
height: shuffleDirection === 'up' || shuffleDirection === 'down' ? h + 'px' : 'auto',

and Shuffle.css pins that box with .shuffle-char { line-height: 1 }.

Every typeface has a content area taller than 1em, so the overflow: hidden wrapper ends up shorter than the glyph it is meant to mask, and the bottom of g j p q y is cut off.

Measured in the browser at font-size: 64px, wrapper clientHeight vs scrollHeight:

Font	Clip box	Content	Cut off
Outfit	64px	72px	8px
Playfair Display	64px	75px	11px
Poppins	64px	77px	13px

It does not show up in the demo because the default face is Press Start 2P with text-transform: uppercase, and uppercase Latin has no descenders. It appears as soon as someone changes the font or drops the uppercase — which is the normal thing to do with a copy-paste component.

The fix

Give the character its own line-height: normal, which resolves to the font's ascent + descent, so the wrapper is sized correctly per face. Line spacing stays where it was, on .shuffle-parent.

• content/ and ts-default/: .shuffle-char { line-height: normal }
• tailwind/ and ts-tailwind/: those variants ship no stylesheet, so the char inherits leading-none from the parent. Added leading-normal to charsClass instead.

After, same measurement:

Font	Clip box	Content	Cut off
Outfit	81px	81px	0
Playfair Display	85px	85px	0
Poppins	96px	96px	0

Trade-off you should weigh

This makes the boxes taller. At 64px, Outfit goes 64 → 81px and Poppins 64 → 96px. line-height: normal includes the font's line gap, so it is a little more generous than strictly required. That changes the vertical rhythm for anyone already using the component, which is a real cost even though the current rendering is wrong.

If you would rather keep the tight rhythm, the exact alternative is to size the wrapper from the real metrics instead of the char box:

const m = ctx.measureText(ch.textContent);
const h = m.fontBoundingBoxAscent + m.fontBoundingBoxDescent;

That gives the minimum correct height with no line-gap slack, at the cost of a canvas measurement per face. Happy to switch this PR to that version if you prefer it — or to close it if you would rather solve it your own way.

I did not touch public/r/*.json, since those are jsrepo build output.

How this was found, honestly

This is an AI-assisted contribution. I was building something similar — a masked text-animation generator — and hit exactly this class of bug in my own code: the mask box has to be derived from font metrics, not from a fixed line-height, or descenders get clipped the moment the typeface changes. While working through it with Claude I went looking for whether the same assumption existed elsewhere, found it here, and verified it in the browser.

Everything above is measured, not inferred. But two caveats worth stating plainly: I have not run your visual regression setup or checked the Shuffle demo page after the change, and I have not tested the left/right shuffle directions where the wrapper height is auto and the bug does not apply. Treat the numbers as solid and the visual sign-off as still owed.

[DavidHDev]

I verified the descender clipping and confirmed that line-height: normal removes it. I am holding the merge because it also expands the per-glyph box from 64px to ~73px in Georgia here, and by 26–50% in the measurements in this PR, which is a potentially breaking vertical-rhythm change. Please switch to the tighter font-metrics-based alternative described in the PR (mirrored across all four variants) so the clipping is fixed without enlarging every glyph box.