### Direct Shine Class Usage with React Hooks

Source: https://shinejs.vercel.app/docs/getting-started/vanilla-quick-start

This example shows how to instantiate and manage the Shine class within a React functional component using `useEffect` and `useRef`. It enables mouse tracking and auto-updates for dynamic lighting effects on a heading element. Ensure `@hazya/shinejs` is installed as a dependency.

```jsx
"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>
  );
}

```

--------------------------------

### React useShine Guide Preview with Imperative Updates

Source: https://shinejs.vercel.app/docs/guides/react-use-shine

Demonstrates imperative control over ShineJS effects in React using the useShine hook. It allows dynamic updates to configuration like opacity and manages the Shine instance lifecycle automatically.

```javascript
"use client";

import { useRef, useState } from "react";
import { useShine } from "@hazya/shinejs/react";

export function ReactUseShineGuidePreview() {
  const ref = useRef<HTMLHeadingElement>(null);
  const [opacity, setOpacity] = useState(0.24);

  const { update } = useShine(ref, {
    light: { position: "followMouse" },
    config: {
      blur: 36,
      offset: 0.08,
      opacity,
      shadowRGB: { r: 24, g: 41, b: 71 },
    },
  });

  const changeOpacity = () => {
    const nextOpacity = opacity === 0.24 ? 0.4 : 0.24;
    setOpacity(nextOpacity);
    update({ config: { opacity: nextOpacity } });
  };

  return (
    <div className="rounded-xl border p-6 dark:invert">
      <div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
        <div className="flex flex-col gap-6">
          <div className="flex justify-center">
            <button
              className="rounded-md border bg-white px-3 py-1.5 text-sm font-medium"
              onClick={changeOpacity}
            >
              {opacity === 0.24 ? "Increase Opacity (0.4)" : "Decrease Opacity (0.24)"}
            </button>
          </div>
          <h2
            ref={ref}
            className="text-center text-7xl font-black tracking-tight text-slate-200"
          >
            Adjust Me
          </h2>
        </div>
      </div>  
    </div>
  );
}

```

--------------------------------

### ShineJS Usage Examples: Component, Hook, and Class

Source: https://shinejs.vercel.app/docs/guides/text-vs-children

Illustrates how to use the Shine functionality across different contexts. Includes examples for the Shine React component, the useShine hook, and direct Shine class instantiation.

```jsx
<Shine as="h3">Text Only</Shine>
<Shine as="div">
  <img src="/hero-1.png" alt="" />
  <img src="/hero-2.png" alt="" />
</Shine>;
```

```javascript
useShine(textOnlyRef); // textShadow
useShine(containerWithChildrenRef); // boxShadow
```

```javascript
new Shine(textOnlyElement); // textShadow
new Shine(containerWithImages); // boxShadow
```

--------------------------------

### React Basic Shine Component Usage

Source: https://shinejs.vercel.app/docs/getting-started/react-quick-start

Demonstrates the basic usage of the Shine component in React for applying a mouse-following shadow effect to a heading. It requires importing the Shine component and setting the light position option.

```jsx
"use client";

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

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

```

--------------------------------

### Install ShineJS with npm

Source: https://shinejs.vercel.app/docs/getting-started/installation

Installs the ShineJS library using the npm package manager. This is a common method for Node.js projects.

```bash
npm install shinejs
```

--------------------------------

### Install ShineJS with pnpm

Source: https://shinejs.vercel.app/docs/getting-started/installation

Installs the ShineJS library using the pnpm package manager. pnpm is known for its efficient disk space usage.

```bash
pnpm add shinejs
```

--------------------------------

### Vanilla JavaScript ShineJS Class API Integration

Source: https://shinejs.vercel.app/docs/guides/class-api

Shows how to integrate the ShineJS class API with a plain HTML element for applying effects. This example targets an element with the ID 'card' and configures ShineJS with custom shadow properties and class prefixes. Requires @hazya/shinejs.

```javascript
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();
}

```

--------------------------------

### Import ShineJS Core and React APIs

Source: https://shinejs.vercel.app/docs/getting-started/installation

