Shine Component

Signature

<Shine as?: keyof HTMLElementTagNameMap options?: ShineOptions>
  {children}
</Shine>

Props

• as: optional HTML tag to render (defaults to "div").
• options: optional ShineOptions object.
• children: rendered content. String/number children are synced to options.content.
• Other standard HTML attributes are forwarded to the rendered element.

Behavior

• Creates one imperative Shine instance on mount.
• Destroys the instance on unmount.
• Applies prop changes using diffed shine.update(...) calls instead of re-creating the instance.
• Safe for SSR because DOM work runs after mount in Client Components.

Example

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