FxHomeFeatureBefore Glow

Mouse-tracking glow effect on homepage Feature cards, especially stunning in dark mode.

Effect Description

On each card in the homepage Feature area:

• Each card is assigned a different color (red, green, magenta, cyan, orange, blue, etc.)
• When the mouse enters a card, a radial gradient glow appears centered on the mouse position
• The glow color matches the card's assigned color
• Glow position is controlled via CSS variables --x and --y

Enable

This effect is enabled by default and requires no configuration. Only visible in dark mode.

Technical Details

• Uses a render function component (defineComponent + render), no template
• Injected via the home-features-before slot
• Listens to each .VPFeature card's mousemove event
• Sets CSS variables --x (horizontal) and --y (vertical) to the mouse relative position
• Works with the ::before pseudo-element in custom.css for glow rendering:

/* Styles in custom.css */
.dark .VPHomeFeatures .VPFeature::before {
  content: "";
  background: radial-gradient(var(--color), transparent, transparent);
  left: var(--x);
  top: var(--y);
  opacity: 0;
  transition: opacity 1s;
}

.dark .VPHomeFeatures .VPFeature:hover::before {
  opacity: 1;
  transition: opacity 0.3s;
}

Card Color Assignment

The component assigns 8 colors to cards in order, cycling when exceeded:

Index	Color
1	#f00 (red)
2	#0f0 (green)
3	#f0f (magenta)
4	#0ff (cyan)
5	#FE7300 (orange)
6	#008EFF (blue)
7	#8B5CF6 (purple)
8	#10B981 (emerald)