@a4ui/core 0.32.0 → 0.34.0

package/src/ui/Globe.tsx

@@ -0,0 +1,317 @@
+// A dotted 3D globe rendered on a single <canvas> with plain Canvas 2D — no
+// three.js, no WebGL. The sphere's dots come from a Fibonacci sphere
+// (deterministic, evenly distributed — no Math.random so the dot field is
+// stable across renders/SSR hydration). Each frame: rotate every point around
+// the Y axis, project orthographically (drop z), keep only front-facing
+// points (z > 0), and scale alpha/size by depth for a cheap "3D" read.
+// Markers/arcs project through the same pipeline so they stay glued to the
+// sphere as it spins. Colors are read from the live theme tokens via
+// getComputedStyle (canvas can't consume `hsl(var(--x))` directly). Follows
+// SpaceBackground's onMount/onCleanup idiom: bind listeners into a cleanups
+// array, cancel the rAF, tear everything down on unmount.
+import { createEffect, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface GlobeMarker {
+  lat: number
+  lng: number
+  label?: string
+}
+
+export interface GlobeArc {
+  /** [lat, lng] */
+  from: [number, number]
+  /** [lat, lng] */
+  to: [number, number]
+}
+
+export interface GlobeProps {
+  markers?: GlobeMarker[]
+  arcs?: GlobeArc[]
+  /** Canvas size in CSS px (square). @default 400 */
+  size?: number
+  /** Spin automatically. @default true (ignored under reduced motion). */
+  autoRotate?: boolean
+  class?: string
+}
+
+interface Vec3 {
+  x: number
+  y: number
+  z: number
+}
+
+interface Projected {
+  x: number
+  y: number
+  z: number
+  front: boolean
+}
+
+const DOT_COUNT = 900
+const ROTATE_SPEED = 0.12 // rad/s
+const DRAG_SPEED = 0.012 // rad per px of pointer movement
+
+// Fibonacci sphere: evenly-spaced points on a unit sphere, fully deterministic
+// (no RNG) so the dot field is stable across renders and reproducible in tests.
+function fibonacciSphere(count: number): Vec3[] {
+  const points: Vec3[] = []
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5))
+  for (let i = 0; i < count; i++) {
+    const y = 1 - (i / (count - 1)) * 2 // 1..-1
+    const radius = Math.sqrt(Math.max(0, 1 - y * y))
+    const theta = goldenAngle * i
+    points.push({ x: Math.cos(theta) * radius, y, z: Math.sin(theta) * radius })
+  }
+  return points
+}
+
+const SPHERE_POINTS = fibonacciSphere(DOT_COUNT)
+
+function latLngToVec3(lat: number, lng: number): Vec3 {
+  const latRad = (lat * Math.PI) / 180
+  const lngRad = (lng * Math.PI) / 180
+  return {
+    x: Math.cos(latRad) * Math.sin(lngRad),
+    y: Math.sin(latRad),
+    z: Math.cos(latRad) * Math.cos(lngRad),
+  }
+}
+
+// Rotate around the Y axis and project orthographically to a `radius`-sized
+// disc centered at (cx, cy). z stays in [-1, 1] (front-facing when > 0).
+function project(p: Vec3, angle: number, radius: number, cx: number, cy: number): Projected {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const x = p.x * cos + p.z * sin
+  const z = -p.x * sin + p.z * cos
+  const y = p.y
+  return { x: cx + x * radius, y: cy - y * radius, z, front: z > 0 }
+}
+
+function resolveColor(canvas: HTMLCanvasElement, token: string, fallback: string): string {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim()
+  return raw ? `hsl(${raw})` : fallback
+}
+
+/**
+ * A dotted 3D globe drawn on `<canvas>` with plain Canvas 2D (no three.js,
+ * no WebGL): dots come from a deterministic Fibonacci-sphere distribution,
+ * rotate around the Y axis, and project orthographically with depth-scaled
+ * alpha/size. `markers` render as brighter glowing dots (title = label);
+ * `arcs` draw as outward-bulging curves between two front-facing markers,
+ * with a small traveling highlight. Auto-rotates unless `autoRotate={false}`;
+ * drag with the pointer to spin manually. Renders a single static frame
+ * under `motionReduced()` (no auto-rotation; drag still works).
+ *
+ * @example
+ * ```tsx
+ * <Globe
+ *   size={360}
+ *   markers={[
+ *     { lat: 40.7, lng: -74.0, label: 'New York' },
+ *     { lat: 35.7, lng: 139.7, label: 'Tokyo' },
+ *   ]}
+ *   arcs={[{ from: [40.7, -74.0], to: [35.7, 139.7] }]}
+ * />
+ * ```
+ */
+export function Globe(props: GlobeProps): JSX.Element {
+  let canvas!: HTMLCanvasElement
+  const size = () => props.size ?? 400
+
+  onMount(() => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const cleanups: Array<() => void> = []
+    const bind = (
+      target: EventTarget,
+      type: string,
+      handler: EventListener,
+      opts?: AddEventListenerOptions,
+    ) => {
+      target.addEventListener(type, handler, opts)
+      cleanups.push(() => target.removeEventListener(type, handler, opts))
+    }
+
+    let angle = 0
+    let dragging = false
+    let lastX = 0
+    let rafId = 0
+    let lastTs = 0
+    // Screen-space marker positions from the last draw, for hover hit-testing
+    // (cheap: only a handful of markers, refreshed every frame anyway).
+    let markerHits: Array<{ x: number; y: number; label: string }> = []
+
+    const draw = (): void => {
+      const dpr = window.devicePixelRatio || 1
+      const cssSize = size()
+      const radius = cssSize * 0.42
+      const cx = cssSize / 2
+      const cy = cssSize / 2
+
+      if (canvas.width !== cssSize * dpr || canvas.height !== cssSize * dpr) {
+        canvas.width = cssSize * dpr
+        canvas.height = cssSize * dpr
+        canvas.style.width = `${cssSize}px`
+        canvas.style.height = `${cssSize}px`
+      }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, cssSize, cssSize)
+
+      const dotColor = resolveColor(canvas, '--foreground', '210 20% 90%')
+      const markerColor = resolveColor(canvas, '--accent', '200 90% 60%')
+      const arcColor = resolveColor(canvas, '--primary', '250 80% 65%')
+
+      // Base sphere dots, back-to-front isn't needed (no overlap testing) —
+      // just skip anything facing away from the viewer.
+      for (const p of SPHERE_POINTS) {
+        const proj = project(p, angle, radius, cx, cy)
+        if (!proj.front) continue
+        const depth = proj.z // 0..1
+        ctx.beginPath()
+        ctx.fillStyle = dotColor
+        ctx.globalAlpha = 0.15 + depth * 0.55
+        ctx.arc(proj.x, proj.y, 0.6 + depth * 1.2, 0, Math.PI * 2)
+        ctx.fill()
+      }
+      ctx.globalAlpha = 1
+
+      // Arcs: only drawn when both endpoints are currently front-facing.
+      const arcs = props.arcs ?? []
+      for (const arc of arcs) {
+        const from = project(latLngToVec3(arc.from[0], arc.from[1]), angle, radius, cx, cy)
+        const to = project(latLngToVec3(arc.to[0], arc.to[1]), angle, radius, cx, cy)
+        if (!from.front || !to.front) continue
+
+        const mx = (from.x + to.x) / 2
+        const my = (from.y + to.y) / 2
+        // Bulge outward from the sphere center, proportional to the chord length.
+        const dx = mx - cx
+        const dy = my - cy
+        const dist = Math.hypot(dx, dy) || 1
+        const chord = Math.hypot(to.x - from.x, to.y - from.y)
+        const bulge = chord * 0.35
+        const ctrlX = mx + (dx / dist) * bulge
+        const ctrlY = my + (dy / dist) * bulge
+
+        ctx.beginPath()
+        ctx.strokeStyle = arcColor
+        ctx.globalAlpha = 0.55
+        ctx.lineWidth = 1.4
+        ctx.moveTo(from.x, from.y)
+        ctx.quadraticCurveTo(ctrlX, ctrlY, to.x, to.y)
+        ctx.stroke()
+        ctx.globalAlpha = 1
+
+        // Traveling highlight: a bright dot eased along the same quadratic,
+        // looping with the wall clock so it doesn't need its own rAF state.
+        if (!motionReduced()) {
+          const t = (performance.now() / 1600) % 1
+          const it = 1 - t
+          const hx = it * it * from.x + 2 * it * t * ctrlX + t * t * to.x
+          const hy = it * it * from.y + 2 * it * t * ctrlY + t * t * to.y
+          ctx.beginPath()
+          ctx.fillStyle = markerColor
+          ctx.arc(hx, hy, 2.4, 0, Math.PI * 2)
+          ctx.fill()
+        }
+      }
+
+      // Markers: brighter glowing dots, only when front-facing.
+      const markers = props.markers ?? []
+      const hits: typeof markerHits = []
+      for (const marker of markers) {
+        const proj = project(latLngToVec3(marker.lat, marker.lng), angle, radius, cx, cy)
+        if (!proj.front) continue
+        ctx.beginPath()
+        ctx.fillStyle = markerColor
+        ctx.shadowColor = markerColor
+        ctx.shadowBlur = 8
+        ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.shadowBlur = 0
+        if (marker.label) hits.push({ x: proj.x, y: proj.y, label: marker.label })
+      }
+      markerHits = hits
+    }
+
+    const tick = (ts: number): void => {
+      const dt = lastTs ? (ts - lastTs) / 1000 : 0
+      lastTs = ts
+      if (!dragging && !motionReduced() && props.autoRotate !== false) {
+        angle += ROTATE_SPEED * dt
+      }
+      draw()
+      // Keep animating while auto-rotating, or to refresh the traveling arc
+      // highlight — both are no-ops under reduced motion (frozen frame).
+      if (!motionReduced()) rafId = requestAnimationFrame(tick)
+    }
+
+    if (motionReduced()) {
+      draw() // single static frame
+    } else {
+      rafId = requestAnimationFrame(tick)
+    }
+
+    // Pointer drag to spin manually — works even under reduced motion.
+    const onPointerDown = (e: PointerEvent): void => {
+      dragging = true
+      lastX = e.clientX
+      canvas.setPointerCapture(e.pointerId)
+    }
+    const onPointerMove = (e: PointerEvent): void => {
+      if (!dragging) {
+        // Hover hit-test against the last drawn marker positions → native tooltip.
+        const rect = canvas.getBoundingClientRect()
+        const px = e.clientX - rect.left
+        const py = e.clientY - rect.top
+        const hit = markerHits.find((m) => Math.hypot(m.x - px, m.y - py) <= 6)
+        canvas.title = hit?.label ?? ''
+        return
+      }
+      const dx = e.clientX - lastX
+      lastX = e.clientX
+      angle += dx * DRAG_SPEED
+      if (motionReduced()) draw() // rAF loop is off; redraw explicitly per move
+    }
+    const onPointerUp = (e: PointerEvent): void => {
+      dragging = false
+      if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId)
+    }
+    bind(canvas, 'pointerdown', onPointerDown as EventListener)
+    bind(canvas, 'pointermove', onPointerMove as EventListener)
+    bind(canvas, 'pointerup', onPointerUp as EventListener)
+    bind(canvas, 'pointercancel', onPointerUp as EventListener)
+
+    // Re-render (static frame) if props change while reduced motion holds the
+    // loop frozen — otherwise the rAF loop already picks up prop changes.
+    createEffect(() => {
+      // Track reactive deps: size + reference identity of markers/arcs.
+      void size()
+      void props.markers
+      void props.arcs
+      void props.autoRotate
+      if (motionReduced()) draw()
+    })
+
+    onCleanup(() => {
+      if (rafId) cancelAnimationFrame(rafId)
+      cleanups.forEach((fn) => fn())
+    })
+  })
+
+  return (
+    <canvas
+      ref={canvas}
+      class={cn('touch-none rounded-full select-none', props.class)}
+      width={size()}
+      height={size()}
+      role="img"
+      aria-label="Interactive globe"
+    />
+  )
+}

