STUPID SEXY TIMELINE (#16420)

packages/ui/src/components/text-shimmer.tsx

@@ -36,6 +36,19 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
     clearTimeout(timer)
   })
 
+  const shimmerSize = createMemo(() => {
+    const len = Math.max(props.text.length, 1)
+    return Math.max(300, Math.round(200 + 1400 / len))
+  })
+
+  // duration = len × (size - 1) / velocity → uniform perceived sweep speed
+  const VELOCITY = 0.01375 // ch per ms, ~10% faster than original 0.0125 baseline
+  const shimmerDuration = createMemo(() => {
+    const len = Math.max(props.text.length, 1)
+    const s = shimmerSize() / 100
+    return Math.max(1000, Math.min(2500, Math.round((len * (s - 1)) / VELOCITY)))
+  })
+
   return (
     <Dynamic
       component={props.as ?? "span"}
@@ -46,6 +59,8 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
       style={{
         "--text-shimmer-swap": `${swap}ms`,
         "--text-shimmer-index": `${offset()}`,
+        "--text-shimmer-size": `${shimmerSize()}%`,
+        "--text-shimmer-duration": `${shimmerDuration()}ms`,
       }}
     >
       <span data-slot="text-shimmer-char">