manfromexistence

'use client';
import React, { useRef, useEffect } from 'react';

const cn = (...classes) => classes.filter(Boolean).join(' ');

const useMousePosition = (ref) => {
  useEffect(() => {
    if (window.matchMedia('(pointer: coarse)').matches) {
      return;
    }

manfromexistence

'use client';
import React, { useRef, useEffect } from 'react';

const cn = (...classes) => classes.filter(Boolean).join(' ');

const useMousePosition = (ref) => {
  useEffect(() => {
    if (window.matchMedia('(pointer: coarse)').matches) {
      return;
    }

manfromexistence

'use client';
import React, { useRef, useEffect } from 'react';

const cn = (...classes) => classes.filter(Boolean).join(' ');

const useMousePosition = (ref) => {
  useEffect(() => {
    if (window.matchMedia('(pointer: coarse)').matches) {
      return;
    }

manfromexistence

// You must place this file in a Next.js App Router project.
// This is now a client component to allow for hooks and event listeners.
'use client';

import React, { useRef, useEffect } from 'react';

// --- Custom Hook for Mouse Position ---
// This hook tracks the mouse's position relative to the center of an element
// and updates a CSS custom property '--angle' to be used in styles.
const useMousePosition = (elementRef: React.RefObject<HTMLElement>) => {

manfromexistence

// You can place this file at app/page.tsx in your Next.js App Router project.
// Make sure you have a `globals.css` file to set the base background color.

// In your `app/globals.css` or a similar global stylesheet, add:
/*
body {
  background-color: #e0e0e0; // A light gray to match the image background
}
*/

manfromexistence

'use client';

import React, { useState, useEffect, useRef } from 'react';

// --- Custom Hook for Mouse Position ---
// Encapsulates the logic for tracking the mouse angle.
const useMousePosition = (elementRef: React.RefObject<HTMLElement>) => {
  useEffect(() => {
    const element = elementRef.current;
    if (!element) return;