Components Spotlight Card

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Spotlight Card

A card with a radial glow that follows the cursor, a subtle hover effect for feature grids and pricing cards. A tiny hook tracks the pointer into two CSS variables and pure CSS does the rest. It requires the PetalSpotlight hook from the petal_components JS bundle, which is registered automatically if you spread the bundle's hooks into your LiveSocket per the install docs.
Basic Spotlight Card

Give the card a unique id (the hook needs one) and put your content inside. Move the cursor across the card and the glow tracks it; the default is a soft violet at low opacity. If the glow does not move, check that the PetalSpotlight hook is registered in your LiveSocket.

Hover me

The radial glow follows your cursor and fades out when it leaves.

heex
Custom Glow

Tune the effect with spotlight_color (any CSS color, ideally with alpha) and spotlight_size (the radius of the glow). Brand-tinted glows work well; keep the alpha low so text stays readable.

Cyan, 500px

A wide, brighter glow that floods most of the card.

Emerald, 200px

A tight glow that stays close to the pointer.

heex
Feature Grid

The classic use: a feature section where each card lights up as the cursor passes over it. Drop the cards into a grid and give each one its own id.

Analytics

Traffic, funnels and retention in one view.

Engagement

Reach customers across email and in-app.

Security

SSO, audit logs and sane defaults.

heex
Properties
elixir 
          
  attr :id, :string, required: true
  attr :spotlight_color, :string, default: "rgb(120 119 198 / 0.18)", doc: "color of the glow (any CSS color, ideally with alpha)"
  attr :spotlight_size, :string, default: "350px", doc: "radius of the glow"
  attr :class, :any, default: nil, doc: "extra classes for the card"
  attr :rest, :global

  slot :inner_block, required: true