Shine Class Guide
Full control with direct class usage for non-React and advanced scenarios.
Example
Use the class API when you need explicit lifecycle control.
Overview
Class API Demo
"use client";
import { useEffect, useRef } from "react";
import { Color, Shine } from "@hazya/shinejs";
export function DirectClassUsagePreview() {
const ref = useRef<HTMLHeadingElement>(null);
useEffect(() => {
if (!ref.current) {
return;
}
const shine = new Shine(ref.current, {
light: {
intensity: 1.2,
position: "followMouse",
},
config: {
blur: 36,
offset: 0.08,
opacity: 0.3,
shadowRGB: new Color(24, 41, 71),
},
});
shine.enableMouseTracking();
shine.enableAutoUpdates();
return () => {
shine.destroy();
};
}, []);
return (
<div className="rounded-xl border p-6 dark:invert">
<div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
<h2 ref={ref} className="text-center text-8xl font-black text-slate-200">
Class API Demo
</h2>
</div>
</div>
);
}Usage
import { Color, Shine } from "@hazya/shinejs";
const card = document.getElementById("card");
if (card) {
const shine = new Shine(card, {
shadowProperty: "boxShadow",
classPrefix: "cards-",
config: {
shadowRGB: new Color(18, 35, 66),
blur: 28,
},
});
shine.enableMouseTracking();
shine.enableAutoUpdates();
}When class API is best
- Framework-agnostic integrations.
- Manual animation loops.
- Explicit listener and teardown handling.
- Integration with existing imperative UI code.