FluorescentCard

Render a translucent white card with a saturated backdrop, pointer-driven 3D tilt and a cursor spotlight.

FluorescentCard is a client component that wraps its children in a translucent card with spring-based 3D tilt and a radial spotlight on hover. It is intended for use over gradient or colourful backgrounds and depends on motion/react and styled-components.

Weekly insights

Move the pointer over the card to tilt it and follow the spotlight.

Import#

typescript

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

Usage#

typescript

import { FluorescentCard, GradientMesh } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function Showcase() {
  return (
    <Box position="relative" p="xl" overflow="hidden">
      <GradientMesh position="absolute" top="0" left="0" width="100%" height="100%" />
      <FluorescentCard p="l" maxWidth="360px">
        <Text as="h3" fontSize="l" fontWeight="700">
          Insights
        </Text>
        <Text as="p">Weekly summaries delivered to your inbox.</Text>
      </FluorescentCard>
    </Box>
  );
}

Examples#

Spotlight without tilt#

Set tiltEnabled={false} to keep the card flat. A larger spotlightSize and a tinted spotlightColor make the spotlight more visible.

Storage

42 GB of 100 GB used.

Stronger tilt#

Raise maxTilt and lower stiffness and damping for a larger, looser tilt.

New release

Version 2.0 adds offline sync and shared folders.

API#

FluorescentCard#

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.
`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 container, after its defaults: 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#

Effects are disabled when the user prefers reduced motion or when touch is the primary input (detected with useTouchDevice). In that case the card renders without transforms, hover lift, or spotlight.
Unlike AnimatedCard, there is no spotlightEnabled prop; the spotlight is shown whenever effects are active.
The container styles set background-color: rgba(255, 255, 255, 0.95) and backdrop-filter: saturate(1.5) brightness(1.75). These are defined in the component's styled wrapper, so a bg prop may not override them.
On hover the content layer moves to translateZ(24px) over 0.3 s, and the spotlight (zIndex 2, pointer-events: none) fades in above the content.
Passing style replaces the inline style, including the tilt transform.