Dynamic Updates

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

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

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

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

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

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

<Shine as="h2">{text}</Shine>;

setText("Hello World");

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

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

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

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

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

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>;

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

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

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

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

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