Demonstrates how to import the core ShineJS class and the React-specific components and hooks. The React API is located under the '@hazya/shinejs/react' path.

```javascript
import { Shine, useShine } from "@hazya/shinejs/react";
import { Shine as ShineCore } from "@hazya/shinejs";
```

--------------------------------

### Starter Usage of ShineJS React Component

Source: https://shinejs.vercel.app/docs/examples/playground

Demonstrates the basic implementation of the ShineJS React component. It shows how to configure light properties and various visual effects like opacity, blur, and shadow. This example is intended for direct use in React applications.

```jsx
"use client";

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

export function PlaygroundStarter() {
  return (
    <Shine
      as="h1"
      options={{
        light: {
          position: "followMouse",
          intensity: 1,
        },
        config: {
          numSteps: 5,
          opacity: 0.15,
          opacityPow: 1.2,
          offset: 0.15,
          offsetPow: 1.8,
          blur: 40,
          blurPow: 1,
          shadowRGB: { r: 0, g: 0, b: 0 },
        },
      }}>
      Shine Playground
    </Shine>
  );
}

```

--------------------------------

### Install ShineJS with yarn

Source: https://shinejs.vercel.app/docs/getting-started/installation

Installs the ShineJS library using the yarn package manager. yarn is another popular choice for managing JavaScript dependencies.

```bash
yarn add shinejs
```

--------------------------------

### React Shine Mouse Follow Component

Source: https://shinejs.vercel.app/docs/getting-started/react-quick-start

Implements a mouse-following shadow effect on a React heading element using the Shine component from @hazya/shinejs/react. It configures light intensity, position, blur, opacity, and shadow color.

```jsx
"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>
  );
}

```

--------------------------------

### ShineJS Auto Pilot Headline Animation (React)

Source: https://shinejs.vercel.app/docs/examples/auto-pilot

Animates the light position for a headline element in a circular path using `requestAnimationFrame`. This example uses the `useShine` hook from `@hazya/shinejs/react` to update the light's position based on time. It requires React and the `@hazya/shinejs/react` library.

```typescript
"use client";

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

export function AutoPilotHeadline() {
  const ref = useRef<HTMLHeadingElement>(null);
  const frame = useRef<number | null>(null);
  const { update } = useShine(ref, { config: { blur: 38 } });

  useEffect(() => {
    const animate = () => {
      const t = Date.now() * 0.00025 * Math.PI * 2;
      const x = window.innerWidth * 0.5 + window.innerWidth * 0.5 * Math.cos(t);
      const y = window.innerHeight * 0.5 + window.innerHeight * 0.5 * Math.sin(t * 0.7);

      update({ light: { position: { x, y } } });
      frame.current = window.requestAnimationFrame(animate);
    };

    frame.current = window.requestAnimationFrame(animate);
    return () => {
      if (frame.current)
        window.cancelAnimationFrame(frame.current);
    };
  }, [update]);

  return <h1 ref={ref}>Auto Pilot</h1>;
}

```

--------------------------------

### Basic Shine Class Initialization in Vanilla JavaScript

Source: https://shinejs.vercel.app/docs/getting-started/vanilla-quick-start

This snippet illustrates the fundamental way to initialize ShineJS using the Shine class directly with a target HTML element. It assumes the element with the ID 'hero-title' exists in the DOM. Remember to call `shine.destroy()` when the element is removed or the component unmounts to prevent memory leaks.

```javascript
import { Shine } from "@hazya/shinejs";

const element = document.getElementById("hero-title");

if (element) {
  const shine = new Shine(element, { light: { position: "followMouse" } });

  // Later, when unmounting/changing views:
  // shine.destroy();
}

```

--------------------------------

### React useShine Basic Usage for Interactive Elements

Source: https://shinejs.vercel.app/docs/guides/react-use-shine

Illustrates the basic integration of the useShine hook in React for creating interactive elements. It initializes a Shine effect on a heading element that follows the mouse and allows for basic configuration updates.

