@a4ui/core 0.21.0 → 0.22.0

package/dist/layout/Aurora.d.ts

@@ -4,6 +4,11 @@ export interface AuroraProps {
     intensity?: number;
     /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
     animated?: boolean;
+    /**
+     * A soft glow that follows the cursor across the backdrop (plus cursor-tracking
+     * on any `.glow-edge` cards). Reduced-motion aware (off when reduced). @default true
+     */
+    pointerGlow?: boolean;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

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.21.0'
+export const A4UI_VERSION = '0.22.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/layout/Aurora.tsx

@@ -8,15 +8,22 @@
 // Usage: render it once at the top of your layout and keep the page root's
 // background transparent (don't put `bg-background` on the root) so the Aurora
 // shows through — the component paints the base background itself.
-import { For, type JSX } from 'solid-js'
+import { For, onCleanup, onMount, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+import { bindPointerFx } from './sceneEffects'
 
 export interface AuroraProps {
   /** Blob opacity multiplier, 0..1 — higher = more visible color. @default 0.45 */
   intensity?: number
   /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
   animated?: boolean
+  /**
+   * A soft glow that follows the cursor across the backdrop (plus cursor-tracking
+   * on any `.glow-edge` cards). Reduced-motion aware (off when reduced). @default true
+   */
+  pointerGlow?: boolean
   class?: string
 }
 
@@ -46,8 +53,19 @@ const BLOBS = [
  */
 export function Aurora(props: AuroraProps): JSX.Element {
   const intensity = (): number => props.intensity ?? 0.45
+  let root: HTMLDivElement | undefined
+
+  onMount(() => {
+    // The pointer glow (`#cursorGlow`) + `.glow-edge` cursor tracking come from
+    // the shared pointer-fx binder — only when motion is allowed.
+    if (props.pointerGlow === false || motionReduced() || !root) return
+    const cleanup = bindPointerFx(root)
+    onCleanup(cleanup)
+  })
+
   return (
     <div
+      ref={root}
       aria-hidden="true"
       class={cn('pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-background', props.class)}
     >
@@ -61,6 +79,16 @@ export function Aurora(props: AuroraProps): JSX.Element {
           />
         )}
       </For>
+      {/* Soft glow that follows the cursor across the backdrop (positioned by
+          bindPointerFx via left/top on pointermove). */}
+      <div
+        id="cursorGlow"
+        class="absolute h-[520px] w-[520px] rounded-full opacity-0 transition-opacity duration-300"
+        style={{
+          background: 'radial-gradient(circle, hsl(var(--primary) / 0.1), transparent 70%)',
+          transform: 'translate(-50%,-50%)',
+        }}
+      />
     </div>
   )
 }