@smicolon/fasla-ui 0.2.4 → 0.3.0

package/registry/effects/border-beam/border-beam.tsx

@@ -1,9 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { motion, useReducedMotion } from "framer-motion"
+import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"
 import { cn } from "../../../src/lib/utils"
 
+/** The value, or the fallback when it is missing or blank (a cleared control, say). */
+const filled = (value: string | undefined, fallback: string) =>
+  value && value.trim() ? value : fallback
+
 export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Duration of the animation in seconds */
   duration?: number
@@ -24,62 +28,68 @@ export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
 export function BorderBeam({
   duration = 4,
   borderWidth = 2,
-  colorFrom = "hsl(var(--primary))",
-  colorTo = "transparent",
+  colorFrom: colorFromProp,
+  colorTo: colorToProp,
   delay = 0,
   className,
   children,
   ...props
 }: BorderBeamProps) {
+  const colorFrom = filled(colorFromProp, "var(--primary)")
+  const colorTo = filled(colorToProp, "transparent")
   const prefersReducedMotion = useReducedMotion()
 
+  // The beam is a conic gradient whose start angle turns, so it runs round
+  // the border of any shape; rotating a layer only works for a square.
+  const angle = useMotionValue(0)
+  React.useEffect(() => {
+    if (prefersReducedMotion) return
+    const controls = animate(angle, 360, {
+      duration,
+      delay,
+      ease: "linear",
+      repeat: Infinity,
+    })
+    return () => controls.stop()
+  }, [angle, duration, delay, prefersReducedMotion])
+  const background = useTransform(
+    angle,
+    (a) => `conic-gradient(from ${a}deg, transparent 0deg 270deg, ${colorTo} 270deg, ${colorFrom} 360deg)`
+  )
+
+  /** Paints only a borderWidth ring: the content box is masked out. */
+  const ring: React.CSSProperties = {
+    padding: borderWidth,
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+  }
+
   return (
     <div
-      className={cn("relative overflow-hidden rounded-lg", className)}
+      className={cn("relative isolate overflow-hidden rounded-lg", className)}
       {...props}
     >
-      {/* Border beam */}
-      {!prefersReducedMotion && (
-        <motion.div
-          className="pointer-events-none absolute inset-0 rounded-[inherit]"
-          style={{
-            padding: borderWidth,
-            background: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,
-            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-            maskComposite: "exclude",
-            WebkitMaskComposite: "xor",
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration,
-            delay,
-            repeat: Infinity,
-            ease: "linear",
-          }}
-        />
-      )}
+      {/* Content */}
+      <div className="relative rounded-[inherit] bg-background">
+        {children}
+      </div>
 
-      {/* Static border fallback for reduced motion */}
-      {prefersReducedMotion && (
+      {/* The ring sits above the content, over its outer edge, so the content cannot cover it */}
+      {prefersReducedMotion ? (
         <div
-          className="pointer-events-none absolute inset-0 rounded-[inherit]"
-          style={{
-            padding: borderWidth,
-            background: colorFrom,
-            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-            maskComposite: "exclude",
-            WebkitMaskComposite: "xor",
-            opacity: 0.5,
-          }}
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-10 rounded-[inherit]"
+          style={{ ...ring, background: colorFrom, opacity: 0.5 }}
+        />
+      ) : (
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-10 rounded-[inherit]"
+          style={{ ...ring, background }}
         />
       )}
-
-      {/* Content */}
-      <div className="relative z-10 rounded-[inherit] bg-background">
-        {children}
-      </div>
     </div>
   )
 }
@@ -93,40 +103,54 @@ export interface GlowingBorderProps extends React.HTMLAttributes<HTMLDivElement>
   intensity?: "sm" | "md" | "lg"
 }
 
+/**
+ * The ring's width and the blur of the glow that hugs it, in px. The glow has
+ * no spread, so it stays close to the edge instead of casting a shadow.
+ */
 const intensityValues = {
-  sm: "0 0 10px 2px",
-  md: "0 0 20px 4px",
-  lg: "0 0 30px 6px",
+  sm: { ring: 1, glow: 4 },
+  md: { ring: 1, glow: 8 },
+  lg: { ring: 2, glow: 12 },
 }
 
 /**
- * Static glowing border effect.
+ * Static glowing border: a coloured ring on the element's edge with a soft,
+ * tight glow around it. The ring is the border, so the content needs none.
  */
 export function GlowingBorder({
-  glowColor = "hsl(var(--primary) / 0.5)",
-  borderRadius = "0.5rem",
+  glowColor: glowColorProp,
+  borderRadius: borderRadiusProp,
   intensity = "md",
   className,
   children,
   ...props
 }: GlowingBorderProps) {
+  const glowColor = filled(glowColorProp, "color-mix(in oklch, var(--primary) 50%, transparent)")
+  const borderRadius = filled(borderRadiusProp, "0.5rem")
+  const { ring, glow } = intensityValues[intensity]
   return (
     <div
-      className={cn("relative", className)}
+      className={cn("relative isolate", className)}
       style={{
         borderRadius,
       }}
       {...props}
     >
-      {/* Glow */}
+      {children}
+      {/*
+        Above the content, so a card's own background cannot cover it. The inset
+        shadow draws the ring just inside the edge, over any neutral border the
+        content has; the outer ones are the glow.
+      */}
       <div
-        className="absolute inset-0 -z-10"
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-10"
         style={{
           borderRadius,
-          boxShadow: `${intensityValues[intensity]} ${glowColor}`,
+          // Two stacked blurs, no spread: a denser glow at the edge that fades fast.
+          boxShadow: `inset 0 0 0 ${ring}px ${glowColor}, 0 0 ${glow / 2}px 0 ${glowColor}, 0 0 ${glow}px 0 ${glowColor}`,
         }}
       />
-      {children}
     </div>
   )
 }

package/registry/effects/effects.test.tsx

@@ -0,0 +1,266 @@
+import { describe, it, expect, vi, afterEach } from "vitest"
+import { act, fireEvent, render, waitFor } from "@testing-library/react"
+import { ShimmerButton } from "./shimmer-button/shimmer-button"
+import { AnimatedGradient } from "./animated-gradient/animated-gradient"
+import { TypewriterText } from "./typewriter-text/typewriter-text"
+import { Spotlight, SpotlightCard } from "./spotlight/spotlight"
+import { GlowCard } from "./glow-card/glow-card"
+import { BorderBeam, GlowingBorder } from "./border-beam/border-beam"
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe("ShimmerButton", () => {
+  it("draws the sheen in primary-foreground by default, so it shows on the primary background", () => {
+    const { getByRole } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").style.getPropertyValue("--shimmer-color")).toContain("--primary-foreground")
+  })
+
+  it("sizes the sheen with shimmerSize, full width by default", () => {
+    const { getByRole, rerender } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").style.getPropertyValue("--shimmer-size")).toBe("100%")
+    rerender(<ShimmerButton shimmerSize="3rem">Shop</ShimmerButton>)
+    const button = getByRole("button")
+    expect(button.style.getPropertyValue("--shimmer-size")).toBe("3rem")
+    const sheen = Array.from(button.querySelectorAll<HTMLElement>("div")).find((el) => el.style.width)
+    expect(sheen?.style.width).toBe("var(--shimmer-size)")
+  })
+
+  it("ships its own keyframes, so it needs no Tailwind config", () => {
+    const { container } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(container.querySelector("style")?.textContent).toContain("@keyframes fasla-shimmer")
+  })
+})
+
+describe("TypewriterText", () => {
+  it("does not restart when the parent passes a new inline onComplete", () => {
+    vi.useFakeTimers()
+    const { container, rerender } = render(<TypewriterText text="Hello" speed={10} onComplete={() => {}} />)
+    act(() => {
+      vi.advanceTimersByTime(35)
+    })
+    const typed = container.textContent
+    rerender(<TypewriterText text="Hello" speed={10} onComplete={() => {}} />)
+    expect(container.textContent).toBe(typed)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Hello|")
+  })
+
+  it("calls the latest onComplete once the text is typed", () => {
+    vi.useFakeTimers()
+    const first = vi.fn()
+    const latest = vi.fn()
+    const { rerender } = render(<TypewriterText text="Hi" speed={10} onComplete={first} />)
+    rerender(<TypewriterText text="Hi" speed={10} onComplete={latest} />)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(first).not.toHaveBeenCalled()
+    expect(latest).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe("SpotlightCard", () => {
+  it("centres the light on the pointer", () => {
+    const { container } = render(<SpotlightCard spotlightSize={300}>Card</SpotlightCard>)
+    fireEvent.mouseEnter(container.firstElementChild!)
+    const light = container.querySelector<HTMLElement>(".rounded-full")!
+    expect(light.style.left).toBe("-150px")
+    expect(light.style.top).toBe("-150px")
+  })
+})
+
+describe("GlowCard", () => {
+  it("puts the glow between the card surface and the content, not under an opaque layer", () => {
+    const { container, getByText } = render(<GlowCard hoverOnly={false}>Card</GlowCard>)
+    const root = container.firstElementChild as HTMLElement
+    expect(root.className).toContain("bg-card")
+    const content = getByText("Card")
+    expect(content.className).not.toContain("bg-")
+    expect(root.firstElementChild?.className).toContain("opacity-100")
+  })
+})
+
+describe("BorderBeam", () => {
+  it("paints the beam above the content", () => {
+    const { container, getByText } = render(<BorderBeam>Card</BorderBeam>)
+    const root = container.firstElementChild as HTMLElement
+    const beam = root.lastElementChild as HTMLElement
+    expect(root.firstElementChild).toBe(getByText("Card"))
+    expect(beam.className).toContain("z-10")
+    expect(beam.getAttribute("aria-hidden")).toBe("true")
+  })
+})
+
+describe("GlowingBorder", () => {
+  it("draws a coloured ring above the content with a tight glow and no spread", () => {
+    const { container, getByText } = render(
+      <GlowingBorder glowColor="red" intensity="lg">
+        Card
+      </GlowingBorder>
+    )
+    const root = container.firstElementChild as HTMLElement
+    const ring = root.lastElementChild as HTMLElement
+    expect(root.firstChild?.textContent).toBe(getByText("Card").textContent)
+    expect(ring.className).toContain("z-10")
+    const shadow = ring.style.boxShadow
+    expect(shadow).toContain("inset 0 0 0 2px red")
+    // Every outer layer is a blur with zero spread: "0 0 <blur>px 0".
+    for (const layer of shadow.split(/,(?![^(]*\))/).slice(1)) {
+      expect(layer.trim()).toMatch(/^0 0 \d+px 0 red$/)
+    }
+  })
+})
+
+describe("Spotlight", () => {
+  it("keeps the resting light centred when the container resizes, until the pointer moves", async () => {
+    let resize: () => void = () => {}
+    const saved = globalThis.ResizeObserver
+    globalThis.ResizeObserver = class {
+      constructor(callback: () => void) {
+        resize = callback
+      }
+      observe() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver
+    let width = 400
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(() => width)
+    const heightSpy = vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(() => 200)
+    try {
+      const { container } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const light = container.querySelector<HTMLElement>(".rounded-full")!
+      // framer writes translateX(<n>px); jsdom has no DOMMatrix to parse it.
+      const x = () => Number(/translateX\((-?[\d.]+)px\)/.exec(light.style.transform)?.[1] ?? 0)
+      // framer writes the transform on its next frame, hence waitFor.
+      await waitFor(() => expect(x()).toBe(200)) // centre of 400
+      width = 800
+      act(() => resize())
+      await waitFor(() => expect(x()).toBe(400)) // centre of 800
+      fireEvent.mouseMove(container.firstElementChild!, { clientX: 10, clientY: 10 })
+      width = 1000
+      act(() => resize())
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      expect(x()).not.toBe(500) // the pointer has taken over from the centre
+    } finally {
+      widthSpy.mockRestore()
+      heightSpy.mockRestore()
+      globalThis.ResizeObserver = saved
+    }
+  })
+})
+
+/**
+ * A blank string prop (what a cleared Storybook control or an empty form field
+ * passes) falls back to the default instead of emptying the style it feeds.
+ */
+describe("blank string props fall back to their defaults", () => {
+  it("ShimmerButton: every string prop", () => {
+    const { getByRole } = render(
+      <ShimmerButton shimmerColor="" shimmerSize=" " shimmerDuration="" borderRadius="" background="">
+        Shop
+      </ShimmerButton>
+    )
+    const style = getByRole("button").style
+    expect(style.getPropertyValue("--shimmer-color")).toContain("--primary-foreground")
+    expect(style.getPropertyValue("--shimmer-size")).toBe("100%")
+    expect(style.getPropertyValue("--shimmer-duration")).toBe("2s")
+    expect(style.getPropertyValue("--border-radius")).toBe("0.5rem")
+    expect(style.getPropertyValue("--background")).toBe("var(--primary)")
+  })
+
+  it("ShimmerButton: no stacked motion-safe hover variant, anywhere in the source", async () => {
+    const { getByRole } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").className).toContain("hover:scale-105")
+    // Tailwind generates classes it finds in comments, so check the file itself.
+    const { readFileSync } = await import("node:fs")
+    const { resolve } = await import("node:path")
+    const source = readFileSync(resolve(__dirname, "shimmer-button/shimmer-button.tsx"), "utf8")
+    expect(source).not.toMatch(/motion-(safe|reduce):(hover|focus)/)
+  })
+
+  it("BorderBeam and GlowingBorder", async () => {
+    const beam = render(<BorderBeam colorFrom="" colorTo="">Card</BorderBeam>)
+    const ring = beam.container.firstElementChild!.lastElementChild as HTMLElement
+    await waitFor(() => expect(ring.style.background).toContain("var(--primary) 360deg"))
+    expect(ring.style.background).toContain("transparent 270deg")
+
+    const glow = render(<GlowingBorder glowColor="" borderRadius="">Card</GlowingBorder>)
+    const root = glow.container.firstElementChild as HTMLElement
+    expect(root.style.borderRadius).toBe("0.5rem")
+    expect((root.lastElementChild as HTMLElement).style.boxShadow).toContain("var(--primary)")
+  })
+
+  it("GlowCard and GlowContainer", () => {
+    const card = render(<GlowCard glowColor="" hoverOnly={false}>Card</GlowCard>)
+    const layer = card.container.firstElementChild!.firstElementChild as HTMLElement
+    expect(layer.style.background).toContain("var(--primary)")
+  })
+
+  it("Spotlight and SpotlightCard", () => {
+    const spot = render(<Spotlight color="">Panel</Spotlight>)
+    expect(spot.container.querySelector<HTMLElement>(".rounded-full")!.style.background).toContain("var(--primary)")
+    const card = render(<SpotlightCard spotlightColor="">Card</SpotlightCard>)
+    fireEvent.mouseEnter(card.container.firstElementChild!)
+    expect(card.container.querySelector<HTMLElement>(".rounded-full")!.style.background).toContain("var(--primary)")
+  })
+
+  it("AnimatedGradient: blank colours are dropped, an empty list uses the default", () => {
+    const empty = render(<AnimatedGradient colors={[]} />)
+    expect(empty.container.querySelectorAll(".rounded-full")).toHaveLength(4)
+    const some = render(<AnimatedGradient colors={["", "red", " "]} />)
+    const blobs = some.container.querySelectorAll<HTMLElement>(".rounded-full")
+    expect(blobs).toHaveLength(1)
+    expect(blobs[0]!.style.background).toBe("red")
+  })
+
+  it("TypewriterText: a blank cursorChar keeps the default cursor", () => {
+    const { container } = render(<TypewriterText text="Hi" cursorChar="" />)
+    expect(container.querySelector("[aria-hidden]")?.textContent).toBe("|")
+  })
+})
+
+describe("Spotlight size", () => {
+  // The light's centre is its translate plus its left offset plus half its size.
+  const centreOf = (light: HTMLElement) => {
+    const translate = Number(/translateX\((-?[\d.]+)px\)/.exec(light.style.transform)?.[1] ?? 0)
+    return translate + parseFloat(light.style.left) + light.offsetWidth / 2
+  }
+
+  it("keeps the light centred on the pointer when size changes after the pointer moved", async () => {
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+      return this.classList.contains("rounded-full") ? parseFloat(this.style.width) : 400
+    })
+    try {
+      const { container, rerender } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const root = container.firstElementChild!
+      fireEvent.mouseMove(root, { clientX: 120, clientY: 60 })
+      const light = () => container.querySelector<HTMLElement>(".rounded-full")!
+      await waitFor(() => expect(Math.round(centreOf(light()))).toBe(120))
+      rerender(<Spotlight size={300}>Panel</Spotlight>)
+      await waitFor(() => expect(light().style.width).toBe("300px"))
+      expect(Math.round(centreOf(light()))).toBe(120)
+      expect(light().style.left).toBe("-150px")
+    } finally {
+      widthSpy.mockRestore()
+    }
+  })
+
+  it("keeps the resting light at the container's centre when size changes", async () => {
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+      return this.classList.contains("rounded-full") ? parseFloat(this.style.width) : 400
+    })
+    try {
+      const { container, rerender } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const light = () => container.querySelector<HTMLElement>(".rounded-full")!
+      await waitFor(() => expect(Math.round(centreOf(light()))).toBe(200))
+      rerender(<Spotlight size={300}>Panel</Spotlight>)
+      await waitFor(() => expect(light().style.width).toBe("300px"))
+      expect(Math.round(centreOf(light()))).toBe(200)
+    } finally {
+      widthSpy.mockRestore()
+    }
+  })
+})

package/registry/effects/glow-card/glow-card.tsx

@@ -3,6 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * Whether the user asks for reduced motion. It starts false, so the server and
+ * the first client render agree, then follows the setting as it changes.
+ */
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false)
+  React.useEffect(() => {
+    if (typeof window.matchMedia !== "function") return
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setReduced(query.matches)
+    const onChange = () => setReduced(query.matches)
+    query.addEventListener("change", onChange)
+    return () => query.removeEventListener("change", onChange)
+  }, [])
+  return reduced
+}
+
+/** The value, or the fallback when it is missing or blank (a cleared control, say). */
+const filled = (value: string | undefined, fallback: string) =>
+  value && value.trim() ? value : fallback
+
 export interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Glow color (any CSS color) */
   glowColor?: string
