# hover

Featured Components⚛ TSX Live preview

Spotlight Glow Card

Card with a radial glow that tracks the cursor plus a 1px gradient border-light that follows the pointer.

11.8k78.4k12.4kOpen

Magnetic Button Duo

Buttons and their labels lean toward the cursor with different strength factors, then spring back on leave.

7.6k42.9k9.1kOpen

Split-Text Roll Reveal

On hover, each letter rolls up out of an overflow mask while a gradient copy rolls in from below, staggered.

7.8k41.8k8.6kOpen

Fan-Out Card Stack

Three data cards stacked that fan open with rotation on hover; click one to spring it to the front.

6.9k36.3k7.4kOpen

UI Elements⚛ TSX Live preview

Overlapping Avatar Stack

Gradient initial circles overlapping in a stack that spreads apart on hover and lifts per avatar.

5k35.2k8.3kOpen

Elastic Following Tooltip

A gradient tooltip that springs toward the cursor position with lerp smoothing and an arrow caret.

5.9k31.8k6.7kOpen

UI Elements⚛ TSX Live preview

Interactive Star Rating

Five stars with hover preview, spring pop on fill and locked-in labels from Terrible to Legendary.

4.4k31.8k7.2kOpen

Animations⚛ TSX Live preview

Bouncy Letter Wave

The word MOTIONVAULT splits into per-letter spans that ride a looping spring wave and pop on hover.

5.5k30.7k5.6kOpen

Animations⚛ TSX Live preview

Mouse-Tracking Grid Glow

An 8×8 tile grid: hovered cell ignites with glow, its eight neighbors light warm, rest fades to glass.

5.3k28.7k5.9kOpen

Featured Animations Live preview

Magnetic Spring Buttons

Three CTA buttons that lean toward your cursor with physics-based spring motion; the label counter-moves for parallax.

40200Open

Perspective 3D Card Wall

A tilted grid wall of tiles that lean toward your mouse and pop out toward the viewer on hover with glow.

37600Open

3D Flip Card Reveal

Three cards that rotate on the Y axis on hover — front face has a glyph, back face carries the details.

31800Open

3D page-flip book stack

A stack of pages fans open like a book on hover — layered rotateY flips with left-edge transform origin.

38900Open

Featured UI Elements Live preview

RGB glitch hover text

Hover the word and cyan/red RGB-split layers jitter in stepped keyframes — cyberpunk title effect.

41900Open

Frosted glass directional tooltips

Blurred glass tooltips with an arrow notch pop in above or below buttons on hover, spring easing.

28700Open

Direction-aware hover glow card

A 300px radial light follows the cursor and snaps in from the edge the pointer entered from.

37600Open

Featured Site Templates Live preview

3D tilt gallery wall

Six gradient tiles tilt in perspective toward the cursor with a radial sheen tracking the pointer.

45800Open

Glass lift cards with light tracking

Frosted stat cards that lift on hover while a soft light pool tracks the cursor along their top edge.

34800Open

Featured Components Live preview

Depth-focus bento row

Hovering the row brings one panel forward (flex grow, color, label) while siblings recede and desaturate.

36600Open

Underline sweep nav links

Gradient underline grows from the left on hover while the label brightens — one-pseudo-element nav polish.

28900Open

Line Sweep Button · Rose Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Rose Gold palette.

38100Open

Line Sweep Button · Ocean Sky

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Ocean Sky palette.

82900Open

Line Sweep Button · Mint Breeze

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Mint Breeze palette.

41700Open

Line Sweep Button · Candy Pink

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Candy Pink palette.

31100Open

Line Sweep Button · Royal Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Royal Gold palette.

75900Open

Line Sweep Button · Crimson Heat

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Crimson Heat palette.

41900Open

Line Sweep Button · Deep Indigo

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Deep Indigo palette.

34600Open

Line Sweep Button · Aurora Teal

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Aurora Teal palette.

68400Open

Spring Tooltip Button · Deep Indigo

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Deep Indigo palette.

53800Open

Spring Tooltip Button · Aurora Teal

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.

35200Open

Spring Tooltip Button · Mono Pearl

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Mono Pearl palette.

10900Open

Spring Tooltip Button · Ultra Violet

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ultra Violet palette.

32500Open

Spring Tooltip Button · Cyber Lime

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Cyber Lime palette.

67400Open

Spring Tooltip Button · Sunset Amber

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Sunset Amber palette.

61700Open

Spring Tooltip Button · Rose Gold

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Rose Gold palette.

84100Open

Spring Tooltip Button · Ocean Sky

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ocean Sky palette.

50900Open

Magnetic Hover Element · Deep Indigo

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Deep Indigo palette.

84000Open

Magnetic Hover Element · Aurora Teal

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Aurora Teal palette.

39800Open

Magnetic Hover Element · Mono Pearl

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Mono Pearl palette.

81500Open

Magnetic Hover Element · Ultra Violet

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Ultra Violet palette.

39900Open

Magnetic Hover Element · Cyber Lime

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Cyber Lime palette.

60000Open

Magnetic Hover Element · Sunset Amber

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Sunset Amber palette.

69100Open

Magnetic Hover Element · Rose Gold

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Rose Gold palette.

17500Open

Magnetic Hover Element · Ocean Sky

The button is magnetized to your cursor — it leans toward the pointer and springs back. Rendered in the Ocean Sky palette.

62300Open

Featured Animations Live preview

Proximity Grid Glow · Ultra Violet

A wall of cells that light up and swell around your cursor like a tactile light panel. Rendered in the Ultra Violet palette.

27900Open

Proximity Grid Glow · Cyber Lime

A wall of cells that light up and swell around your cursor like a tactile light panel. Rendered in the Cyber Lime palette.

26000Open

Proximity Grid Glow · Sunset Amber

A wall of cells that light up and swell around your cursor like a tactile light panel. Rendered in the Sunset Amber palette.

57100Open

Proximity Grid Glow · Rose Gold

A wall of cells that light up and swell around your cursor like a tactile light panel. Rendered in the Rose Gold palette.