@a4ui/core 0.11.1 → 0.12.0

package/src/layout/SpaceBackground.tsx

@@ -0,0 +1,459 @@
+// The "space glass" backdrop: a fixed layer (z-0) behind all content. Stars are
+// generated individually with random position / size / brightness / bloom (no
+// tiled pattern, no clutter), a subset twinkles, and shooting stars cross
+// occasionally. The nebula/aurora/planets are static (cheap). No pointer
+// parallax — moving the whole field behind the frosted-glass cards forced a
+// per-frame re-blur that felt laggy. All motion is skipped under motionReduced()
+// (CSS honours the same via the html:not(.force-motion) reduced-motion guard).
+import { createEffect, onCleanup, onMount } from 'solid-js'
+import { Satellite } from 'lucide-solid'
+
+import { motionReduced } from '../lib/motion'
+import { useTheme } from '../lib/theme'
+import { bindPointerFx } from './sceneEffects'
+
+const SHOOTER_DIRS = [
+  { angle: 22, x: [0, 32], y: [-6, 18] },
+  { angle: -24, x: [0, 32], y: [55, 82] },
+  { angle: 158, x: [62, 96], y: [-6, 22] },
+  { angle: 202, x: [62, 96], y: [52, 80] },
+]
+
+// Star tints per theme. Dark sky → light stars; light sky → darker warm/cool
+// specks (white stars would vanish on a near-white background).
+const DARK_TINTS = ['255,255,255', '180,210,255', '255,228,170', '210,185,255', '165,230,255']
+const LIGHT_TINTS = ['198,146,28', '176,120,18', '214,162,46', '160,110,28', '190,134,34'] // golden, for the light sky
+
+// Custom vector rocket (nose points up in the viewBox) with a flickering exhaust
+// flame trail — used in the light theme; rotated to the travel direction at launch.
+const ROCKET_SVG = `<svg viewBox="0 0 24 82" width="100%" height="100%" style="display:block;overflow:visible">
+  <g class="rk-flame">
+    <path d="M8.5 31 C 8 50, 11 70, 12 80 C 13 70, 16 50, 15.5 31 Z" fill="#ff6a00" opacity="0.8"/>
+    <path d="M9.6 31 C 9.4 47, 11.2 60, 12 70 C 12.8 60, 14.6 47, 14.4 31 Z" fill="#ffb020" opacity="0.95"/>
+    <path d="M10.6 31 C 10.6 43, 11.6 52, 12 60 C 12.4 52, 13.4 43, 13.4 31 Z" fill="#fff2b0"/>
+  </g>
+  <path d="M12 2 C 16 8, 16 20, 15 32 L 9 32 C 8 20, 8 8, 12 2 Z" fill="#e6edf7"/>
+  <path d="M12 2 C 15 8, 15 13, 14.6 15 L 9.4 15 C 9 13, 9 8, 12 2 Z" fill="#ef5a3a"/>
+  <path d="M9 26 L 4.6 34 L 9 31 Z" fill="#ef5a3a"/>
+  <path d="M15 26 L 19.4 34 L 15 31 Z" fill="#ef5a3a"/>
+  <circle cx="12" cy="19" r="2.3" fill="#8fd0ff" stroke="#2f6aa8" stroke-width="1"/>
+</svg>`
+const STAR_COUNT = 66
+const STAR_TRAVELERS = 7 // stars that visibly glide across, satellite-style
+
+function buildStars(tints: string[]): string {
+  const rnd = Math.random
+  const pick = () => tints[Math.floor(rnd() * tints.length)]
+  let html = ''
+  // Static + twinkling field.
+  for (let i = 0; i < STAR_COUNT; i++) {
+    const bright = rnd() < 0.12 // larger/brighter "hero" stars
+    const size = bright ? 3 + rnd() * 1.8 : 1.2 + rnd() * 1.8
+    const op = bright ? 0.85 + rnd() * 0.15 : 0.3 + rnd() * 0.55
+    const bloom = bright ? 6 + rnd() * 8 : 1.5 + rnd() * 4
+    const c = pick()
+    const motion =
+      rnd() < 0.4
+        ? `animation:twinkle ${(2.6 + rnd() * 3.5).toFixed(1)}s ease-in-out ${(rnd() * 4).toFixed(1)}s infinite;`
+        : ''
+    html +=
+      `<span style="position:absolute;left:${(rnd() * 100).toFixed(2)}%;top:${(rnd() * 100).toFixed(2)}%;` +
+      `width:${size.toFixed(1)}px;height:${size.toFixed(1)}px;border-radius:50%;` +
+      `background:rgba(${c},${op.toFixed(2)});box-shadow:0 0 ${bloom.toFixed(1)}px rgba(${c},${(op * 0.8).toFixed(2)});${motion}"></span>`
+  }
+
+  // A few "traveling" stars that visibly glide across the screen, like the
+  // satellite: each is one small element moving via its own linear transform
+  // (cheap). Starts off one edge and ends off the other, so the loop reset
+  // happens off-screen (no jump). Negative delay spreads them out immediately.
+  for (let i = 0; i < STAR_TRAVELERS; i++) {
+    const c = pick()
+    const size = (1.8 + rnd() * 1.8).toFixed(1)
+    const op = (0.7 + rnd() * 0.3).toFixed(2)
+    const bloom = (4 + rnd() * 6).toFixed(1)
+    const top = (4 + rnd() * 86).toFixed(1)
+    const rtl = rnd() < 0.5
+    const startLeft = rtl ? '106%' : '-6%'
+    const dx = rtl ? '-118vw' : '118vw'
+    const dy = `${((rnd() * 2 - 1) * 16).toFixed(1)}vh`
+    const dur = 34 + rnd() * 34 // gentle glide across the viewport
+    const delay = (-rnd() * dur).toFixed(1)
+    html +=
+      `<span style="position:absolute;left:${startLeft};top:${top}%;` +
+      `width:${size}px;height:${size}px;border-radius:50%;` +
+      `background:rgba(${c},${op});box-shadow:0 0 ${bloom}px rgba(${c},${(Number(op) * 0.8).toFixed(2)});` +
+      `--dx:${dx};--dy:${dy};animation:starDrift ${dur.toFixed(1)}s linear ${delay}s infinite;"></span>`
+  }
+  return html
+}
+
+/**
+ * The "space glass" backdrop: a fixed, `aria-hidden` layer (z-0) meant to sit
+ * behind all page content (this is {@link AppShell}'s default `background`).
+ * Renders a randomized starfield (with twinkle + occasional shooting stars,
+ * or rockets in light theme), static nebula/planets, gyroscope parallax on
+ * phones, and cursor-glow/magnetic-button effects. Takes no props; reacts to
+ * {@link useTheme} for star tints and to `motionReduced()` to skip all motion.
+ *
+ * @example
+ * ```tsx
+ * <SpaceBackground />
+ * ```
+ */
+export function SpaceBackground() {
+  let root!: HTMLDivElement
+  let starfieldEl!: HTMLDivElement
+  const theme = useTheme()
+
+  // (Re)generate the starfield with theme-appropriate colours — on mount and
+  // whenever the theme flips (white stars would be invisible on the light sky).
+  createEffect(() => {
+    const tints = theme() === 'light' ? LIGHT_TINTS : DARK_TINTS
+    if (starfieldEl) starfieldEl.innerHTML = buildStars(tints)
+  })
+
+  onMount(() => {
+    const cleanups: Array<() => void> = []
+    const timers: number[] = []
+    const bind = (
+      target: EventTarget,
+      type: string,
+      handler: EventListener,
+      opts?: AddEventListenerOptions,
+    ) => {
+      target.addEventListener(type, handler, opts)
+      cleanups.push(() => target.removeEventListener(type, handler, opts))
+    }
+
+    // --- Gyroscope parallax (phones): tilt the device → the starfield and
+    // constellations shift by depth. rAF-throttled, subtle (±16px), skipped
+    // under motionReduced(). iOS 13+ needs a one-time gesture to grant motion.
+    let gpRaf = 0
+    let gpX = 0
+    let gpY = 0
+    const applyParallax = (): void => {
+      gpRaf = 0
+      if (starfieldEl)
+        starfieldEl.style.transform = `translate3d(${gpX.toFixed(1)}px, ${gpY.toFixed(1)}px, 0)`
+      root.querySelectorAll<HTMLElement>('.constellation').forEach((el) => {
+        el.style.transform = `translate3d(${(gpX * 1.8).toFixed(1)}px, ${(gpY * 1.8).toFixed(1)}px, 0)`
+      })
+    }
+    // Calibrate to the first reading so it works at any holding angle (an iPad
+    // is held much flatter than a phone) — parallax is relative to that.
+    let baseG: number | null = null
+    let baseB: number | null = null
+    const onOrient = (e: DeviceOrientationEvent): void => {
+      if (motionReduced()) return
+      if (e.gamma == null || e.beta == null) return
+      if (baseG === null) {
+        baseG = e.gamma
+        baseB = e.beta
+      }
+      const g = Math.max(-25, Math.min(25, e.gamma - baseG)) // left-right, from baseline
+      const b = Math.max(-25, Math.min(25, e.beta - (baseB ?? 0))) // front-back, from baseline
+      gpX = (g / 25) * 16
+      gpY = (b / 25) * 16
+      if (!gpRaf) gpRaf = requestAnimationFrame(applyParallax)
+    }
+    const DOE = (
+      window as unknown as { DeviceOrientationEvent?: { requestPermission?: () => Promise<string> } }
+    ).DeviceOrientationEvent
+    if (DOE) {
+      if (typeof DOE.requestPermission === 'function') {
+        // iOS / iPadOS 13+: motion access needs Safari's "Motion & Orientation
+        // Access" enabled AND a user gesture. Ask on the first tap (click is the
+        // most reliable activation), and stop asking once granted.
+        let granted = false
+        const ask = (): void => {
+          if (granted) return
+          DOE.requestPermission?.()
+            .then((s) => {
+              if (s === 'granted') {
+                granted = true
+                bind(window, 'deviceorientation', onOrient as EventListener)
+              }
+            })
+            .catch(() => {})
+        }
+        bind(window, 'click', ask as EventListener)
+        bind(window, 'touchend', ask as EventListener)
+      } else {
+        bind(window, 'deviceorientation', onOrient as EventListener)
+      }
+    }
+    cleanups.push(() => {
+      if (gpRaf) cancelAnimationFrame(gpRaf)
+    })
+
+    // Launch a shooting star from (leftCss, topCss) at `angle`, with the given
+    // length/travel/duration. fill:forwards holds the final (invisible) frame so
+    // it can't flash back to its base style at the start position when it ends.
+    const launchShooter = (
+      leftCss: string,
+      topCss: string,
+      angle: number,
+      len: number,
+      dist: number,
+      dur: number,
+    ): void => {
+      const el = document.createElement('div')
+      el.className = 'shooter'
+      el.style.width = `${len}px`
+      el.style.left = leftCss
+      el.style.top = topCss
+      root.appendChild(el)
+      const anim = el.animate(
+        [
+          { opacity: 0, transform: `rotate(${angle}deg) translateX(0px) scaleX(.4)` },
+          {
+            opacity: 1,
+            transform: `rotate(${angle}deg) translateX(${dist * 0.35}px) scaleX(1)`,
+            offset: 0.5,
+          },
+          { opacity: 0, transform: `rotate(${angle}deg) translateX(${dist}px) scaleX(1)` },
+        ],
+        { duration: dur, easing: 'cubic-bezier(.3,0,.15,1)', fill: 'forwards' },
+      )
+      anim.onfinish = () => el.remove()
+      timers.push(window.setTimeout(() => el.remove(), dur + 250)) // safety net for cleanup
+    }
+
+    // A rocket 🚀 that flies off toward `angle` (used in the light theme instead
+    // of shooting stars). The emoji nose points up-right, so rotate by angle+45.
+    const launchRocket = (
+      leftCss: string,
+      topCss: string,
+      angle: number,
+      size: number,
+      dist: number,
+      dur: number,
+    ): void => {
+      const el = document.createElement('div')
+      const h = size * (82 / 24)
+      el.style.cssText = `position:absolute;left:${leftCss};top:${topCss};width:${size.toFixed(0)}px;height:${h.toFixed(0)}px;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,170,80,.55));`
+      el.innerHTML = ROCKET_SVG
+      root.appendChild(el)
+      const rad = (angle * Math.PI) / 180
+      const ex = Math.cos(rad) * dist
+      const ey = Math.sin(rad) * dist
+      const rot = angle + 90 // SVG nose points up (-90°)
+      const anim = el.animate(
+        [
+          { opacity: 0, transform: `translate(0px,0px) rotate(${rot}deg) scale(.5)` },
+          {
+            opacity: 1,
+            transform: `translate(${(ex * 0.12).toFixed(0)}px,${(ey * 0.12).toFixed(0)}px) rotate(${rot}deg) scale(1)`,
+            offset: 0.14,
+          },
+          {
+            opacity: 1,
+            transform: `translate(${(ex * 0.82).toFixed(0)}px,${(ey * 0.82).toFixed(0)}px) rotate(${rot}deg) scale(1)`,
+            offset: 0.82,
+          },
+          {
+            opacity: 0,
+            transform: `translate(${ex.toFixed(0)}px,${ey.toFixed(0)}px) rotate(${rot}deg) scale(.85)`,
+          },
+        ],
+        { duration: dur, easing: 'cubic-bezier(.25,0,.2,1)', fill: 'forwards' },
+      )
+      anim.onfinish = () => el.remove()
+      timers.push(window.setTimeout(() => el.remove(), dur + 250))
+    }
+
+    // Click on empty background → a shooting star (dark) or a rocket (light) from
+    // the click point. Deliberate action, so it runs even under reduced motion;
+    // ignore clicks on interactive UI.
+    const INTERACTIVE =
+      'a, button, input, select, textarea, label, [role="button"], [role="tab"], [role="menuitem"], [role="dialog"], [contenteditable]'
+    bind(document, 'click', ((e: MouseEvent) => {
+      if ((e.target as Element | null)?.closest?.(INTERACTIVE)) return
+      if (theme() === 'light') {
+        launchRocket(
+          `${e.clientX}px`,
+          `${e.clientY}px`,
+          -90 + (Math.random() * 80 - 40), // up-and-out from the click
+          16 + Math.random() * 10,
+          260 + Math.random() * 280,
+          950 + Math.random() * 700,
+        )
+      } else {
+        launchShooter(
+          `${e.clientX}px`,
+          `${e.clientY}px`,
+          Math.random() * 360,
+          80 + Math.random() * 120,
+          300 + Math.random() * 380,
+          700 + Math.random() * 700,
+        )
+      }
+    }) as EventListener)
+
+    if (!motionReduced()) {
+      // Ambient: shooting stars (dark) / rockets rising from the bottom (light).
+      const spawnAmbient = () => {
+        if (theme() === 'light') {
+          launchRocket(
+            `${(5 + Math.random() * 90).toFixed(0)}vw`,
+            '104vh',
+            -90 + (Math.random() * 30 - 15),
+            13 + Math.random() * 9,
+            window.innerHeight * (1.1 + Math.random() * 0.35),
+            5200 + Math.random() * 3500,
+          )
+          return
+        }
+        const dir = SHOOTER_DIRS[Math.floor(Math.random() * SHOOTER_DIRS.length)]
+        launchShooter(
+          `${dir.x[0] + Math.random() * (dir.x[1] - dir.x[0])}vw`,
+          `${dir.y[0] + Math.random() * (dir.y[1] - dir.y[0])}vh`,
+          dir.angle + (Math.random() * 16 - 8),
+          90 + Math.random() * 90,
+          380 + Math.random() * 300,
+          850 + Math.random() * 550,
+        )
+      }
+      const loopAmbient = () => {
+        spawnAmbient()
+        timers.push(window.setTimeout(loopAmbient, 4500 + Math.random() * 6000))
+      }
+      timers.push(window.setTimeout(loopAmbient, 1500))
+
+      // Cursor glow + magnetic buttons + card edge-glow (shared across themes).
+      cleanups.push(bindPointerFx(root))
+    }
+
+    onCleanup(() => {
+      cleanups.forEach((fn) => fn())
+      timers.forEach((t) => clearTimeout(t))
+    })
+  })
+
+  return (
+    <div id="space" ref={root} aria-hidden="true">
+      <div class="sky" />
+      <div class="aurora" />
+      <div id="starfield" ref={starfieldEl} />
+      {/* Constellations (thin SVG lines between stars) */}
+      <svg
+        class="constellation"
+        style={{ position: 'absolute', top: '6%', left: '58%', width: '260px', height: '170px' }}
+        viewBox="0 0 260 170"
+      >
+        <g
+          class="cline"
+          fill="none"
+          stroke="color-mix(in srgb, hsl(var(--accent)) 65%, white)"
+          stroke-width="2"
+        >
+          <line x1="12" y1="120" x2="70" y2="60" />
+          <line x1="70" y1="60" x2="140" y2="80" />
+          <line x1="140" y1="80" x2="205" y2="30" />
+          <line x1="140" y1="80" x2="170" y2="140" />
+        </g>
+        <g class="cdot" fill="hsl(var(--foreground))">
+          <circle cx="12" cy="120" r="3.6" />
+          <circle cx="70" cy="60" r="4.2" />
+          <circle cx="140" cy="80" r="3.6" />
+          <circle cx="205" cy="30" r="3.8" />
+          <circle cx="170" cy="140" r="3.4" />
+        </g>
+      </svg>
+      <svg
+        class="constellation"
+        style={{ position: 'absolute', bottom: '8%', left: '10%', width: '200px', height: '130px' }}
+        viewBox="0 0 200 130"
+      >
+        <g
+          class="cline"
+          fill="none"
+          stroke="color-mix(in srgb, hsl(var(--accent)) 65%, white)"
+          stroke-width="2"
+        >
+          <line x1="10" y1="20" x2="60" y2="55" />
+          <line x1="60" y1="55" x2="120" y2="40" />
+          <line x1="120" y1="40" x2="180" y2="90" />
+        </g>
+        <g class="cdot" fill="hsl(var(--foreground))">
+          <circle cx="10" cy="20" r="3.4" />
+          <circle cx="60" cy="55" r="4" />
+          <circle cx="120" cy="40" r="3.6" />
+          <circle cx="180" cy="90" r="3.8" />
+        </g>
+      </svg>
+      {/* Ringed planet (top-right) */}
+      <div class="floaty slow" style={{ position: 'absolute', top: '88px', right: '-30px' }}>
+        <div
+          class="planet"
+          style={{
+            width: '120px',
+            height: '120px',
+            background:
+              'radial-gradient(circle at 32% 28%, color-mix(in srgb, hsl(var(--primary)) 78%, white), hsl(var(--primary)) 70%, color-mix(in srgb, hsl(var(--primary)) 68%, black))',
+            opacity: '.7',
+            'box-shadow': '0 0 60px hsl(var(--primary) / .35)',
+          }}
+        />
+      </div>
+      {/* Small planet (bottom-left) */}
+      <div class="floaty" style={{ position: 'absolute', bottom: '60px', left: '-24px' }}>
+        <div
+          class="planet-glow"
+          style={{
+            width: '72px',
+            height: '72px',
+            background:
+              'radial-gradient(circle at 36% 30%, color-mix(in srgb, hsl(var(--accent)) 75%, white), hsl(var(--accent)) 72%, color-mix(in srgb, hsl(var(--accent)) 66%, black))',
+            opacity: '.6',
+            'box-shadow': '0 0 44px hsl(var(--accent) / .4)',
+          }}
+        />
+      </div>
+      {/* Distant moon (center-right) */}
+      <div class="floaty slow" style={{ position: 'absolute', top: '52%', right: '6%' }}>
+        <div
+          class="planet-glow"
+          style={{
+            width: '26px',
+            height: '26px',
+            background: 'radial-gradient(circle at 35% 30%, hsl(199 60% 90%), hsl(210 30% 62%))',
+            opacity: '.5',
+          }}
+        />
+      </div>
+      <div
+        id="cursorGlow"
+        style={{
+          position: 'absolute',
+          width: '520px',
+          height: '520px',
+          'border-radius': '50%',
+          background: 'radial-gradient(circle, hsl(var(--primary) / .10), transparent 70%)',
+          transform: 'translate(-50%,-50%)',
+          opacity: '0',
+          transition: 'opacity .4s ease',
+        }}
+      />
+      <div
+        id="satellite"
+        style={{
+          position: 'absolute',
+          top: '14%',
+          left: '-6%',
+          transform: 'rotate(-18deg)',
+          filter: 'drop-shadow(0 0 4px hsl(var(--accent) / .8))',
+        }}
+      >
+        <Satellite
+          style={{
+            width: '28px',
+            height: '28px',
+            color: 'color-mix(in srgb, hsl(var(--accent)) 55%, white)',
+            opacity: '.85',
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/layout/ThemeToggle.tsx

@@ -0,0 +1,40 @@
+// Theme toggle: the icon shows the CURRENT theme (moon when dark, sun when
+// light), not the theme you'd switch to. Styled as a 36×36 icon button to match
+// EffectsToggle — lucide icons, no emoji (consistent with the rest of the UI).
+import { Moon, Sun } from 'lucide-solid'
+import { Show, type JSX } from 'solid-js'
+
+import { toggleTheme, useTheme } from '../lib/theme'
+
+/** Props for {@link ThemeToggle}. */
+interface ThemeToggleProps {
+  /** Accessible label / tooltip text. Defaults to `'Toggle theme'`. */
+  label?: string
+}
+
+/**
+ * Icon button that flips between dark and light theme. The icon shows the
+ * CURRENT theme (moon when dark, sun when light), not the theme you'd switch
+ * to. Wraps {@link useTheme} + {@link toggleTheme}.
+ *
+ * @example
+ * ```tsx
+ * <ThemeToggle label="Switch theme" />
+ * ```
+ */
+export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
+  const theme = useTheme()
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
+      aria-label={props.label ?? 'Toggle theme'}
+      title={props.label ?? 'Toggle theme'}
+    >
+      <Show when={theme() === 'dark'} fallback={<Sun class="h-[18px] w-[18px]" />}>
+        <Moon class="h-[18px] w-[18px]" />
+      </Show>
+    </button>
+  )
+}

package/src/layout/ThemedScenery.tsx

@@ -0,0 +1,179 @@
+// Generic themed backdrop for non-space themes: a token-tinted nebula (recolors
+// with the active theme) plus a field of slowly floating motif glyphs. It also
+// carries the same live effects as SpaceBackground so every theme feels alive —
+// cursor glow, magnetic buttons, card edge-glow (shared via bindPointerFx), plus
+// motif glyphs that streak across ambiently and launch on a background click.
+// One small, shared component — every extra theme only adds a tiny `motifs`
+// array. Motion is skipped under motionReduced() (the CSS honours the same guard).
+import { createEffect, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { motionReduced } from '../lib/motion'
+import { bindPointerFx } from './sceneEffects'
+
+/** Props for {@link ThemedScenery}. */
+export interface ThemedSceneryProps {
+  /** Emoji/text glyphs scattered and gently floating across the backdrop. */
+  motifs: string[]
+  /** How many glyphs to render. @default 16 */
+  count?: number
+}
+
+function buildMotifs(motifs: string[], count: number, animate: boolean): string {
+  const rnd = Math.random
+  const pick = () => motifs[Math.floor(rnd() * motifs.length)]
+  let html = ''
+  for (let i = 0; i < count; i++) {
+    const size = 22 + rnd() * 40
+    const op = 0.08 + rnd() * 0.16
+    const left = (rnd() * 100).toFixed(2)
+    const top = (rnd() * 100).toFixed(2)
+    const rot = (rnd() * 40 - 20).toFixed(1)
+    const dur = (6 + rnd() * 8).toFixed(1)
+    const delay = (-rnd() * 8).toFixed(1)
+    const anim = animate
+      ? `--r:${rot}deg;--dur:${dur}s;--delay:${delay}s;`
+      : `transform:rotate(${rot}deg);animation:none;`
+    html +=
+      `<span class="motif" style="left:${left}%;top:${top}%;font-size:${size.toFixed(0)}px;` +
+      `opacity:${op.toFixed(2)};${anim}">${pick()}</span>`
+  }
+  return html
+}
+
+// Ignore clicks on real UI — a background click is a deliberate "launch" gesture.
+const INTERACTIVE =
+  'a, button, input, select, textarea, label, [role="button"], [role="tab"], [role="menuitem"], [role="dialog"], [contenteditable]'
+
+/**
+ * A lightweight, theme-tinted backdrop for non-`space` themes: the same
+ * token-driven nebula as {@link SpaceBackground} plus floating motif glyphs you
+ * pass in, cursor glow, magnetic buttons, card edge-glow, and motifs that streak
+ * across (ambiently and on a background click). Mount it as {@link AppShell}'s
+ * `background` (fixed z-0 layer behind all content). Motion is skipped under
+ * `motionReduced()`.
+ *
+ * @example
+ * ```tsx
+ * <AppShell background={<ThemedScenery motifs={['🦕', '🌿', '🦴']} />}>…</AppShell>
+ * ```
+ */
+export function ThemedScenery(props: ThemedSceneryProps): JSX.Element {
+  let root!: HTMLDivElement
+  let field!: HTMLDivElement
+
+  // Regenerate when the motifs change (e.g. switching themes) or motion pref flips.
+  createEffect(() => {
+    field.innerHTML = buildMotifs(props.motifs, props.count ?? 16, !motionReduced())
+  })
+
+  onMount(() => {
+    const cleanups: Array<() => void> = []
+    const timers: number[] = []
+
+    // Launch one motif glyph flying from (leftCss, topCss) toward `angle`.
+    const launchFlyer = (
+      leftCss: string,
+      topCss: string,
+      angle: number,
+      dist: number,
+      dur: number,
+      size: number,
+    ): void => {
+      const el = document.createElement('span')
+      el.textContent = props.motifs[Math.floor(Math.random() * props.motifs.length)]
+      el.style.cssText =
+        `position:absolute;left:${leftCss};top:${topCss};font-size:${size.toFixed(0)}px;` +
+        `pointer-events:none;filter:drop-shadow(0 0 6px hsl(var(--primary) / 0.5));`
+      root.appendChild(el)
+      const rad = (angle * Math.PI) / 180
+      const ex = Math.cos(rad) * dist
+      const ey = Math.sin(rad) * dist
+      const anim = el.animate(
+        [
+          { opacity: 0, transform: 'translate(0,0) rotate(0deg) scale(.6)' },
+          {
+            opacity: 1,
+            transform: `translate(${(ex * 0.15).toFixed(0)}px,${(ey * 0.15).toFixed(0)}px) rotate(18deg) scale(1)`,
+            offset: 0.15,
+          },
+          {
+            opacity: 1,
+            transform: `translate(${(ex * 0.85).toFixed(0)}px,${(ey * 0.85).toFixed(0)}px) rotate(-14deg) scale(1)`,
+            offset: 0.85,
+          },
+          {
+            opacity: 0,
+            transform: `translate(${ex.toFixed(0)}px,${ey.toFixed(0)}px) rotate(8deg) scale(.8)`,
+          },
+        ],
+        { duration: dur, easing: 'cubic-bezier(.25,0,.2,1)', fill: 'forwards' },
+      )
+      anim.onfinish = () => el.remove()
+      timers.push(window.setTimeout(() => el.remove(), dur + 300))
+    }
+
+    // Background click → a motif shoots up-and-out from the click point. Runs
+    // even under reduced motion (it's a deliberate action), like SpaceBackground.
+    const onClick = (e: MouseEvent): void => {
+      if ((e.target as Element | null)?.closest?.(INTERACTIVE)) return
+      launchFlyer(
+        `${e.clientX}px`,
+        `${e.clientY}px`,
+        -90 + (Math.random() * 80 - 40),
+        260 + Math.random() * 260,
+        950 + Math.random() * 700,
+        22 + Math.random() * 14,
+      )
+    }
+    document.addEventListener('click', onClick)
+    cleanups.push(() => document.removeEventListener('click', onClick))
+
+    if (!motionReduced()) {
+      // Cursor glow + magnetic buttons + card edge-glow (shared across themes).
+      cleanups.push(bindPointerFx(root))
+
+      // Ambient: a motif drifts across the screen every few seconds.
+      const spawnAmbient = (): void => {
+        const rtl = Math.random() < 0.5
+        launchFlyer(
+          rtl ? '104vw' : '-6vw',
+          `${(8 + Math.random() * 70).toFixed(0)}vh`,
+          (rtl ? 180 : 0) + (Math.random() * 16 - 8),
+          window.innerWidth * (1.1 + Math.random() * 0.3),
+          6000 + Math.random() * 4000,
+          20 + Math.random() * 16,
+        )
+      }
+      const loop = (): void => {
+        spawnAmbient()
+        timers.push(window.setTimeout(loop, 5000 + Math.random() * 6000))
+      }
+      timers.push(window.setTimeout(loop, 1800))
+    }
+
+    onCleanup(() => {
+      cleanups.forEach((fn) => fn())
+      timers.forEach((t) => clearTimeout(t))
+    })
+  })
+
+  return (
+    <div id="scenery" ref={root} aria-hidden="true">
+      <div class="themed-sky" />
+      <div ref={field} class="absolute inset-0" />
+      <div
+        id="cursorGlow"
+        style={{
+          position: 'absolute',
+          width: '520px',
+          height: '520px',
+          'border-radius': '50%',
+          background: 'radial-gradient(circle, hsl(var(--primary) / 0.1), transparent 70%)',
+          transform: 'translate(-50%,-50%)',
+          opacity: '0',
+          transition: 'opacity .4s ease',
+        }}
+      />
+    </div>
+  )
+}