Motion

Spotlight

A brand glow that trails the cursor across a card on a spring. It moves by transform, so it never repaints the card.

view .md

Preview

spotlightmove the cursor

Light that follows.

Installation

terminal

bash

npx @entrepta/cli@latest add spotlight

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

spotlight.tsx

tsx

import { Spotlight, useSpotlight } from "@/components/entrepta/spotlight"

function GlowCard() {
  const { onMouseMove, spotlight } = useSpotlight(560)
  return (
    <Card onMouseMove={onMouseMove}>
      <Spotlight {...spotlight} />
      …
    </Card>
  )
}

Props

Prop	Type	Default	Description
useSpotlight(size?)	{ onMouseMove, spotlight }	-	Size is the glow diameter in px, 560 by default