AnimatedCard

Render a solid card with an optional pointer-driven 3D tilt and a spotlight that follows the cursor.

AnimatedCard is a client component that wraps its children in a card with spring-based 3D tilt and a radial spotlight drawn above the content on hover. Use it for highlighted content such as pricing plans or feature cards. It depends on motion/react.

Pro plan

Unlimited projects and priority support. Hover to tilt.

Import#

typescript

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

Usage#

typescript

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

export default function PlanCard() {
  return (
    <AnimatedCard p="l" maxWidth="360px">
      <Text as="h3" fontSize="l" fontWeight="700">
        Pro
      </Text>
      <Text as="p" color="secondary">
        Unlimited projects and priority support.
      </Text>
    </AnimatedCard>
  );
}

Examples#

Spotlight only#

Set tiltEnabled={false} to keep the card flat and show only the spotlight. spotlightColor tints it.

Team plan

Shared workspaces for up to 20 people.

Stronger tilt#

Raise maxTilt and lower stiffness and damping for a larger, looser tilt. spotlightEnabled={false} removes the spotlight.

Enterprise

Single sign-on, audit logs and a dedicated account manager.

API#

AnimatedCard#

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Card content.
`spotlightColor`	`string`	`"rgba(255, 255, 255, 0.2…`	Inner colour of the spotlight gradient. Used directly in CSS, so theme tokens are not resolved.
`spotlightSize`	`number`	`300`	Spotlight radius in pixels.
`tiltEnabled`	`boolean`	`true`	Enables the 3D tilt.
`spotlightEnabled`	`boolean`	`true`	Enables the spotlight.
`maxTilt`	`number`	`2.3`	Maximum rotation in degrees on each axis.
`stiffness`	`number`	`300`	Spring stiffness for tilt and spotlight position.
`damping`	`number`	`30`	Spring damping for tilt and spotlight position.

All remaining BoxProps (except ref and children) are spread onto the outer Box, after its defaults: skin="card", shape="rounded", $shadow="medium", position="relative" and overflow="hidden".

Accessibility#

The card renders plain div elements with no role. Effects are driven by mouse events only and have no keyboard equivalent; they are decorative.

Notes#

When the user prefers reduced motion, or when both tiltEnabled and spotlightEnabled are false, the card renders without transforms, hover lift, or spotlight.
On hover the content layer moves to translateZ(24px) over 0.3 s. This lift applies whenever animation is active, even if tiltEnabled is false.
The spotlight layer sits above the content (zIndex 2) with pointer-events: none.
The card sets an inline backgroundColor of rgba(255, 255, 255, 0.95), which takes precedence over bg or skin backgrounds. Passing style replaces the inline style, including the tilt transform.
There is no touch-device check; interaction relies on mouse events. See FluorescentCard for a variant that disables effects on touch devices.