fix: knob & text

src/styles/components.css

@@ -269,11 +269,23 @@ textarea.modern-sk-field {
 .modern-sk-field-char {
   /* inline (not inline-block) so the overlay wraps exactly like the field;
      inherit white-space so multiline (pre-wrap) wraps while input (pre) won't.
-     'pre' on the span itself would suppress wrapping at its boundaries. */
+     'pre' on the span itself would suppress wrapping at its boundaries.
+     Multiline keeps this inline path: inline boxes ignore transform, so the
+     rise eases `top` (a layout property — acceptable here, textarea wraps
+     instead of scrolling so there's no per-keystroke scroll-sync thrash). */
   position: relative;
   white-space: inherit;
   animation: modern-sk-char-in var(--dur-base) var(--ease-snap) both;
 }
+/* Single-line never wraps, so chars can be inline-block and animate
+   `transform` (compositor-only) instead of `top` (relayout every frame).
+   The single-line field scrolls horizontally and syncs the overlay each
+   keystroke, so the layout-triggering `top` path janked there — this doesn't. */
+.modern-sk-field-char--composited {
+  display: inline-block;
+  will-change: transform, opacity;
+  animation-name: modern-sk-char-in-rise;
+}
 .modern-sk-field-char--leaving {
   display: inline-block;
   position: absolute;
@@ -292,6 +304,17 @@ textarea.modern-sk-field {
     top: 0;
   }
 }
+/* inline-block (single-line) variant — composited transform, no relayout */
+@keyframes modern-sk-char-in-rise {
+  from {
+    opacity: 0;
+    transform: translateY(-0.32em);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 @keyframes modern-sk-char-out {
   from {
     opacity: 1;