ShineJS Docs

Add ShineJS shadows to a React element in under a minute with the Shine component.

Example

Shine component is the recommended way to use ShineJs in React.

Overview

Shine Mouse Follow

"use client";

import { Shine } from "@hazya/shinejs/react";

export function MouseFollowPreview() {
  return (
    <div style={panelStyle} className="rounded-xl border p-6 dark:invert">
      <div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
        <Shine
          as="h2"
          className="text-center text-8xl font-black text-slate-200"
          options={{
            light: {
              intensity: 1.2,
              position: "followMouse",
            },
            config: {
              blur: 36,
              opacity: 0.3,
              offset: 0.08,
              shadowRGB: { r: 24, g: 41, b: 71 },
            },
          }}
        >
          Shine Mouse Follow
        </Shine>
      </div>
    </div>
  );
}

Basic Usage

"use client";

import { Shine } from "@hazya/shinejs/react";

export function HeroTitle() {
  return (
    <Shine as="h1" options={{ light: { position: "followMouse" } }}>
      Shining Bright
    </Shine>
  );
}

Next steps

Use dynamic updates to change content or config live.
Add fixed position or auto-pilot light movement.
Tune shadowRGB for your brand/system palette.
Use useShine when you need imperative control.

React Quick Start

Example

Overview

Shine Mouse Follow

Basic Usage

Next steps

On this page