ShineJS

Auto Pilot

Animate light position over time with requestAnimationFrame.

This recreates the auto-pilot motion from apps/demo/src/app/auto-pilot/page.tsx.

Shine Auto Pilot

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