From 9512fa889c7b7512455ade77afe8cf30e474c4d1 Mon Sep 17 00:00:00 2001
From: GioChkhaidze <gchkhaid@andrew.cmu.edu>
Date: Sun, 6 Sep 2026 15:52:38 +0000
Subject: [PATCH 1/3] Extract dedup code to shimmer core

---
 .../ui/src/components/text-shimmer-core.tsx   | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 packages/ui/src/components/text-shimmer-core.tsx

diff --git a/packages/ui/src/components/text-shimmer-core.tsx b/packages/ui/src/components/text-shimmer-core.tsx
new file mode 100644
index 00000000..a85dac00
--- /dev/null
+++ b/packages/ui/src/components/text-shimmer-core.tsx
@@ -0,0 +1,75 @@
+import { createEffect, createMemo, createSignal, onCleanup, type JSX, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+
+export type TextShimmerCoreProps<T extends ValidComponent = "span"> = {
+  text: string
+  class?: string 
+  as?: T
+  active?: boolean
+  offset?: number
+  component: string
+  charSlot: string
+  bareSlot: string
+  shimmerSlot: string
+  swapVar: string
+  indexVar: string
+}
+
+export const TextShimmerCore = <T extends ValidComponent = "span">(
+  props: TextShimmerCoreProps<T>
+) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component={props.component}
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={buildTextSimmerStyle(props.swapVar, props.indexVar, swap, offset())}
+    >
+      <span data-slot={props.charSlot}>
+        <span data-slot={props.bareSlot} aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot={props.shimmerSlot} data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}
+
+export function buildTextSimmerStyle(swapVar: string, indexVar: string, 
+  swap: number, offset: number) {
+  return {[swapVar]: `${swap}ms`, [indexVar]: `${offset}` } as JSX.CSSProperties
+}

From 98d8cc4afcf56cf0fcb817565a82fdbd9caec4b5 Mon Sep 17 00:00:00 2001
From: GioChkhaidze <gchkhaid@andrew.cmu.edu>
Date: Sun, 6 Sep 2026 16:01:39 +0000
Subject: [PATCH 2/3] Fix shared logic & reuse in shimmer & v2

---
 .../ui/src/components/text-shimmer-core.tsx   |  9 ++-
 packages/ui/src/components/text-shimmer.tsx   | 65 ++++---------------
 .../ui/src/v2/components/text-shimmer-v2.tsx  | 65 ++++---------------
 3 files changed, 28 insertions(+), 111 deletions(-)

diff --git a/packages/ui/src/components/text-shimmer-core.tsx b/packages/ui/src/components/text-shimmer-core.tsx
index a85dac00..b475258d 100644
--- a/packages/ui/src/components/text-shimmer-core.tsx
+++ b/packages/ui/src/components/text-shimmer-core.tsx
@@ -1,7 +1,6 @@
 import { createEffect, createMemo, createSignal, onCleanup, type JSX, type ValidComponent } from "solid-js"
 import { Dynamic } from "solid-js/web"
 
