docs(skills): preserve glyphs in text reveal masks (#5241)

skills-manifest.json

@@ -22,7 +22,7 @@
       "files": 29
     },
     "hyperframes-animation": {
-      "hash": "bcee69f2229cda71",
+      "hash": "3bd80388da91c689",
       "files": 122
     },
     "hyperframes-audio": {

skills/hyperframes-animation/adapters/animate-text.md

@@ -47,6 +47,8 @@ For convenience while writing storyboards: the upstream skill provides 24 effect
 
 For descriptions, durations, easing curves, and the per-library recipes: load `/animate-text` and read its own catalog page.
 
+For `mask-reveal-up` and other line-mask effects, leave room for the font's painted glyphs at rest. Tight line-height plus `overflow: hidden` can cut descenders and accents after the reveal finishes. Follow the [text mask guidance](../techniques.md#12-clip-path-reveal-masks): start with block padding of `0.2em` at the text's font size and a compensating negative margin, or release the clip on the timeline once the entrance settles. Inspect a settled snapshot using the actual font and text; `data-layout-allow-overflow` also waives checks in the resting state.
+
 ## In the storyboard
 
 Every text element in every beat can name an effect by ID, e.g.:

skills/hyperframes-animation/techniques.md

@@ -423,6 +423,36 @@ A fixed window that content slides through — text or images enter from one sid
 
 Variations: `clip-path: circle(0% at 50% 50%)` → `circle(100%)` for iris reveals. `clip-path: polygon(...)` for custom shapes.
 
+### Text masks need room for glyphs
+
+A line box is not the full painted extent of its text. With tight display typography (`line-height: 1` or less), an `overflow: hidden` line mask can cut descenders (`g`, `p`, `y`, `j`) and accents or umlauts even after the entrance has finished.
+
+Give the mask block padding and a compensating negative margin. Set the typography on the mask and inherit it on the line so the padding's `em` units use the text's font size:
+
+```html
+<div class="line-mask">
+  <div class="line">Betreuung</div>
+</div>
+<style>
+  .line-mask {
+    font-size: 200px;
+    line-height: 1;
+    overflow: hidden;
+    padding-block: 0.2em;
+    margin-block: -0.2em;
+  }
+  .line-mask > .line {
+    margin: 0;
+    font: inherit;
+    white-space: nowrap;
+  }
+</style>
+```
+
+Treat `0.2em` as a starting point: verify the actual font, weight, and text at a settled frame, including descenders and accented capitals. Keep the initial displaced line outside the enlarged mask so it remains hidden before the reveal. If the mask is no longer needed after the entrance, another option is to release its clipping properties (`overflow: visible` / `clip-path: none`) with `tl.set(...)` at the settle time.
+
+`data-layout-allow-overflow` suppresses overflow checks for the marked element and its descendants throughout the timeline, including the resting state. A passing `hyperframes check` does not establish that the glyphs are intact; inspect a settled snapshot of the mask before considering the reveal complete.
+
 ---
 
 ## 13. WebGL Fragment Shader Art