```javascript
"use client";

import { useRef } from "react";
import { useShine } from "@hazya/shinejs/react";

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

  const { update } = useShine(ref, {
    light: { position: "followMouse" },
    config: { opacity: 0.24 },
  });

  return (
    <button onClick={() => update({ config: { opacity: 0.4 } })}>
      <h1 ref={ref}>Adjust Me</h1>
    </button>
  );
}

```

--------------------------------

### Implement Mouse Follow with ShineJS React

Source: https://shinejs.vercel.app/docs/examples/mouse-follow

This snippet shows how to use the Shine component from '@hazya/shinejs/react' to create a headline that follows the mouse cursor. It utilizes the 'followMouse' option for light positioning. No external dependencies beyond the ShineJS library are required.

```tsx
"use client";

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

export function MouseFollowHeadline() {
  return (
    <Shine as="h1" options={{ light: { position: "followMouse" } }}>
      Shine Mouse Follow
    </Shine>
  );
}

```

--------------------------------

### Basic ShineJS Usage in Next.js Client Component

Source: https://shinejs.vercel.app/docs/getting-started/nextjs-client-components

A simple example demonstrating the basic usage of the Shine component for a headline in a Next.js Client Component. It requires the 'use client' directive and configures the light to follow the mouse.

```jsx
"use client";

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

export function DemoHeadline() {
  return (
    <Shine as="h1" options={{ light: { position: "followMouse" } }}>
      Next.js + ShineJS
    </Shine>
  );
}

```

--------------------------------

### Set Light to Fixed Point (React)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Demonstrates setting a fixed position for the light using the ShineJS component. The 'position' option is set to an object with 'x' and 'y' coordinates. This example uses the Shine Component.

```jsx
<Shine as="h2" options={{ light: { position: { x: 480, y: 220 } } }}>
  Fixed Point
</Shine>;
```

--------------------------------

### Animate Light Position with Auto-Pilot (React)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

This example demonstrates how to create an auto-pilot animation for the light's position using React's useState hook. The light's position is calculated based on time to create a circular motion. This uses the Shine Component.

```jsx
const [lightPosition, setLightPosition] = useState({ x: 0, y: 0 });

<Shine as="h2" options={{ light: { position: lightPosition } }}>
  Auto Pilot
</Shine>;

const t = Date.now() * 0.00025 * Math.PI * 2;
setLightPosition({
  x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
  y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
});
```

--------------------------------

### Set Light Position to Follow Mouse (React)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Demonstrates how to configure the ShineJS component to make the light follow the mouse cursor. This is achieved by setting the 'position' option within the 'light' configuration to 'followMouse'. This example uses the Shine Component.

```jsx
<Shine as="h2" options={{ light: { position: "followMouse" } }}>
  Follow Mouse
</Shine>;
```

--------------------------------

### ShineJS Manual Override Usage: Component, Hook, and Class

Source: https://shinejs.vercel.app/docs/guides/text-vs-children

Provides examples for manually overriding ShineJS shadow properties. Demonstrates setting 'shadowProperty: "boxShadow"' for the Shine component, useShine hook, and Shine class.

```jsx
<Shine as="div" options={{ shadowProperty: "boxShadow" }}>
  <div className="card" />
  <div className="card" />
</Shine>;
```

```javascript
useShine(ref, {
  shadowProperty: "boxShadow",
});
```

```javascript
new Shine(element, {
  shadowProperty: "boxShadow",
});
```

--------------------------------

### Set High Light Intensity (React)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Demonstrates how to set a higher intensity for the light effect using the ShineJS component. The 'intensity' option within the 'light' configuration is set to a value greater than the default. This example uses the Shine Component.

```jsx
<Shine as="h2" options={{ light: { intensity: 2, position: "followMouse" } }}>
  High Intensity
</Shine>;
```

--------------------------------

### Update Light to Fixed Point (Shine Class)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Illustrates updating the light's position to a fixed point using the ShineJS class instance. This method allows for precise control over the light's static location within the ShineJS environment.

```javascript
shine.update({ light: { position: { x: 480, y: 220 } } });
```

--------------------------------

### Animate Light Position with Auto-Pilot (Shine Class)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Shows how to implement an auto-pilot animation for the light's position using the ShineJS class instance. This method utilizes `requestAnimationFrame` to continuously update the light's coordinates, creating a smooth, animated path.

