@a4ui/core 0.31.0 → 0.32.0

package/src/charts/LineChart.tsx

@@ -0,0 +1,264 @@
+// LineChart — a multi-series SVG line chart (no charting library). Every
+// series is scaled against the global min/max across *all* series so they
+// stay comparable, then drawn as one polyline each, with an optional
+// low-opacity area fill down to the baseline. Colors come from theme tokens
+// only, so the chart recolors with the active palette automatically.
+import { createSignal, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface LineSeries {
+  name?: string
+  tone?: 'primary' | 'accent' | 'muted' | 'foreground'
+  data: number[]
+  area?: boolean
+}
+
+export interface LineChartProps {
+  series: LineSeries[]
+  labels?: string[]
+  /** Height of the plot area in px. Default 200. */
+  height?: number
+  /** Render a small circle at each data point. Default false. */
+  showDots?: boolean
+  /** Show a crosshair + value tooltip on pointer hover. Default false. */
+  showTooltip?: boolean
+  class?: string
+}
+
+/** Logical SVG width; the element itself scales to its container via viewBox. */
+const VIEW_W = 400
+const PAD_Y = 4
+const TONE_CYCLE: NonNullable<LineSeries['tone']>[] = ['primary', 'accent', 'muted']
+
+function toneFor(series: LineSeries, index: number): NonNullable<LineSeries['tone']> {
+  return series.tone ?? TONE_CYCLE[index % TONE_CYCLE.length]
+}
+
+function toneColor(tone: NonNullable<LineSeries['tone']>): string {
+  return tone === 'foreground' ? 'hsl(var(--foreground))' : `hsl(var(--${tone}))`
+}
+
+function toneColorAlpha(tone: NonNullable<LineSeries['tone']>, alpha: number): string {
+  const varName = tone === 'foreground' ? '--foreground' : `--${tone}`
+  return `hsl(var(${varName}) / ${alpha})`
+}
+
+/** Point count used for the x-axis: the longest `data` array across all series. */
+function pointCount(series: LineSeries[]): number {
+  return Math.max(0, ...series.map((s) => s.data.length))
+}
+
+/** Global min/max across every series' values, so all series share one y-scale. */
+function globalRange(series: LineSeries[]): { min: number; max: number } {
+  const values = series.flatMap((s) => s.data)
+  if (values.length === 0) return { min: 0, max: 1 }
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  return min === max ? { min: min - 1, max: max + 1 } : { min, max }
+}
+
+function yFor(value: number, min: number, max: number, h: number): number {
+  const span = max - min || 1
+  const innerH = Math.max(h - PAD_Y * 2, 0)
+  return PAD_Y + innerH - ((value - min) / span) * innerH
+}
+
+function xFor(index: number, count: number): number {
+  if (count <= 1) return VIEW_W / 2
+  return index * (VIEW_W / (count - 1))
+}
+
+function pointsFor(
+  data: number[],
+  count: number,
+  min: number,
+  max: number,
+  h: number,
+): { x: number; y: number }[] {
+  return data.map((value, i) => ({ x: xFor(i, count), y: yFor(value, min, max, h) }))
+}
+
+/**
+ * Multi-series SVG line chart scaled to fit its container (responsive
+ * viewBox, `preserveAspectRatio="none"`), with a shared y-scale across all
+ * series. Series with `area: true` also get a faint fill to the baseline.
+ * Assumes equal-length `data` arrays across series; if lengths differ, the
+ * x-axis is built from the longest one.
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   series={[
+ *     { name: 'Revenue', tone: 'primary', data: [4, 6, 5, 9, 8, 12], area: true },
+ *     { name: 'Costs', tone: 'muted', data: [2, 3, 3, 4, 5, 6] },
+ *   ]}
+ *   labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
+ *   showDots
+ *   showTooltip
+ * />
+ * ```
+ */
+export function LineChart(props: LineChartProps): JSX.Element {
+  const height = () => props.height ?? 200
+  const count = () => pointCount(props.series)
+  const range = () => globalRange(props.series)
+  const namedSeries = () => props.series.filter((s) => s.name)
+
+  const seriesPoints = () =>
+    props.series.map((s) => pointsFor(s.data, count(), range().min, range().max, height()))
+
+  const areaPath = (points: { x: number; y: number }[]): string => {
+    if (points.length === 0) return ''
+    const line = points.map((p) => `${p.x},${p.y}`).join(' L ')
+    const first = points[0]
+    const last = points[points.length - 1]
+    return `M ${first.x},${height()} L ${line} L ${last.x},${height()} Z`
+  }
+
+  let svgRef: SVGSVGElement | undefined
+  const [hoverIndex, setHoverIndex] = createSignal<number | null>(null)
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (!svgRef || count() === 0) return
+    const rect = svgRef.getBoundingClientRect()
+    const fraction = rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width
+    const clamped = Math.min(1, Math.max(0, fraction))
+    const idx = count() <= 1 ? 0 : Math.round(clamped * (count() - 1))
+    setHoverIndex(idx)
+  }
+
+  const handlePointerLeave = () => setHoverIndex(null)
+
+  const ariaLabel = () => {
+    const names = namedSeries()
+      .map((s) => s.name)
+      .join(', ')
+    const seriesLabel = names || `${props.series.length} series`
+    return `Line chart with ${seriesLabel}, ${count()} data points each`
+  }
+
+  return (
+    <div class={cn('w-full', props.class)}>
+      <Show when={namedSeries().length >= 2}>
+        <div class="mb-2 flex flex-wrap gap-x-3 gap-y-1">
+          <For each={props.series}>
+            {(s, i) => (
+              <Show when={s.name}>
+                <span class="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <span
+                    class="inline-block size-2 rounded-full"
+                    style={{ 'background-color': toneColor(toneFor(s, i())) }}
+                  />
+                  {s.name}
+                </span>
+              </Show>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <div class="relative w-full">
+        <svg
+          ref={svgRef}
+          class="block w-full overflow-visible"
+          viewBox={`0 0 ${VIEW_W} ${height()}`}
+          preserveAspectRatio="none"
+          height={height()}
+          role="img"
+          aria-label={ariaLabel()}
+          onPointerMove={props.showTooltip ? handlePointerMove : undefined}
+          onPointerLeave={props.showTooltip ? handlePointerLeave : undefined}
+        >
+          <For each={props.series}>
+            {(s, i) => {
+              const points = () => seriesPoints()[i()]
+              const tone = () => toneFor(s, i())
+              const polylinePoints = () =>
+                points()
+                  .map((p) => `${p.x},${p.y}`)
+                  .join(' ')
+              return (
+                <>
+                  <Show when={s.area}>
+                    <path d={areaPath(points())} fill={toneColorAlpha(tone(), 0.15)} stroke="none" />
+                  </Show>
+                  <polyline
+                    points={polylinePoints()}
+                    fill="none"
+                    stroke={toneColor(tone())}
+                    stroke-width={2}
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    vector-effect="non-scaling-stroke"
+                  />
+                  <Show when={props.showDots}>
+                    <For each={points()}>
+                      {(p) => (
+                        <circle
+                          cx={p.x}
+                          cy={p.y}
+                          r={2.5}
+                          fill={toneColor(tone())}
+                          vector-effect="non-scaling-stroke"
+                        />
+                      )}
+                    </For>
+                  </Show>
+                </>
+              )
+            }}
+          </For>
+
+          <Show when={props.showTooltip && hoverIndex() !== null}>
+            <line
+              x1={xFor(hoverIndex() ?? 0, count())}
+              x2={xFor(hoverIndex() ?? 0, count())}
+              y1={0}
+              y2={height()}
+              stroke="hsl(var(--border))"
+              stroke-width={1}
+              vector-effect="non-scaling-stroke"
+            />
+          </Show>
+        </svg>
+
+        <Show when={props.showTooltip && hoverIndex() !== null}>
+          <div
+            class="pointer-events-none absolute top-0 z-10 -translate-y-1 rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md"
+            style={{
+              left: `${((hoverIndex() ?? 0) / Math.max(count() - 1, 1)) * 100}%`,
+              transform: `translateX(${
+                (hoverIndex() ?? 0) / Math.max(count() - 1, 1) > 0.8 ? '-100%' : '-8px'
+              }) translateY(-100%)`,
+            }}
+          >
+            <Show when={props.labels?.[hoverIndex() ?? -1]}>
+              <div class="mb-0.5 font-medium text-foreground">{props.labels?.[hoverIndex() ?? -1]}</div>
+            </Show>
+            <For each={props.series}>
+              {(s, i) => (
+                <Show when={s.data[hoverIndex() ?? -1] !== undefined}>
+                  <div class="flex items-center gap-1.5">
+                    <span
+                      class="inline-block size-1.5 rounded-full"
+                      style={{ 'background-color': toneColor(toneFor(s, i())) }}
+                    />
+                    <span>{s.name ?? `Series ${i() + 1}`}:</span>
+                    <span class="font-medium text-foreground">{s.data[hoverIndex() ?? -1]}</span>
+                  </div>
+                </Show>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+
+      <Show when={props.labels && props.labels.length > 0}>
+        <div class="mt-1 flex w-full text-xs text-muted-foreground">
+          <For each={props.labels}>{(label) => <span class="flex-1 truncate text-center">{label}</span>}</For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/charts/RadarChart.tsx

@@ -0,0 +1,215 @@
+// RadarChart — a native SVG spider/radar chart (no charting library). Axes
+// are laid out clockwise starting at 12 o'clock, one spoke per dimension.
+// A faint concentric polygon grid marks reference levels, and each series is
+// drawn as a translucent-filled polygon connecting its normalized values.
+// Colors come from theme tokens, either per-series `tone` or, when omitted,
+// cycled across `--primary` / `--accent` by index.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface RadarSeries {
+  name?: string
+  tone?: 'primary' | 'accent'
+  values: number[]
+}
+
+export interface RadarChartProps {
+  axes: string[]
+  series: RadarSeries[]
+  /** Value that reaches the outer edge of the grid. Default: max across all series. */
+  max?: number
+  /** Overall SVG width/height in px (square). Default 240. */
+  size?: number
+  class?: string
+}
+
+// Explicit tone -> CSS custom property name.
+const TONE_TOKENS: Record<'primary' | 'accent', string> = {
+  primary: '--primary',
+  accent: '--accent',
+}
+
+// Fallback rotation used when a series has no explicit `tone`.
+const CYCLE_TOKENS = ['--primary', '--accent'] as const
+
+/** Resolve the CSS custom property a series should stroke/fill with. */
+function tokenFor(series: RadarSeries, index: number): string {
+  if (series.tone) return TONE_TOKENS[series.tone]
+  return CYCLE_TOKENS[index % CYCLE_TOKENS.length]
+}
+
+const RING_LEVELS = 4
+const LABEL_OFFSET = 14
+// Extra viewBox margin (all sides) so axis-label text isn't clipped.
+const LABEL_PAD = 34
+
+/** Angle (in degrees) of axis `index` of `count`, starting at 12 o'clock and running clockwise. */
+function axisAngle(index: number, count: number): number {
+  return -90 + (360 / count) * index
+}
+
+/** Convert a polar coordinate (center + radius + angle in degrees) to cartesian `{ x, y }`. */
+function polarToPoint(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {
+  const rad = (angleDeg * Math.PI) / 180
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
+}
+
+/** Build the `x,y ...` points attribute for a polygon at `radius` across all axes. */
+function ringPoints(cx: number, cy: number, radius: number, axisCount: number): string {
+  return Array.from({ length: axisCount }, (_, i) => {
+    const p = polarToPoint(cx, cy, radius, axisAngle(i, axisCount))
+    return `${p.x},${p.y}`
+  }).join(' ')
+}
+
+/** Text anchor for a label sitting outside the vertex at `angleDeg`. */
+function labelAnchor(angleDeg: number): 'start' | 'middle' | 'end' {
+  const cos = Math.cos((angleDeg * Math.PI) / 180)
+  if (cos > 0.1) return 'start'
+  if (cos < -0.1) return 'end'
+  return 'middle'
+}
+
+/** Dominant baseline for a label sitting outside the vertex at `angleDeg`. */
+function labelBaseline(angleDeg: number): 'auto' | 'hanging' | 'middle' {
+  const sin = Math.sin((angleDeg * Math.PI) / 180)
+  if (sin < -0.3) return 'auto'
+  if (sin > 0.3) return 'hanging'
+  return 'middle'
+}
+
+/**
+ * SVG spider/radar chart: a concentric polygon grid with one spoke per axis,
+ * and one translucent-filled polygon per series connecting its values
+ * (normalized by `max`, default the max value across all series). Series
+ * colors come from each datum's `tone`, or cycle through `primary`/`accent`
+ * by index when omitted. Shows a small legend when 2+ series have a `name`.
+ *
+ * @example
+ * ```tsx
+ * <RadarChart
+ *   axes={['Speed', 'Power', 'Range', 'Defense', 'Utility']}
+ *   series={[
+ *     { name: 'Model A', tone: 'primary', values: [80, 60, 90, 40, 70] },
+ *     { name: 'Model B', tone: 'accent', values: [50, 85, 60, 75, 55] },
+ *   ]}
+ * />
+ * ```
+ */
+export function RadarChart(props: RadarChartProps): JSX.Element {
+  const size = () => props.size ?? 240
+  const center = () => size() / 2
+  const outerRadius = () => Math.max(size() / 2 - LABEL_OFFSET * 2, 0)
+  const axisCount = () => props.axes.length
+  const max = () => props.max ?? Math.max(1, ...props.series.flatMap((s) => s.values))
+
+  const rings = () =>
+    Array.from({ length: RING_LEVELS }, (_, i) => {
+      const level = i + 1
+      return ringPoints(center(), center(), outerRadius() * (level / RING_LEVELS), axisCount())
+    })
+
+  const spokes = () =>
+    props.axes.map((_, i) => polarToPoint(center(), center(), outerRadius(), axisAngle(i, axisCount())))
+
+  const labels = () =>
+    props.axes.map((label, i) => {
+      const angle = axisAngle(i, axisCount())
+      const point = polarToPoint(center(), center(), outerRadius() + LABEL_OFFSET, angle)
+      return { label, x: point.x, y: point.y, anchor: labelAnchor(angle), baseline: labelBaseline(angle) }
+    })
+
+  const seriesPolygons = () => {
+    const grandMax = max()
+    return props.series.map((series, index) => {
+      const points = series.values
+        .map((value, i) => {
+          const fraction = grandMax > 0 ? Math.max(value, 0) / grandMax : 0
+          const p = polarToPoint(center(), center(), outerRadius() * fraction, axisAngle(i, axisCount()))
+          return `${p.x},${p.y}`
+        })
+        .join(' ')
+      return { series, index, points, token: tokenFor(series, index) }
+    })
+  }
+
+  const namedSeries = () => props.series.filter((s) => s.name)
+  const showLegend = () => namedSeries().length >= 2
+
+  return (
+    <div class={cn('inline-flex flex-col items-center gap-2', props.class)}>
+      <svg
+        width={size()}
+        height={size()}
+        // Pad the coordinate space so axis-label text near the left/right
+        // vertices isn't clipped by the viewBox edge (the plot scales down a
+        // touch to fit; the CSS footprint stays `size`).
+        viewBox={`${-LABEL_PAD} ${-LABEL_PAD} ${size() + LABEL_PAD * 2} ${size() + LABEL_PAD * 2}`}
+        role="img"
+        aria-label={`Radar chart comparing ${props.series.length} series across ${axisCount()} axes: ${props.axes.join(', ')}`}
+      >
+        <For each={rings()}>
+          {(points) => <polygon points={points} fill="none" stroke="hsl(var(--border))" stroke-width={1} />}
+        </For>
+        <For each={spokes()}>
+          {(point) => (
+            <line
+              x1={center()}
+              y1={center()}
+              x2={point.x}
+              y2={point.y}
+              stroke="hsl(var(--border))"
+              stroke-width={1}
+            />
+          )}
+        </For>
+        <For each={seriesPolygons()}>
+          {({ series, points, token }) => (
+            <polygon
+              points={points}
+              fill={`hsl(var(${token}) / 0.15)`}
+              stroke={`hsl(var(${token}))`}
+              stroke-width={2}
+              stroke-linejoin="round"
+            >
+              <Show when={series.name}>
+                <title>{series.name}</title>
+              </Show>
+            </polygon>
+          )}
+        </For>
+        <For each={labels()}>
+          {(item) => (
+            <text
+              x={item.x}
+              y={item.y}
+              text-anchor={item.anchor}
+              dominant-baseline={item.baseline}
+              class="text-xs fill-muted-foreground"
+            >
+              {item.label}
+            </text>
+          )}
+        </For>
+      </svg>
+      <Show when={showLegend()}>
+        <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+          <For each={seriesPolygons()}>
+            {({ series, token }) => (
+              <Show when={series.name}>
+                <span class="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <span
+                    class="inline-block size-2 rounded-full"
+                    style={{ 'background-color': `hsl(var(${token}))` }}
+                  />
+                  {series.name}
+                </span>
+              </Show>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/charts/index.ts

@@ -3,3 +3,6 @@
 export { Sparkline, type SparklineProps } from './Sparkline'
 export { BarChart, type BarDatum, type BarChartProps } from './BarChart'
 export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart'
+export { LineChart, type LineSeries, type LineChartProps } from './LineChart'
+export { GaugeChart, type GaugeThreshold, type GaugeChartProps } from './GaugeChart'
+export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart'

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.31.0'
+export const A4UI_VERSION = '0.32.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -179,6 +179,13 @@ export { FocusBlurGroup, type FocusBlurGroupProps } from './ui/FocusBlurGroup'
 export { CardSpread, type CardSpreadProps, type CardSpreadLayout } from './ui/CardSpread'
 export { Carousel3D, type Carousel3DProps, type Carousel3DVariant } from './ui/Carousel3D'
 export { TimeMachineStack, type TimeMachineStackProps } from './ui/TimeMachineStack'
+
+// Spatial "wow" primitives (bento, dock, beams, meteors).
+export { BentoGrid, BentoCard, type BentoGridProps, type BentoCardProps } from './ui/BentoGrid'
+export { Dock, type DockItem, type DockProps } from './ui/Dock'
+export { AnimatedBeam, type AnimatedBeamProps } from './ui/AnimatedBeam'
+export { BorderBeam, type BorderBeamProps } from './ui/BorderBeam'
+export { Meteors, type MeteorsProps } from './ui/Meteors'
 export {
   CopyButton,
   type CopyButtonProps,

package/src/ui/AnimatedBeam.tsx

@@ -0,0 +1,187 @@
+// AnimatedBeam — an absolutely-positioned SVG overlay that draws a curved
+// line between two elements (`fromRef` → `toRef`) inside a positioned
+// `containerRef`, with a faint static stroke under a traveling
+// primary→accent gradient segment that loops along the path. Path geometry
+// is recomputed on mount, on window resize, and via a ResizeObserver on the
+// container. No travel (static stroke only) under reduced motion.
+import { createEffect, createSignal, createUniqueId, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+export interface AnimatedBeamProps {
+  containerRef: HTMLElement | undefined
+  fromRef: HTMLElement | undefined
+  toRef: HTMLElement | undefined
+  /** Px the curve bows away from a straight line. @default 0 (straight) */
+  curvature?: number
+  /** Travel from `toRef` to `fromRef` instead of the default direction. */
+  reverse?: boolean
+  /** Seconds for one travel of the gradient segment. @default 3 */
+  duration?: number
+  class?: string
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+/**
+ * Renders an animated SVG "beam" connecting two elements: a faint static
+ * base stroke under a traveling gradient segment that loops from `fromRef`
+ * to `toRef` (or the reverse, with `reverse`). Absolutely positioned over
+ * `containerRef`, whose bounds establish the coordinate space both
+ * endpoints are measured against. Static (no travel) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * let container: HTMLDivElement | undefined
+ * let fromEl: HTMLDivElement | undefined
+ * let toEl: HTMLDivElement | undefined
+ *
+ * <div ref={container} class="relative flex items-center justify-between p-8">
+ *   <div ref={fromEl} class="size-10 rounded-full bg-card" />
+ *   <div ref={toEl} class="size-10 rounded-full bg-card" />
+ *   <AnimatedBeam containerRef={container} fromRef={fromEl} toRef={toEl} curvature={40} />
+ * </div>
+ * ```
+ */
+export function AnimatedBeam(props: AnimatedBeamProps): JSX.Element {
+  const [pathD, setPathD] = createSignal('')
+  const [size, setSize] = createSignal({ w: 0, h: 0 })
+  const gradientId = `beam-gradient-${createUniqueId()}`
+
+  let gradientEl: SVGLinearGradientElement | undefined
+  let start: Point = { x: 0, y: 0 }
+  let end: Point = { x: 0, y: 0 }
+  let control: Point = { x: 0, y: 0 }
+
+  const recompute = (): void => {
+    const container = props.containerRef
+    const from = props.fromRef
+    const to = props.toRef
+    if (!container || !from || !to) return
+
+    const containerRect = container.getBoundingClientRect()
+    const fromRect = from.getBoundingClientRect()
+    const toRect = to.getBoundingClientRect()
+
+    start = {
+      x: fromRect.left - containerRect.left + fromRect.width / 2,
+      y: fromRect.top - containerRect.top + fromRect.height / 2,
+    }
+    end = {
+      x: toRect.left - containerRect.left + toRect.width / 2,
+      y: toRect.top - containerRect.top + toRect.height / 2,
+    }
+
+    const curvature = props.curvature ?? 0
+    const mx = (start.x + end.x) / 2
+    const my = (start.y + end.y) / 2
+    const dx = end.x - start.x
+    const dy = end.y - start.y
+    const length = Math.hypot(dx, dy) || 1
+    control = {
+      x: mx + (-dy / length) * curvature,
+      y: my + (dx / length) * curvature,
+    }
+
+    setSize({ w: containerRect.width, h: containerRect.height })
+    setPathD(`M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`)
+  }
+
+  /** Point at parameter `t` (0..1) along the quadratic curve. */
+  const pointAt = (t: number): Point => {
+    const it = 1 - t
+    return {
+      x: it * it * start.x + 2 * it * t * control.x + t * t * end.x,
+      y: it * it * start.y + 2 * it * t * control.y + t * t * end.y,
+    }
+  }
+
+  createEffect(() => {
+    // Track the refs reactively — recompute picks up the initial mount and
+    // any later change (e.g. a ref that resolves after this beam mounts).
+    void props.containerRef
+    void props.fromRef
+    void props.toRef
+    recompute()
+  })
+
+  onMount(() => {
+    const handleResize = (): void => recompute()
+    window.addEventListener('resize', handleResize)
+
+    let resizeObserver: ResizeObserver | undefined
+    if (props.containerRef && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => recompute())
+      resizeObserver.observe(props.containerRef)
+    }
+
+    let controls: ReturnType<typeof animate> | undefined
+    if (!motionReduced()) {
+      const segment = 0.2
+      controls = animate(0, 1, {
+        duration: props.duration ?? 3,
+        repeat: Infinity,
+        ease: 'linear',
+        onUpdate: (p: number) => {
+          const t = props.reverse ? 1 - p : p
+          const lead = props.reverse ? Math.min(1, t + segment) : t
+          const trail = props.reverse ? t : Math.max(0, t - segment)
+          const from = pointAt(trail)
+          const to = pointAt(lead)
+          gradientEl?.setAttribute('x1', String(from.x))
+          gradientEl?.setAttribute('y1', String(from.y))
+          gradientEl?.setAttribute('x2', String(to.x))
+          gradientEl?.setAttribute('y2', String(to.y))
+        },
+      })
+    }
+
+    onCleanup(() => {
+      window.removeEventListener('resize', handleResize)
+      resizeObserver?.disconnect()
+      controls?.stop()
+    })
+  })
+
+  return (
+    <svg
+      aria-hidden="true"
+      class={cn('pointer-events-none absolute inset-0', props.class)}
+      width={size().w}
+      height={size().h}
+      viewBox={`0 0 ${size().w} ${size().h}`}
+      fill="none"
+    >
+      <path d={pathD()} stroke="hsl(var(--border))" stroke-width="2" stroke-opacity="0.4" fill="none" />
+      {!motionReduced() && (
+        <>
+          <defs>
+            <linearGradient
+              ref={(el) => {
+                gradientEl = el
+              }}
+              id={gradientId}
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stop-color="hsl(var(--primary))" stop-opacity="0" />
+              <stop offset="50%" stop-color="hsl(var(--primary))" />
+              <stop offset="50%" stop-color="hsl(var(--accent))" />
+              <stop offset="100%" stop-color="hsl(var(--accent))" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path
+            d={pathD()}
+            stroke={`url(#${gradientId})`}
+            stroke-width="2"
+            stroke-linecap="round"
+            fill="none"
+          />
+        </>
+      )}
+    </svg>
+  )
+}