-
 export type TextShimmerCoreProps<T extends ValidComponent = "span"> = {
   text: string
   class?: string 
@@ -10,7 +9,7 @@ export type TextShimmerCoreProps<T extends ValidComponent = "span"> = {
   offset?: number
   component: string
   charSlot: string
-  bareSlot: string
+  baseSlot: string
   shimmerSlot: string
   swapVar: string
   indexVar: string
@@ -55,10 +54,10 @@ export const TextShimmerCore = <T extends ValidComponent = "span">(
       data-active={active() ? "true" : "false"}
       class={props.class}
       aria-label={text()}
-      style={buildTextSimmerStyle(props.swapVar, props.indexVar, swap, offset())}
+      style={buildTextShimmerStyle(props.swapVar, props.indexVar, swap, offset())}
     >
       <span data-slot={props.charSlot}>
-        <span data-slot={props.bareSlot} aria-hidden="true">
+        <span data-slot={props.baseSlot} aria-hidden="true">
           {text()}
         </span>
         <span data-slot={props.shimmerSlot} data-run={run() ? "true" : "false"} aria-hidden="true">
@@ -69,7 +68,7 @@ export const TextShimmerCore = <T extends ValidComponent = "span">(
   )
 }
 
-export function buildTextSimmerStyle(swapVar: string, indexVar: string, 
+export function buildTextShimmerStyle(swapVar: string, indexVar: string, 
   swap: number, offset: number) {
   return {[swapVar]: `${swap}ms`, [indexVar]: `${offset}` } as JSX.CSSProperties
 }
diff --git a/packages/ui/src/components/text-shimmer.tsx b/packages/ui/src/components/text-shimmer.tsx
index 3ab077d9..6b2789a9 100644
--- a/packages/ui/src/components/text-shimmer.tsx
+++ b/packages/ui/src/components/text-shimmer.tsx
@@ -1,5 +1,14 @@
-import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
-import { Dynamic } from "solid-js/web"
+import type { ValidComponent } from "solid-js"
+import { TextShimmerCore } from "./text-shimmer-core"
+
+export const TextShimmerConfig = {
+  component: "text-shimmer",
+  charSlot: "text-shimmer-char",
+  baseSlot: "text-shimmer-char-base",
+  shimmerSlot: "text-shimmer-char-shimmer",
+  swapVar: "--text-shimmer-swap",
+  indexVar: "--text-shimmer-index"
+} as const
 
 export const TextShimmer = <T extends ValidComponent = "span">(props: {
   text: string
@@ -8,55 +17,5 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
   active?: boolean
   offset?: number
 }) => {
-  const text = createMemo(() => props.text ?? "")
-  const active = createMemo(() => props.active ?? true)
-  const offset = createMemo(() => props.offset ?? 0)
-  const [run, setRun] = createSignal(active())
-  const swap = 220
-  let timer: ReturnType<typeof setTimeout> | undefined
-
-  createEffect(() => {
-    if (timer) {
-      clearTimeout(timer)
-      timer = undefined
-    }
-
-    if (active()) {
-      setRun(true)
-      return
-    }
-
-    timer = setTimeout(() => {
-      timer = undefined
-      setRun(false)
-    }, swap)
-  })
-
-  onCleanup(() => {
-    if (!timer) return
-    clearTimeout(timer)
-  })
-
-  return (
-    <Dynamic
-      component={props.as ?? "span"}
-      data-component="text-shimmer"
-      data-active={active() ? "true" : "false"}
-      class={props.class}
-      aria-label={text()}
-      style={{
-        "--text-shimmer-swap": `${swap}ms`,
-        "--text-shimmer-index": `${offset()}`,
-      }}
-    >
-      <span data-slot="text-shimmer-char">
-        <span data-slot="text-shimmer-char-base" aria-hidden="true">
-          {text()}
-        </span>
-        <span data-slot="text-shimmer-char-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
-          {text()}
-        </span>
-      </span>
-    </Dynamic>
-  )
+  return <TextShimmerCore {...props} {...TextShimmerConfig} />
 }
diff --git a/packages/ui/src/v2/components/text-shimmer-v2.tsx b/packages/ui/src/v2/components/text-shimmer-v2.tsx
index d1860477..184c8a51 100644
--- a/packages/ui/src/v2/components/text-shimmer-v2.tsx
+++ b/packages/ui/src/v2/components/text-shimmer-v2.tsx
@@ -1,7 +1,16 @@
-import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
-import { Dynamic } from "solid-js/web"
+import type { ValidComponent } from "solid-js"
+import { TextShimmerCore } from "../../components/text-shimmer-core"
 import "./text-shimmer-v2.css"
 
+export const TextShimmerV2Config = {
+  component: "text-shimmer-v2",
+  charSlot: "text-shimmer-v2-char",
+  baseSlot: "text-shimmer-v2-base",
+  shimmerSlot: "text-shimmer-v2-shimmer",
+  swapVar: "--_swap",
+  indexVar: "--_index"
+} as const
+
 export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
   text: string
   class?: string
@@ -9,55 +18,5 @@ export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
   active?: boolean
   offset?: number
 }) => {
-  const text = createMemo(() => props.text ?? "")
-  const active = createMemo(() => props.active ?? true)
-  const offset = createMemo(() => props.offset ?? 0)
-  const [run, setRun] = createSignal(active())
-  const swap = 220
-  let timer: ReturnType<typeof setTimeout> | undefined
-
-  createEffect(() => {
-    if (timer) {
-      clearTimeout(timer)
-      timer = undefined
-    }
-
-    if (active()) {
-      setRun(true)
-      return
-    }
-
-    timer = setTimeout(() => {
-      timer = undefined
-      setRun(false)
-    }, swap)
-  })
-
-  onCleanup(() => {
-    if (!timer) return
-    clearTimeout(timer)
-  })
-
-  return (
-    <Dynamic
-      component={props.as ?? "span"}
-      data-component="text-shimmer-v2"
-      data-active={active() ? "true" : "false"}
-      class={props.class}
-      aria-label={text()}
-      style={{
-        "--_swap": `${swap}ms`,
-        "--_index": `${offset()}`,
-      }}
-    >
-      <span data-slot="text-shimmer-v2-char">
-        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
-          {text()}
-        </span>
-        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
-          {text()}
-        </span>
-      </span>
-    </Dynamic>
-  )
+  return <TextShimmerCore {...props} {...TextShimmerV2Config} />
 }

From 7363543c6ab8881adab4577592e53c3d18fc0544 Mon Sep 17 00:00:00 2001
From: GioChkhaidze <gchkhaid@andrew.cmu.edu>
Date: Sun, 6 Sep 2026 16:29:23 +0000
Subject: [PATCH 3/3] Add testcases for shimmer core & test invariant

---
 .../src/components/text-shimmer-core.test.ts  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 packages/ui/src/components/text-shimmer-core.test.ts

diff --git a/packages/ui/src/components/text-shimmer-core.test.ts b/packages/ui/src/components/text-shimmer-core.test.ts
new file mode 100644
index 00000000..f9be206a
--- /dev/null
+++ b/packages/ui/src/components/text-shimmer-core.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test"
+import { buildTextShimmerStyle } from "./text-shimmer-core"
+import { TextShimmerConfig } from "./text-shimmer"
+import { TextShimmerV2Config } from "../v2/components/text-shimmer-v2"
+
+describe("buildTextShimmerStyle", () => {
+  test("swap/index vars are mapped", () => {
+    expect(buildTextShimmerStyle("--text-shimmer-swap",
+      "--text-shimmer-index", 220, 5)).toEqual({
+        "--text-shimmer-swap": "220ms",
+        "--text-shimmer-index": "5",
+    })
+  })
+  test("swap/index vars are mapped for v2", () => {
+    expect(buildTextShimmerStyle("--_swap", "--_index", 220, 0)).toEqual({
+        "--_swap": "220ms",
+        "--_index": "0",
+    })
+  })
+  test("helper keys match config", () => {
+    expect(Object.keys(buildTextShimmerStyle(TextShimmerConfig.swapVar,
+      TextShimmerConfig.indexVar, 220, 1))).toEqual(
+        [TextShimmerConfig.swapVar, TextShimmerConfig.indexVar]
+    )
+    expect(Object.keys(buildTextShimmerStyle(TextShimmerV2Config.swapVar,
+      TextShimmerV2Config.indexVar, 220, 1))).toEqual(
+        [TextShimmerV2Config.swapVar, TextShimmerV2Config.indexVar]
+    )
+  })
+})
+
+describe("Configurations of shimmers", () => {
+  test("original selectors of v1 is kept", () => {
+    expect(TextShimmerConfig).toEqual({
+      component: "text-shimmer",
+      charSlot: "text-shimmer-char",
+      baseSlot: "text-shimmer-char-base",
+      shimmerSlot: "text-shimmer-char-shimmer",
+      swapVar: "--text-shimmer-swap",
+      indexVar: "--text-shimmer-index",
+    })
+  })
+  test("original selectos of v2 is kept", () => {
+    expect(TextShimmerV2Config).toEqual({
+      component: "text-shimmer-v2",
+      charSlot: "text-shimmer-v2-char",
+      baseSlot: "text-shimmer-v2-base",
+      shimmerSlot: "text-shimmer-v2-shimmer",
+      swapVar: "--_swap",
+      indexVar: "--_index",
+    })
+  })
+  test("v1 & v2 are different", () => {
+    expect(TextShimmerConfig.component).not.toBe(TextShimmerV2Config.component)
+    expect(TextShimmerConfig.charSlot).not.toBe(TextShimmerV2Config.charSlot)
+  })
+})