React Glowcore

React Glowcore is a headless, zero-clone, lightweight React primitive that applies a cursor-following glow effect to a single child element, activated only on hover.

It is designed for production use: tiny, dependency-free, fully customizable via CSS custom properties, and accessible by default. Unlike many alternatives, Glowcore never clones DOM nodes — you attach a single ref and the effect is applied with minimal runtime cost.

Quick Start

import React from "react"
import { useGlow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Card() {
	const { glowRef } = useGlow<HTMLDivElement>({
		displayMode: "border",
		smoothFade: true,
		fadeOutDuration: 300,
		style: { color: "blue", padding: "4px" },
	})

	return (
		<div
			ref={glowRef}
			className="glow rounded-lg p-6"
			style={{
				background: `radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(59 130 246 / 0.5) 0%, transparent 40%)`,
			}}
		>
			Hover me!
		</div>
	)
}

Features

• Headless: No visual opinion, you control markup and styling
• Zero DOM cloning: Single ref attach — no subtree duplication
• Tiny runtime: Direct DOM mutations for 60fps-safe position updates
• Fade-out animation: Smooth glow fade-out when cursor leaves (optional)
• Flexible API: useGlow() hook + Glow render-prop component
• Programmatic theming: generateGlowStyles() and createGlowStyleFactory()
• Accessibility: Respects prefers-reduced-motion and disables on touch

Installation

npm install react-glowcore
# or
yarn add react-glowcore
# or
pnpm add react-glowcore

Usage

With useGlow() hook (recommended)

import { useGlow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Example() {
	const { glowRef } = useGlow<HTMLDivElement>({
		displayMode: "border",
		smoothFade: true,
		fadeOutDuration: 400,
		style: { color: "blue", padding: 4 },
	})

	return (
		<div
			ref={glowRef}
			className="glow"
			style={{
				background: `radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(59 130 246 / 0.5) 0%, transparent 40%)`,
			}}
		>
			Content
		</div>
	)
}

With Glow component

import { Glow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Example() {
	return (
		<Glow>
			{(glowRef) => (
				<div ref={glowRef} className="glow">
					Content
				</div>
			)}
		</Glow>
	)
}

API Reference

useGlow<T extends HTMLElement>(options?: GlowOptions)

Returns { glowRef: React.Ref<T> } — attach to the element you want tracked.

GlowOptions:

| Option | Type | Default | Description | | ----------------- | ------------------ | -------- | -------------------------------------------------------- | | disabled | boolean | false | Disable the effect | | displayMode | 'border' | 'fill' | 'border' | Glow appears only on edges or fills interior | | smoothFade | boolean | true | Enable smooth fade animations | | fadeOutDuration | number | 300 | Fade-out duration in milliseconds (fade-in always 300ms) | | style | GlowStyleConfig | - | Inline style customization |

GlowStyleConfig:

| Property | Type | Description | | ------------ | ---------------- | ------------------------------------------------ | | color | string | CSS color or preset key ('blue', 'purple', etc.) | | padding | string | number | Border thickness or preset key | | blurRadius | string | number | Glow fade distance or preset key |

Glow component

Render-prop wrapper around useGlow(). Children must be a function receiving glowRef.

Styling

Import optional CSS with sensible defaults:

import "react-glowcore/styles/glow.css"

You control the gradient via CSS custom properties or inline styles:

<div
	style={{
		"--glow-color": "rgb(59 130 246 / 1)",
		"--glow-padding": "4px",
		"--glow-blur-radius": "70%",
		background: `radial-gradient(...var(--glow-x)...)`,
	}}
	className="glow"
>
	Content
</div>

Fade Animation

Smooth fade animations are enabled by default (smoothFade: true). The glow fades in over 300ms when the cursor enters, and fades out over a customizable duration when it leaves:

const { glowRef } = useGlow({
	smoothFade: true, // Enable smooth animations (default)
	fadeOutDuration: 400, // 400ms fade-out (fade-in always 300ms)
})

Disable animations entirely for instant appearance/disappearance:

const { glowRef } = useGlow({
	smoothFade: false, // No animations, instant appear/disappear
})

Presets

Use generateGlowStyles() for type-safe theming:

import {
	generateGlowStyles,
	createGlowStyleFactory,
	GlowColors,
	GlowPaddings,
} from "react-glowcore"

// Generate styles with presets
const blueGlow = generateGlowStyles({
	color: "blue",
	padding: "thick",
	blurRadius: "soft",
})

// Create a reusable factory
const cardGlow = createGlowStyleFactory({ color: "blue", padding: "default" })
<div style={cardGlow()}>Card 1</div>
<div style={cardGlow({ color: "purple" })}>Card 2</div>

Browser Support

Modern evergreen browsers with support for:

• CSS custom properties
• CSS masks
• Radial gradients
• Pointer events

Fallbacks are straightforward (omit mask, adjust background styles).

License

MIT — See LICENSE file for details.

Why Glowcore?

✓ No DOM cloning — Many hover/glow libraries clone children, breaking refs and context
✓ 60fps performance — Direct style mutations, no React state updates
✓ Minimal API — useGlow() hook and optional styling utilities
✓ Accessibility — Respects prefers-reduced-motion, disables on touch
✓ Optional fade-out — Smooth animations by default, disable per-element for instant behavior