How to use

import { Skiper102, DebugPanel } from "@/components/v1/skiper102";
import { useMotionValue } from "motion/react";
import { useState } from "react";

// Using the demo component
const DemoSkiper102 = () => {
  return (
    <div className="h-screen w-full">
      <Skiper102 />
    </div>
  );
};

// Using DebugPanel directly
const CustomDebug = () => {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const [count, setCount] = useState(0);

  return (
    <div
      onMouseMove={(e) => {
        mouseX.set(e.clientX);
        mouseY.set(e.clientY);
      }}
      onClick={() => setCount((prev) => prev + 1)}
    >
      <DebugPanel mouseX={mouseX} mouseY={mouseY} count={count} />
    </div>
  );
};

Important note

• Accepts any object or motion values to display
• Automatically formats motion values for display
• Useful for debugging during development
• Position with className for custom placement