```javascript
const animate = () => {
  const t = Date.now() * 0.00025 * Math.PI * 2;
  shine.update({
    light: {
      position: {
        x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
        y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
      },
    },
  });

  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);
```

--------------------------------

### ShineJS Class API Demo with React

Source: https://shinejs.vercel.app/docs/examples/direct-class-usage

This snippet demonstrates initializing and controlling ShineJS using its class API within a React component. It sets up mouse tracking and auto-updates, and ensures proper cleanup by destroying the Shine instance on component unmount. Dependencies include React hooks (`useEffect`, `useRef`) and the ShineJS library (`Shine`, `Color`).

```tsx
"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>;
}

```

--------------------------------

### Update Light to Fixed Point (JavaScript)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Shows how to update the light's position to a specific fixed point using the 'update' function. This is useful for setting a static light source programmatically. Assumes an 'update' function is available in the scope.

```javascript
update({ light: { position: { x: 480, y: 220 } } });
```

--------------------------------

### Update Light Position to Follow Mouse (Shine Class)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Illustrates updating the light's position to follow the mouse cursor when using the ShineJS class instance directly. This approach is suitable for advanced control scenarios where you have direct access to the 'shine' object.

```javascript
shine.update({ light: { position: "followMouse" } });
```

--------------------------------

### ShineJS Class Constructor

Source: https://shinejs.vercel.app/docs/api/shine-class

Initializes a new ShineJS instance. It requires a valid HTML DOM element and accepts an optional configuration object. The constructor will throw an error if an invalid DOM element is provided.

```typescript
new Shine(domElement: HTMLElement, options?: ShineOptions)
```

--------------------------------

### ShineJS Core Methods for Control

Source: https://shinejs.vercel.app/docs/api/shine-class

Provides essential methods for managing the ShineJS instance. These include updating configurations, triggering redraws, recalculating element positions, updating content, controlling automatic updates and mouse tracking, and destroying the instance to clean up resources.

```javascript
update(options?)
draw()
recalculatePositions()
updateContent(text?)
enableAutoUpdates()
disableAutoUpdates()
enableMouseTracking()
disableMouseTracking()
destroy()
```

--------------------------------

### Update Light Position to Follow Mouse (JavaScript)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Shows how to dynamically update the light's position to follow the mouse cursor using the 'update' function. This method is useful for imperative control over the ShineJS instance. Assumes an 'update' function is available in the scope.

```javascript
update({ light: { position: "followMouse" } });
```

--------------------------------

### Update Config Values with useShine Hook

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Shows how to imperatively update configuration parameters such as `offset` and `offsetPow` using the `update` function from the `useShine` hook. This allows for dynamic adjustments to the Shine effect's behavior.

```javascript
update({
  config: {
    offset: 0.015,
    offsetPow: 0,
  },
});
```

--------------------------------

### Update Light Behavior with useShine Hook

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Shows how to imperatively update the light behavior, including position and intensity, using the `update` function from the `useShine` hook. This allows for programmatic control over the light's movement and appearance.

```javascript
update({ light: { position: "followMouse" } });

update({
  light: {
    intensity: 2,
    position: { x: 320, y: 140 },
  },
});

const t = Date.now() * 0.00025 * Math.PI * 2;
update({
  light: {
    position: {
      x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
      y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
    },
  },
});
```

--------------------------------

### ShineJS Core Fields for State and Configuration

Source: https://shinejs.vercel.app/docs/api/shine-class

Exposes key fields that represent the internal state and configuration of a ShineJS instance. These fields provide access to the light source, configuration settings, the associated DOM element, class prefixes, shadow properties, shadow elements, and the status of auto-updates.

```javascript
light
config
domElement
classPrefix
shadowProperty
shadows
areAutoUpdatesEnabled
```

--------------------------------

### ShineConfigSettings Type Definition (TypeScript)

Source: https://shinejs.vercel.app/docs/api/shine-config-settings

Defines the structure for ShineJS configuration settings, including parameters for visual effects like steps, opacity, blur, and shadow color, along with their default values.

