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