@@ -16,7 +37,7 @@ export interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function GlowCard({
-  glowColor = "hsl(var(--primary))",
+  glowColor: glowColorProp,
   glowIntensity = 60,
   followMouse = false,
   hoverOnly = true,
@@ -24,29 +45,30 @@ export function GlowCard({
   children,
   ...props
 }: GlowCardProps) {
+  const glowColor = filled(glowColorProp, "var(--primary)")
   const cardRef = React.useRef<HTMLDivElement>(null)
-  const [mousePosition, setMousePosition] = React.useState({ x: 50, y: 50 })
+  // Pointer position in px from the card's top-left; null keeps the glow centred.
+  const [mousePosition, setMousePosition] = React.useState<{ x: number; y: number } | null>(null)
   const [isHovering, setIsHovering] = React.useState(false)
 
-  // Check for reduced motion preference
-  const prefersReducedMotion = React.useMemo(() => {
-    if (typeof window === "undefined") return false
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, [])
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   const handleMouseMove = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if (!followMouse || !cardRef.current || prefersReducedMotion) return
 
       const rect = cardRef.current.getBoundingClientRect()
-      const x = ((e.clientX - rect.left) / rect.width) * 100
-      const y = ((e.clientY - rect.top) / rect.height) * 100
-      setMousePosition({ x, y })
+      setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
     },
     [followMouse, prefersReducedMotion]
   )
 
   const showGlow = prefersReducedMotion ? false : hoverOnly ? isHovering : true
+  // The glow layer overhangs the card by the blur radius on every side, so the
+  // blur has colour to spread instead of fading into the card's clipped edge.
+  const overhang = glowIntensity
+  const glowAt = mousePosition ? `${mousePosition.x + overhang}px ${mousePosition.y + overhang}px` : "50% 50%"
+  const edgeAt = mousePosition ? `${mousePosition.x}px ${mousePosition.y}px` : "50% 50%"
 
   return (
     <div
@@ -54,45 +76,45 @@ export function GlowCard({
       onMouseMove={handleMouseMove}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
-      className={cn("relative overflow-hidden rounded-xl", className)}
+      className={cn("relative isolate overflow-hidden rounded-xl border bg-card", className)}
       {...props}
     >
-      {/* Glow effect */}
+      {/*
+        Glow: above the card surface and below the content, so it shows through
+        it. The colour is softened so text on top keeps its contrast.
+      */}
       <div
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300",
+          "pointer-events-none absolute opacity-0 transition-opacity duration-300",
           showGlow && "opacity-100"
         )}
         style={{
-          background: followMouse
-            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 70%)`
-            : `radial-gradient(circle at 50% 50%, ${glowColor}, transparent 70%)`,
+          inset: -overhang,
+          background: `radial-gradient(circle at ${glowAt}, color-mix(in oklch, ${glowColor} 60%, transparent), transparent 40%)`,
           filter: `blur(${glowIntensity}px)`,
         }}
       />
 
-      {/* Border glow */}
+      {/* Card content */}
+      <div className="relative">{children}</div>
+
+      {/* Edge glow: a 1px ring above the content, just inside the border */}
       <div
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300",
-          showGlow && "opacity-50"
+          "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-300",
+          showGlow && "opacity-100"
         )}
         style={{
-          background: followMouse
-            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 50%)`
-            : undefined,
+          background: `radial-gradient(circle at ${edgeAt}, ${glowColor}, transparent 50%)`,
           padding: "1px",
-          WebkitMask:
-            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
           WebkitMaskComposite: "xor",
+          mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
           maskComposite: "exclude",
         }}
       />
-
-      {/* Card content */}
-      <div className="relative z-10 rounded-xl border bg-card">
-        {children}
-      </div>
     </div>
   )
 }