```typescript
type ShineConfigSettings = {
  numSteps?: number; // default 5
  opacity?: number; // default 0.15
  opacityPow?: number; // default 1.2
  offset?: number; // default 0.15
  offsetPow?: number; // default 1.8
  blur?: number; // default 40
  blurPow?: number; // default 1.0
  shadowRGB?: { r: number; g: number; b: number }; // default {0,0,0}
};
```

--------------------------------

### Apply Vibrant Shadow Presets (TypeScript)

Source: https://shinejs.vercel.app/docs/examples/shadow-color-cookbook

Defines a collection of shadow presets, each with its own `shadowRGB`, `opacity`, `blur`, and `intensity`. A function `applyShadowPreset` is provided to easily apply these presets by name, updating the configuration.

```typescript
const shadowPresets = {
  neonAzure: {
    shadowRGB: { r: 0, g: 195, b: 255 },
    opacity: 0.22,
    blur: 44,
    intensity: 1.45,
  },
  solarCoral: {
    shadowRGB: { r: 255, g: 98, b: 72 },
    opacity: 0.2,
    blur: 40,
    intensity: 1.35,
  },
  electricViolet: {
    shadowRGB: { r: 123, g: 75, b: 255 },
    opacity: 0.19,
    blur: 38,
    intensity: 1.3,
  },
  limePulse: {
    shadowRGB: { r: 112, g: 214, b: 78 },
    opacity: 0.17,
    blur: 34,
    intensity: 1.2,
  },
  rubyDepth: {
    shadowRGB: { r: 205, g: 32, b: 78 },
    opacity: 0.21,
    blur: 42,
    intensity: 1.4,
  },
} as const;

function applyShadowPreset(name: keyof typeof shadowPresets) {
  update({ config: shadowPresets[name] });
}

applyShadowPreset("neonAzure");
```

--------------------------------

### useShine Hook Signature - TypeScript

Source: https://shinejs.vercel.app/docs/api/use-shine-hook

The signature for the useShine hook, detailing its parameters and return values. It accepts a ref to the target HTML element and optional ShineOptions, returning the Shine instance and an update function.

```typescript
useShine(
  ref: RefObject<HTMLElement | null>,
  config?: ShineOptions,
): { shine: Shine | null; update: (newConfig: ShineOptions) => void }
```

--------------------------------

### Update Light Intensity (Shine Class)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Illustrates updating the light's intensity using the ShineJS class instance. This allows for runtime adjustments to the light's power, affecting the visual depth and prominence of the ShineJS effect.

```javascript
shine.update({ light: { intensity: 2 } });
```

--------------------------------

### Set Shadow from Hex Color Input (TypeScript)

Source: https://shinejs.vercel.app/docs/examples/shadow-color-cookbook

This snippet provides a utility to convert hexadecimal color strings to RGB objects and then update the shadow color. It includes an input element for users to pick a color dynamically, driving the shadow color based on user selection or system preference.

```typescript
function hexToRgb(hex: string) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!result)
    return { r: 0, g: 0, b: 0 };

  return {
    r: Number.parseInt(result[1], 16),
    g: Number.parseInt(result[2], 16),
    b: Number.parseInt(result[3], 16),
  };
}

function setShadowFromHex(hex: string) {
  update({ config: { shadowRGB: hexToRgb(hex) } });
}

const defaultShadowHex = prefersDarkMode ? "#F4F7FF" : "#0C1020";
setShadowFromHex(defaultShadowHex);

<input
  type="color"
  value={shadowColorHex}
  onChange={(event) => {
    setShadowFromHex(event.target.value);
  }}
/>
```

--------------------------------

### Update Light Intensity (JavaScript)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Shows how to dynamically update the light's intensity using the 'update' function. Increasing intensity amplifies the perceived depth of the effect. Assumes an 'update' function is available in the scope.

```javascript
update({ light: { intensity: 2 } });
```

--------------------------------

### Shine Component React API

Source: https://shinejs.vercel.app/docs/api/shine-component

