Text vs Children

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

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

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

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

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

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

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

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