Glow Card

A card with a soft glow that lights up on hover and can follow the pointer.

Installation

bash

npx @smicolon/cli add glow-card

Run init once per project before adding components. See Installation.

Preview

The card’s glow reacts to the pointer: it lights up on hover, and on the second card, which sets followMouse, it follows the pointer.

Free delivery

On every order in Riyadh this week.

Easy returns

Return any item within 30 days.

Glow container

GlowContainer draws a glow that slides round the border, in the reading direction. It moves on its own and doesn’t react to the pointer.

Members get early access to the autumn edit.

Accessibility

The glow is decoration; the card's content works as usual.
With hoverOnly, keyboard and touch users never see the glow, so put nothing in it that they need.
With prefers-reduced-motion set, GlowCard shows no glow and the border of GlowContainer stays still.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content of the card.
`glowColor`	`string`	`"var(--primary)"`	Colour of the glow.
`glowIntensity`	`number`	`60`	Blur of the glow in pixels.
`followMouse`	`boolean`	`false`	Moves the glow with the pointer.
`hoverOnly`	`boolean`	`true`	Shows the glow only on hover.
`GlowContainer`	`{ glowColor, duration }`	—	A container with a glow that slides round its border.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { GlowCard, GlowContainer } from "@/components/ui/glow-card"

<GlowCard glowColor="var(--chart-1)" followMouse>
  <div className="p-6">Easy returns</div>
</GlowCard>

<GlowContainer duration={2}>
  <p className="p-6">Members get early access to the autumn edit.</p>
</GlowContainer>