The Shine component provides a declarative way to use ShineJS in React. It accepts an optional 'as' prop for the HTML tag and an 'options' prop for ShineJS configurations. Children are rendered, and string/number children sync to options.content. Standard HTML attributes are also supported.

```jsx
"use client";

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

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

```

--------------------------------

### Update Config Values with Shine Class

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Illustrates updating configuration values like `offset` and `offsetPow` directly on a ShineJS class instance. This method is useful for fine-grained control over the effect's parameters.

```javascript
shine.update({
  config: {
    offset: 0.015,
    offsetPow: 0,
  },
});
```

--------------------------------

### Update Color (shadowRGB) with useShine Hook

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Shows how to imperatively update the shadow color using `shadowRGB` within the `update` function of the `useShine` hook. This enables programmatic control over the element's color.

```javascript
update({
  config: {
    shadowRGB: { r: 143, g: 0, b: 255 },
  },
});
```

--------------------------------

### Update Content Text with useShine Hook

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Shows how to imperatively update the content of an element managed by the `useShine` hook. This method is useful for dynamic changes triggered by events or logic within a React component.

```javascript
const ref = useRef<HTMLHeadingElement>(null);
const { update } = useShine(ref, { light: { position: "followMouse" } });

update({ content: "Live Updates" });

update({ content: "Hello World" });
```

--------------------------------

### Update Light Behavior with Shine Class

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Illustrates updating the light behavior, such as position and intensity, directly on a ShineJS class instance. This provides direct control over the light's properties for custom animations or effects.

```javascript
shine.update({ light: { position: "followMouse" } });

shine.update({
  light: {
    intensity: 2,
    position: { x: 320, y: 140 },
  },
});

const t = Date.now() * 0.00025 * Math.PI * 2;
shine.update({
  light: {
    position: {
      x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
      y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
    },
  },
});
```

--------------------------------

### ShineJS Mouse Follow Effect in Next.js Client Component

Source: https://shinejs.vercel.app/docs/getting-started/nextjs-client-components

Implements a mouse-following shine effect on a heading element using the Shine component from '@hazya/shinejs/react'. This component is designed for Client Components in Next.js and requires the 'use client' directive. It takes options to configure light intensity, position, blur, opacity, and shadow colors.

```jsx
"use client";

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

export function MouseFollowPreview() {
  return (
    <div 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>
  );
}

```

--------------------------------

### Update Content Text with Shine Class

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Illustrates updating the content of an element using the ShineJS class instance. This approach is suitable for non-React environments or when direct DOM manipulation is preferred.

```javascript
const shine = new Shine(element, { light: { position: "followMouse" } });
shine.update({ content: "Live Updates" });

shine.update({ content: "Hello World" });
```

--------------------------------

### Update Config Values with Shine Component

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Demonstrates updating configuration values like `offset` and `offsetPow` for a Shine component by modifying its `options` prop through React state. This provides a declarative way to change component behavior.

```jsx
const [options, setOptions] = useState<ShineOptions>({
  config: { offset: 0.08, offsetPow: 1.8 },
});

<Shine as="h2" options={options}>Live Updates</Shine>;

setOptions(prev => ({
  ...prev,
  config: { ...prev.config, offset: 0.015, offsetPow: 0 },
}));
```

--------------------------------

### Apply Typography Styles with ShineJS React Component

Source: https://shinejs.vercel.app/docs/examples/typography-options

This React component demonstrates how to use the Shine component from '@hazya/shinejs/react' to apply custom typography styles like font family, weight, and style. It configures shine options for mouse following and shadow effects.

```jsx
"use client";

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

export function TypographyExample() {
  return (
    <Shine
      as="h1"
      style={{
        fontFamily: "Georgia, 'Times New Roman', serif",
        fontWeight: 700,
        fontStyle: "italic",
      }}
      options={{
        light: { position: "followMouse", intensity: 1.15 },
        config: {
          blur: 38,
          offset: 0.12,
          opacity: 0.32,
          shadowRGB: { r: 17, g: 24, b: 39 },
        },
      }}
    >
      Typography Shine
    </Shine>
  );
}

```

--------------------------------

