Spotlight

Render a card that tilts towards the pointer and shows a radial spotlight following the cursor on hover.

Spotlight is a client component that wraps its children in a card with a mouse-driven 3D tilt and a radial-gradient spotlight that follows the cursor. Use it for feature cards on marketing pages. It depends on motion/react.

Realtime sync

Changes appear on every device instantly.

Import#

typescript

import { Spotlight } from "@reactberry/system/blocks";

Usage#

typescript

import { Spotlight } from "@reactberry/system/blocks";
import { Text } from "@reactberry/system/elements";

export default function FeatureCard() {
  return (
    <Spotlight maxWidth="320px">
      <Text as="h3" fontSize="l" fontWeight="700">
        Realtime sync
      </Text>
      <Text as="p" color="secondary">
        Changes appear on every device instantly.
      </Text>
    </Spotlight>
  );
}

Examples#

Square card with a custom colour#

Set aspect="1/1" for a square card and spotlightColor to change the spotlight tint.

Usage this month82%

Feature grid#

Pass aspect="auto" to let content set the height, and any Box prop, such as p, to override the card defaults.

Backups

Daily snapshots kept for 30 days.

Audit log

Every change, with who made it.

SSO

API#

Spotlight#

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Card content, rendered in a layer that lifts towards the viewer on hover.
`aspect`	`number \| {} \| string[] \| number[]`	`4/5`	Applied as the inline `aspectRatio` style. Only single values take effect; responsive arrays and objects are not resolved.
`spotlightColor`	`string`	`transparent.brand.1`	Colour of the spotlight. Set as the spotlight layer's `color`, so theme colour tokens work.

All remaining BoxProps (except children) are spread onto the outer Box, after its defaults: skin="card", shape="rounded", border="1px solid", borderColor="transparent.light.2", p="medium", $shadow="medium" and overflow="hidden".

Accessibility#

The card is a plain div with no role. The effect is decorative and does not change the content.
Interaction relies on mouse events only. There is no reduced-motion or touch handling; see AnimatedCard or FluorescentCard for variants that respect these.

Notes#

Tilt is limited to 5 degrees on each axis and uses springs with stiffness 300 and damping 30. It resets on mouse leave.
On hover the content layer moves to translateZ(48px) and scales to 1.04; the spotlight is a 300px radial gradient that fades in.
Passing style replaces the component's inline style, including the tilt transform and aspect ratio.