@@ -106,29 +128,18 @@ export interface GlowContainerProps extends React.HTMLAttributes<HTMLDivElement>
 }
 
 export function GlowContainer({
-  glowColor = "hsl(var(--primary))",
+  glowColor: glowColorProp,
   duration = 3,
   className,
   children,
   ...props
 }: GlowContainerProps) {
-  const prefersReducedMotion = React.useMemo(() => {
-    if (typeof window === "undefined") return false
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, [])
+  const glowColor = filled(glowColorProp, "var(--primary)")
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   return (
     <div
       className={cn("relative overflow-hidden rounded-xl p-px", className)}
-      style={
-        !prefersReducedMotion
-          ? {
-              background: `linear-gradient(90deg, ${glowColor}, transparent, ${glowColor})`,
-              backgroundSize: "200% 100%",
-              animation: `glow-slide ${duration}s linear infinite`,
-            }
-          : { background: glowColor }
-      }
       {...props}
     >
       <style dangerouslySetInnerHTML={{ __html: `
@@ -137,6 +148,20 @@ export function GlowContainer({
           100% { background-position: -200% 0; }
         }
       ` }} />
+      {/* The glow is its own layer so it can mirror in RTL and slide in the reading direction */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 rtl:-scale-x-100"
+        style={
+          !prefersReducedMotion
+            ? {
+                background: `linear-gradient(90deg, ${glowColor}, transparent, ${glowColor})`,
+                backgroundSize: "200% 100%",
+                animation: `glow-slide ${duration}s linear infinite`,
+              }
+            : { background: glowColor }
+        }
+      />
       <div className="relative z-10 rounded-[11px] bg-background">
         {children}
       </div>