### Animate Light Position with Auto-Pilot (JavaScript)

Source: https://shinejs.vercel.app/docs/guides/light-position-and-intensity

Provides a JavaScript function to animate the light's position using `requestAnimationFrame`. The light follows a calculated path based on time, creating a dynamic visual effect. This uses the global 'update' function.

```javascript
const animate = () => {
  const t = Date.now() * 0.00025 * Math.PI * 2;
  update({
    light: {
      position: {
        x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
        y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
      },
    },
  });

  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);
```

--------------------------------

### Update Light Behavior with Shine Component

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Demonstrates dynamically changing the light behavior (e.g., `position`, `intensity`) of a Shine component by updating its `options` prop based on React state. This enables interactive control over the light effects.

```jsx
const [mode, setMode] = useState<"followMouse" | "fixed">("followMouse");

<Shine
  as="h2"
  options={{
    light: mode === "followMouse"
      ? { position: "followMouse" }
      : { intensity: 2, position: { x: 320, y: 140 } },
  }}>
  Live Updates
</Shine>;
```

--------------------------------

### Change Content with ShineJS useShine Hook

Source: https://shinejs.vercel.app/docs/examples/change-content

This snippet illustrates changing content imperatively using the useShine hook from ShineJS. It utilizes a button click to trigger an update function, which modifies the content of a referenced h1 element. This approach offers direct control over updates and requires React's useRef hook.

```typescript
"use client";

import { useRef } from "react";
import { useShine } from "@hazya/shinejs/react";

export function ContentSwap() {
  const ref = useRef<HTMLHeadingElement>(null);
  const { update } = useShine(ref);

  return (
    <>
      <button onClick={() => update({ content: "Hello World" })}>Hello World</button>
      <h1 ref={ref}>Change Text Demo</h1>
    </>
  );
}

```

--------------------------------

### Update Content Text with Shine Component

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Demonstrates updating the text content of a Shine component by managing its children via React state. This is a declarative approach suitable for React applications.

```jsx
const [text, setText] = useState("Live Updates");

<Shine as="h2" options={{ light: { position: "followMouse" } }}>
  {text}
</Shine>;

setText("Hello World");
```

--------------------------------

### Update Color (shadowRGB) with Shine Component

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Demonstrates updating the shadow color (`shadowRGB`) of a Shine component by modifying its `options` prop through React state. This allows for dynamic color changes in a declarative manner.

```jsx
const [options, setOptions] = useState<ShineOptions>({
  config: { shadowRGB: { r: 255, g: 0, b: 63 } },
});

<Shine as="h2" options={options}>Live Updates</Shine>;

setOptions(prev => ({
  ...prev,
  config: { ...prev.config, shadowRGB: { r: 143, g: 0, b: 255 } },
}));
```

--------------------------------

### ShineOptionsType Definition in TypeScript

Source: https://shinejs.vercel.app/docs/api/shine-options

Defines the complete option object for ShineJS constructor and update calls. It includes optional configurations for visual settings, light properties like position and intensity, class prefixes, shadow strategy, and content replacement.

```typescript
type ShineOptions = {
  config?: ShineConfigSettings;
  light?: {
    position?: { x: number; y: number } | "followMouse";
    intensity?: number;
  };
  classPrefix?: string;
  shadowProperty?: "textShadow" | "boxShadow";
  content?: string;
};
```

--------------------------------

### ShineJS React Component: Text vs Children Shadow Modes

Source: https://shinejs.vercel.app/docs/guides/text-vs-children

Demonstrates the Shine React component's automatic shadow mode selection. 'Text Only' uses textShadow, while the 'Children target' with divs uses boxShadow. Options for light and config are provided.

