Spotlight Card

Dynamic 2D spatial coordinate tracking with sub-pixel radial border illumination mask and smooth exponential smoothing.

CLI Installation

React

$pnpm dlxexhumaaddspotlight-card--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

Interactive Spotlight

Radial Illumination

Dynamic 2D coordinate tracking with specular border illumination and fluid inertial falloff.

120 FPS Coalesced

Mode: both

Parameters

8 Props

radius

color

borderColor

opacity

spread

mode

smoothing

disabled

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

App.tsx

React (.tsx)

import React from 'react';
import { SpotlightCard } from '@/components/ui/SpotlightCard';

export default function App() {
  return (
    <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-8">
      <SpotlightCard
        radius={350}
        color="#6366f1"
        borderColor="#818cf8"
        opacity={0.85}
        spread={60}
        mode="both"
        smoothing={0.2}
        disabled={false}
        className="max-w-md w-full border border-border bg-card p-8 rounded-2xl shadow-2xl"
      >
        <span className="font-mono text-xs font-bold text-primary uppercase">
          RADIAL MASK
        </span>
        <h3 className="text-2xl font-black tracking-tight mt-2">Spotlight Primitive</h3>
        <p className="text-sm text-muted-foreground mt-3 leading-relaxed">
          Zero layout thrashing with cached bounding geometry and direct rAF CSS custom property injection.
        </p>
      </SpotlightCard>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Spotlight Card. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
radius	number	350	Radius of the radial spotlight illumination in pixels.
color	color	#6366f1	Background radial sheen color (CSS color string or hex).
borderColor	color	#818cf8	Color of the illuminated border edge specular mask.
opacity	number	0.85	Opacity of the spotlight when cursor is active over the card.
spread	number	60	Radial gradient falloff softness percentage.
mode	select	both	Select whether to illuminate the border mask, background sheen, or both.
smoothing	number	0.2	Kinetic exponential smoothing response rate (1.0 = instant, 0.1 = silky inertia).
disabled	boolean	false	Programmatically disable pointer tracking and spotlight illumination.

radius

number

Radius of the radial spotlight illumination in pixels.

Default:350

color

Background radial sheen color (CSS color string or hex).

Default:#6366f1

borderColor

color

Color of the illuminated border edge specular mask.

Default:#818cf8

opacity

number

Opacity of the spotlight when cursor is active over the card.

Default:0.85

spread

number

Radial gradient falloff softness percentage.

Default:60

mode

select

Select whether to illuminate the border mask, background sheen, or both.

Default:both

smoothing

number

Kinetic exponential smoothing response rate (1.0 = instant, 0.1 = silky inertia).

Default:0.2

disabled

boolean

Programmatically disable pointer tracking and spotlight illumination.

Default:false

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

SpotlightCard.tsx

import * as React from 'react';
import * as SpotlightCardPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface SpotlightCardProps extends React.ComponentPropsWithoutRef<typeof SpotlightCardPrimitive.SpotlightCard> {
  className?: string;
}

export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
  ({ className, children, ...props }, ref) => (
    <SpotlightCardPrimitive.SpotlightCard
      ref={ref}
      className={clsx(
        'relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-md will-change-transform',
        className
      )}
      {...props}
    >
      {children}
    </SpotlightCardPrimitive.SpotlightCard>
  )
);
SpotlightCard.displayName = 'SpotlightCard';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { SpotlightCard } from '@/components/ui/SpotlightCard'; export default function App() { return ( <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-8"> <SpotlightCard radius={350} color="#6366f1" borderColor="#818cf8" opacity={0.85} spread={60} mode="both" smoothing={0.2} disabled={false} className="max-w-md w-full border border-border bg-card p-8 rounded-2xl shadow-2xl" > <span className="font-mono text-xs font-bold text-primary uppercase"> RADIAL MASK </span> <h3 className="text-2xl font-black tracking-tight mt-2">Spotlight Primitive</h3> <p className="text-sm text-muted-foreground mt-3 leading-relaxed"> Zero layout thrashing with cached bounding geometry and direct rAF CSS custom property injection. </p> </SpotlightCard> </div> ); }

Prop

Type

Default

Description

radius

number

350

Radius of the radial spotlight illumination in pixels.

color

#6366f1

Background radial sheen color (CSS color string or hex).

borderColor

color

#818cf8

Color of the illuminated border edge specular mask.

opacity

number

0.85

Opacity of the spotlight when cursor is active over the card.

spread

number

Radial gradient falloff softness percentage.

mode

select

both

Select whether to illuminate the border mask, background sheen, or both.

smoothing

number

0.2

Kinetic exponential smoothing response rate (1.0 = instant, 0.1 = silky inertia).

disabled

boolean

false

Programmatically disable pointer tracking and spotlight illumination.

import * as React from 'react'; import * as SpotlightCardPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface SpotlightCardProps extends React.ComponentPropsWithoutRef<typeof SpotlightCardPrimitive.SpotlightCard> { className?: string; } export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>( ({ className, children, ...props }, ref) => ( <SpotlightCardPrimitive.SpotlightCard ref={ref} className={clsx( 'relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-md will-change-transform', className )} {...props} > {children} </SpotlightCardPrimitive.SpotlightCard> ) ); SpotlightCard.displayName = 'SpotlightCard';