glasscn
Glance

A CSS-only hover shine. Add the glance class to any element and a diagonal highlight sweeps across it once per hover. No component, no JavaScript. Installing it adds the utilities to your global CSS.

import { GlassCard } from "@/components/ui/glasscn/glass-card";

export function GlanceCardDemo() {
  return (

Installation

$ npx shadcn add @glasscn/glance

Variants

glance-color-fuchsia-400 glance-opacity-30
VoiceExplore →
glance-angle-60
VoiceExplore →
glance-duration-2000
VoiceExplore →

API

Prop
Type
Default
Description
glance
class-
Enables the hover shine. Sets position: relative and overflow: hidden on the element and paints the sweep in an ::after layer, so it composes with any card. Disabled automatically under prefers-reduced-motion.
glance-color-<color>
classwhite
Highlight color; accepts theme colors or arbitrary values, e.g. glance-color-sky-300 or glance-color-[#378ADD].
glance-opacity-<number>
class10
Peak opacity of the highlight band as a percentage, e.g. glance-opacity-20.
glance-duration-<number>
class700
Sweep duration in milliseconds, e.g. glance-duration-1000.
glance-angle-<number>
class120
Tilt of the highlight band in degrees, e.g. glance-angle-90.