ShineJS

Direct Class Usage

Full imperative control for listeners, updates, and cleanup.

Equivalent to the class demo route: apps/demo/src/app/class-demo/page.tsx.

Class API Demo

"use client";

import { useEffect, useRef } from "react";
import { Color, Shine } from "@hazya/shinejs";

export function ClassDemo() {
  const ref = useRef<HTMLHeadingElement>(null);

  useEffect(() => {
    if (!ref.current)
      return;

    const shine = new Shine(ref.current, {
      config: {
        shadowRGB: new Color(255, 255, 255),
      },
    });

    shine.enableMouseTracking();
    shine.enableAutoUpdates();

    return () => {
      shine.destroy();
    };
  }, []);

  return <h1 ref={ref}>Class API Demo</h1>;
}