package/src/ui/Kanban.tsx

@@ -0,0 +1,250 @@
+// Kanban board: columns of draggable cards, reorderable within a column and
+// movable across columns. Pointer-events based drag (no HTML5 drag/drop),
+// the same grip-handle + floating-clone idiom as Sortable.tsx, extended to
+// track which column the pointer is currently over so cards can cross
+// container boundaries. No transition/animation is applied to the drag
+// itself (same as Sortable), so there's nothing to gate on reduced motion —
+// drops are instant either way.
+import { createEffect, createSignal, For, Show, type JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { GripVertical } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card } from './Card'
+
+/** A single card on a {@link Kanban} board. */
+export interface KanbanCard {
+  /** Stable unique id (used for drag tracking + list keying). */
+  id: string
+  /** Card body — usually a title/label. */
+  title: JSX.Element
+  /** Optional trailing badge (e.g. priority, assignee initials). */
+  badge?: JSX.Element
+}
+
+/** A column of a {@link Kanban} board. */
+export interface KanbanColumn {
+  /** Stable unique id. */
+  id: string
+  /** Column heading. */
+  title: string
+  /** Cards in the column, top to bottom. */
+  cards: KanbanCard[]
+  /** Optional WIP limit — the count badge switches to a warning tone past it. */
+  limit?: number
+}
+
+export interface KanbanProps {
+  /** Columns, in display order left to right. */
+  columns: KanbanColumn[]
+  /** Called with the full new columns array after any drag (reorder or move). */
+  onChange?: (columns: KanbanColumn[]) => void
+  class?: string
+}
+
+interface Drag {
+  cardId: string
+  card: KanbanCard
+  fromColumnId: string
+  currentColumnId: string
+  y: number
+  x: number
+  offsetY: number
+  offsetX: number
+  height: number
+  width: number
+}
+
+/**
+ * Horizontal Kanban board: glass column panels holding vertical lists of
+ * draggable cards. Drag a card by its grip handle to reorder it within a
+ * column or drop it into another column — a dashed placeholder marks the
+ * drop slot and a floating clone follows the pointer, the same pointer-events
+ * idiom as {@link Sortable} extended to track which column's list the
+ * pointer is currently over. Works controlled (pass `columns` sourced from
+ * your own state + `onChange` to write it back) or uncontrolled (pass
+ * `columns` once and just read the final layout from `onChange`).
+ *
+ * @example
+ * ```tsx
+ * const [columns, setColumns] = createSignal<KanbanColumn[]>([
+ *   { id: 'todo', title: 'To do', cards: [{ id: '1', title: 'Write spec' }] },
+ *   { id: 'doing', title: 'Doing', cards: [], limit: 2 },
+ *   { id: 'done', title: 'Done', cards: [] },
+ * ])
+ * <Kanban columns={columns()} onChange={setColumns} />
+ * ```
+ */
+export function Kanban(props: KanbanProps): JSX.Element {
+  // eslint-disable-next-line solid/reactivity -- seed once; a createEffect below keeps it in sync
+  const [local, setLocal] = createSignal<KanbanColumn[]>(props.columns)
+  const [drag, setDrag] = createSignal<Drag | null>(null)
+  const listRefs: Record<string, HTMLDivElement | undefined> = {}
+
+  createEffect(() => {
+    const next = props.columns
+    if (!drag()) setLocal(next)
+  })
+
+  const moveCard = (cardId: string, targetColumnId: string, targetIndex: number) => {
+    setLocal((cur) => {
+      const next = cur.map((col) => ({ ...col, cards: col.cards.slice() }))
+      const fromCol = next.find((col) => col.cards.some((card) => card.id === cardId))
+      const toCol = next.find((col) => col.id === targetColumnId)
+      if (!fromCol || !toCol) return cur
+      const fromIndex = fromCol.cards.findIndex((card) => card.id === cardId)
+      const [moved] = fromCol.cards.splice(fromIndex, 1)
+      toCol.cards.splice(Math.min(targetIndex, toCol.cards.length), 0, moved)
+      return next
+    })
+  }
+
+  const onDragMove = (e: PointerEvent) => {
+    const d = drag()
+    if (!d) return
+
+    // Which column's list is the pointer over horizontally?
+    let targetColumnId = d.currentColumnId
+    for (const [colId, el] of Object.entries(listRefs)) {
+      if (!el) continue
+      const r = el.getBoundingClientRect()
+      if (e.clientX >= r.left && e.clientX <= r.right) {
+        targetColumnId = colId
+        break
+      }
+    }
+
+    // Where in that column's (other) cards does the pointer sit vertically?
+    const listEl = listRefs[targetColumnId]
+    const rows = listEl
+      ? Array.from(listEl.querySelectorAll<HTMLElement>('[data-kanban-card]')).filter(
+          (row) => row.dataset.kanbanCard !== d.cardId,
+        )
+      : []
+    let targetIndex = rows.length
+    for (let i = 0; i < rows.length; i++) {
+      const r = rows[i].getBoundingClientRect()
+      if (e.clientY < r.top + r.height / 2) {
+        targetIndex = i
+        break
+      }
+    }
+
+    setDrag({ ...d, y: e.clientY, x: e.clientX, currentColumnId: targetColumnId })
+    moveCard(d.cardId, targetColumnId, targetIndex)
+  }
+
+  const onDragStart = (e: PointerEvent, card: KanbanCard, columnId: string) => {
+    e.preventDefault()
+    const row = (e.currentTarget as HTMLElement).closest<HTMLElement>('[data-kanban-card]')
+    if (!row) return
+    const r = row.getBoundingClientRect()
+    setDrag({
+      cardId: card.id,
+      card,
+      fromColumnId: columnId,
+      currentColumnId: columnId,
+      y: e.clientY,
+      x: e.clientX,
+      offsetY: e.clientY - r.top,
+      offsetX: e.clientX - r.left,
+      height: r.height,
+      width: r.width,
+    })
+
+    const move = (ev: PointerEvent) => onDragMove(ev)
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      const had = drag() !== null
+      setDrag(null)
+      if (had) props.onChange?.(local())
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+
+  return (
+    <div class={cn('flex gap-4 overflow-x-auto pb-2', drag() && 'select-none', props.class)}>
+      <For each={local()}>
+        {(column) => {
+          const count = () => column.cards.length
+          const overLimit = () => column.limit !== undefined && count() > column.limit
+          return (
+            <Card glass class="flex w-72 shrink-0 flex-col">
+              <div class="flex items-center justify-between gap-2 border-b border-border p-3">
+                <h3 class="truncate font-semibold text-foreground">{column.title}</h3>
+                <Badge tone={overLimit() ? 'warning' : 'neutral'}>
+                  {column.limit !== undefined ? `${count()}/${column.limit}` : `${count()}`}
+                </Badge>
+              </div>
+              <div
+                ref={(el) => (listRefs[column.id] = el)}
+                class="flex min-h-[60px] flex-1 flex-col gap-2 overflow-y-auto p-3"
+              >
+                <For each={column.cards}>
+                  {(card) => {
+                    const isDragged = () => drag()?.cardId === card.id
+                    return (
+                      <Show
+                        when={!isDragged()}
+                        fallback={
+                          <div
+                            data-kanban-card={card.id}
+                            class="rounded-lg border-2 border-dashed border-primary/40 bg-primary/5"
+                            style={{ height: `${drag()?.height ?? 0}px` }}
+                          />
+                        }
+                      >
+                        <div
+                          data-kanban-card={card.id}
+                          tabIndex={0}
+                          class="flex items-center gap-2 rounded-lg border border-border bg-card p-2 text-card-foreground"
+                        >
+                          <button
+                            type="button"
+                            onPointerDown={(e) => onDragStart(e, card, column.id)}
+                            style={{ 'touch-action': 'none' }}
+                            class="shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
+                            aria-label="Drag to move card"
+                          >
+                            <GripVertical class="h-4 w-4" />
+                          </button>
+                          <div class="min-w-0 flex-1">{card.title}</div>
+                          <Show when={card.badge}>{card.badge}</Show>
+                        </div>
+                      </Show>
+                    )
+                  }}
+                </For>
+              </div>
+            </Card>
+          )
+        }}
+      </For>
+      <Show when={drag()}>
+        {(d) => (
+          <Portal>
+            <div
+              class="fixed flex items-center gap-2 rounded-lg border border-border bg-card p-2 text-card-foreground shadow-2xl"
+              style={{
+                left: `${d().x - d().offsetX}px`,
+                top: `${d().y - d().offsetY}px`,
+                width: `${d().width}px`,
+                'pointer-events': 'none',
+                'z-index': 70,
+              }}
+            >
+              <span class="shrink-0 text-muted-foreground">
+                <GripVertical class="h-4 w-4" />
+              </span>
+              <div class="min-w-0 flex-1">{d().card.title}</div>
+              <Show when={d().card.badge}>{d().card.badge}</Show>
+            </div>
+          </Portal>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/ui/Lamp.tsx

@@ -0,0 +1,88 @@
+// Lamp — a hero/section backdrop: a spotlight beam fanning down from the top
+// center (two symmetric blurred gradient cones + a bright thin line), with
+// `children` sitting in the illuminated area below. Same "self-contained
+// backdrop" idiom as Aurora/SpaceBackground (dark base, token-tinted glow,
+// motionReduced()-aware), just scoped to one hero/section instead of the
+// whole page.
+import { onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+export interface LampProps {
+  children?: JSX.Element
+  class?: string
+}
+
+/**
+ * Hero/section backdrop: a spotlight beam fanning down from the top center —
+ * two symmetric blurred gradient cones (`--primary` / `--accent`) plus a
+ * bright thin source line — over a dark base, with `children` centered in
+ * the illuminated area below. Grows/brightens in on mount via Motion
+ * (opacity + scale); static under {@link motionReduced}. Self-contained
+ * (`relative overflow-hidden`); size it with `class` (e.g. `min-h-[28rem]`).
+ *
+ * @example
+ * ```tsx
+ * <Lamp class="min-h-[28rem]">
+ *   <h1 class="text-4xl font-semibold text-foreground">Build in the light</h1>
+ *   <p class="mt-4 text-muted-foreground">A hero backdrop with a spotlight glow.</p>
+ * </Lamp>
+ * ```
+ */
+export function Lamp(props: LampProps): JSX.Element {
+  let beamEl: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (motionReduced() || !beamEl) return
+    animate(beamEl, { opacity: [0, 1], scale: [0.85, 1] }, { duration: 0.9, ease: 'easeOut' })
+  })
+
+  return (
+    <div
+      class={cn(
+        'relative flex min-h-[24rem] w-full flex-col items-center overflow-hidden bg-background',
+        props.class,
+      )}
+    >
+      <div
+        ref={beamEl}
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0"
+        style={motionReduced() ? undefined : { opacity: 0, 'transform-origin': 'top center' }}
+      >
+        {/* Left cone: apex at top-center, fanning down-left. */}
+        <div
+          class="absolute left-1/2 top-0 h-72 w-72 -translate-x-full blur-2xl"
+          style={{
+            background: 'linear-gradient(115deg, hsl(var(--primary) / 0.75), transparent 70%)',
+            'clip-path': 'polygon(100% 0%, 0% 100%, 100% 100%)',
+          }}
+        />
+        {/* Right cone: mirror of the left, same apex. */}
+        <div
+          class="absolute left-1/2 top-0 h-72 w-72 blur-2xl"
+          style={{
+            background: 'linear-gradient(245deg, hsl(var(--accent) / 0.75), transparent 70%)',
+            'clip-path': 'polygon(0% 0%, 100% 100%, 0% 100%)',
+          }}
+        />
+        {/* Bright thin line at the beam's source. */}
+        <div
+          class="absolute left-1/2 top-0 h-px w-64 -translate-x-1/2 blur-[1px]"
+          style={{ background: 'hsl(var(--primary))' }}
+        />
+        {/* Soft bloom under the line, grounding the beam. */}
+        <div
+          class="absolute left-1/2 top-0 h-40 w-80 -translate-x-1/2 blur-2xl"
+          style={{
+            background: 'radial-gradient(ellipse at top, hsl(var(--primary) / 0.5), transparent 70%)',
+          }}
+        />
+      </div>
+      <div class="relative z-10 flex flex-1 flex-col items-center justify-center px-4 py-16 text-center">
+        {props.children}
+      </div>
+    </div>
+  )
+}