```jsx
"use client";

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

export function TextVsChildrenPreview() {
  const options = {
    light: {
      intensity: 1.2,
      position: "followMouse",
    },
    config: {
      blur: 36,
      opacity: 0.3,
      offset: 0.08,
      shadowRGB: { r: 24, g: 41, b: 71 },
    },
  };

  return (
    <div className="rounded-xl border p-6 dark:invert">
      <div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
        <div className="flex w-full max-w-3xl flex-col gap-8">
          <div>
            <p className="mb-4 text-sm font-medium text-slate-600">
              Text target (textShadow)
            </p>
            <Shine as="h3" className="m-0! text-7xl font-black text-slate-200" options={options}>
              Text Only
            </Shine>
          </div>
          <div>
            <p className="mb-4 text-sm font-medium text-slate-600">
              Children target (boxShadow)
            </p>
            <Shine as="div" className="grid grid-cols-2 gap-6" options={options}>
              <div className="h-16 rounded-xl bg-slate-200" />
              <div className="h-16 rounded-xl bg-slate-200" />
            </Shine>
          </div>
        </div>
      </div>
    </div>
  );
}

```

--------------------------------

### Apply Box Shadow to Image Grid with ShineJS (React)

Source: https://shinejs.vercel.app/docs/examples/box-shadow-children

This React component demonstrates how to apply a ShineJS box shadow effect to a grid of images. ShineJS automatically detects child elements and applies the boxShadow property. It requires the '@hazya/shinejs/react' package.

```tsx
"use client";

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

export function ImageGridShadow() {
  return (
    <Shine as="div" className="grid grid-cols-3 gap-4">
      <img src="/img-1.jpg" alt="1" />
      <img src="/img-2.jpg" alt="2" />
      <img src="/img-3.jpg" alt="3" />
    </Shine>
  );
}

```

--------------------------------

### Update Color (shadowRGB) with Shine Class

Source: https://shinejs.vercel.app/docs/guides/dynamic-updates

Illustrates updating the shadow color (`shadowRGB`) directly on a ShineJS class instance. This method provides direct control over the color properties of the Shine effect.

```javascript
shine.update({
  config: {
    shadowRGB: { r: 143, g: 0, b: 255 },
  },
});
```

--------------------------------

### ShineJS React Component: Manual boxShadow Override

Source: https://shinejs.vercel.app/docs/guides/text-vs-children

Shows how to manually force the Shine React component to use 'boxShadow' even for text-only elements by setting the 'shadowProperty' option. Includes light and config options.

```jsx
"use client";

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

export function ChildrenBoxShadowPreview() {
  const options = {
    light: {
      intensity: 1.2,
      position: "followMouse",
    },
    config: {
      blur: 36,
      opacity: 0.3,
      offset: 0.08,
      shadowRGB: { r: 24, g: 41, b: 71 },
    },
    shadowProperty: "boxShadow",
  };

  return (
    <div className="rounded-xl border p-6 dark:invert">
      <div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
        <div className="w-full max-w-3xl">
          <p className="mb-4 text-sm font-medium text-slate-600">
            Children target (boxShadow)
          </p>
          <Shine as="div" className="grid grid-cols-2 gap-6" options={options}>
            <div className="h-16 rounded-xl bg-slate-200" />
            <div className="h-16 rounded-xl bg-slate-200" />
          </Shine>
        </div>
      </div>
    </div>
  );
}

```

--------------------------------

### Change Content with ShineJS React Component

Source: https://shinejs.vercel.app/docs/examples/change-content

This snippet demonstrates how to change the content of a ShineJS component dynamically using React's useState hook. It allows users to click buttons to update the displayed text within an h1 element. No external dependencies beyond React and ShineJS are required.

```typescript
"use client";

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

export function ContentSwap() {
  const [content, setContent] = useState("Change Text Demo");

  return (
    <>
      <button onClick={() => setContent("Change Text Demo")}>Change Text Demo</button>
      <button onClick={() => setContent("Hello World")}>Hello World</button>
      <button onClick={() => setContent("Lorem Ipsum")}>Lorem Ipsum</button>
      <Shine as="h1">{content}</Shine>
    </>
  );
}

```

--------------------------------

### Update Shadow Color with shadowRGB (JavaScript)

Source: https://shinejs.vercel.app/docs/examples/shadow-color-cookbook

This snippet shows how to update the shadow color using the `shadowRGB` property within the `config` object. It directly sets the red, green, and blue components of the shadow color.

```javascript
update({
  config: {
    shadowRGB: { r, g, b },
  },
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.