Микро-интеракции, курсорные эффекты и звуковой отклик интерфейса

/**
 * Глобальный синглтон AudioContext для соблюдения системных квот браузера
 */
let sharedAudioContext: AudioContext | null = null;

function getSharedAudioContext(): AudioContext | null {
  if (typeof window === 'undefined') return null;

  if (!sharedAudioContext) {
    const AudioCtx =
      window.AudioContext ||
      (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;

    if (AudioCtx) {
      sharedAudioContext = new AudioCtx();
    }
  }

  // Разблокировка контекста при первом клике пользователя (Autoplay policy)
  if (sharedAudioContext && sharedAudioContext.state === 'suspended') {
    void sharedAudioContext.resume();
  }

  return sharedAudioContext;
}

export type HapticSoundVariant = 'click' | 'pop' | 'switch' | 'success';

/**
 * Процедурный синтез тактильного звукового щелчка в памяти устройства
 */
export function playHapticSound(variant: HapticSoundVariant = 'click'): void {
  const ctx = getSharedAudioContext();
  if (!ctx) return;

  const now = ctx.currentTime;
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.connect(gain);
  gain.connect(ctx.destination);

  switch (variant) {
    case 'click': {
      // Механический микро-клик: резкий спад частоты 1200 -> 350 Гц за 10 мс
      osc.type = 'sine';
      osc.frequency.setValueAtTime(1200, now);
      osc.frequency.exponentialRampToValueAtTime(350, now + 0.01);

      gain.gain.setValueAtTime(0.25, now);
      // Конечное значение обязательно > 0 для исключения ln(0)
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.012);

      osc.start(now);
      osc.stop(now + 0.012);
      break;
    }

    case 'pop': {
      // Мягкий каплевидный всплеск
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(320, now);
      osc.frequency.exponentialRampToValueAtTime(680, now + 0.03);

      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.035);

      osc.start(now);
      osc.stop(now + 0.035);
      break;
    }

    case 'switch': {
      // Щелчок тумблера
      osc.type = 'sine';
      osc.frequency.setValueAtTime(850, now);
      gain.gain.setValueAtTime(0.18, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.008);

      osc.start(now);
      osc.stop(now + 0.008);
      break;
    }

    case 'success': {
      // Двухтональный мажорный аккорд успешного действия (C5 -> E5)
      osc.type = 'sine';
      osc.frequency.setValueAtTime(523.25, now);
      osc.frequency.setValueAtTime(659.25, now + 0.04);

      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);

      osc.start(now);
      osc.stop(now + 0.12);
      break;
    }
  }
}

'use client';

import * as React from 'react';

export interface UseMagneticOptions {
  /** Сила притяжения (от 0 до 1, по умолчанию 0.32) */
  readonly factor?: number;
  /** Радиус зоны притяжения в пикселях (по умолчанию 110) */
  readonly radius?: number;
}

export function useMagneticEffect<T extends HTMLElement>(
  options: UseMagneticOptions = {}
): React.RefObject<T | null> {
  const elementRef = React.useRef<T | null>(null);
  const { factor = 0.32, radius = 110 } = options;

  React.useEffect(() => {
    const el = elementRef.current;
    if (!el) return;

    let rafId: number | null = null;
    let targetX = 0;
    let targetY = 0;
    let currentX = 0;
    let currentY = 0;

    // Пружинная интерполяция в цикле RAF
    const updatePosition = () => {
      currentX += (targetX - currentX) * 0.18;
      currentY += (targetY - currentY) * 0.18;

      el.style.transform = `translate3d(${currentX.toFixed(2)}px, ${currentY.toFixed(2)}px, 0)`;

      if (Math.abs(targetX - currentX) > 0.05 || Math.abs(targetY - currentY) > 0.05) {
        rafId = requestAnimationFrame(updatePosition);
      } else {
        rafId = null;
      }
    };

    const handlePointerMove = (e: PointerEvent) => {
      // Игнорируем сенсорный ввод на мобильных устройствах
      if (e.pointerType === 'touch') return;

      const rect = el.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      const dx = e.clientX - centerX;
      const dy = e.clientY - centerY;
      const distance = Math.hypot(dx, dy);

      if (distance < radius) {
        targetX = dx * factor;
        targetY = dy * factor;
      } else {
        targetX = 0;
        targetY = 0;
      }

      if (!rafId) {
        rafId = requestAnimationFrame(updatePosition);
      }
    };

    const handlePointerLeave = () => {
      targetX = 0;
      targetY = 0;
      if (!rafId) {
        rafId = requestAnimationFrame(updatePosition);
      }
    };

    window.addEventListener('pointermove', handlePointerMove, { passive: true });
    el.addEventListener('pointerleave', handlePointerLeave);

    return () => {
      window.removeEventListener('pointermove', handlePointerMove);
      el.removeEventListener('pointerleave', handlePointerLeave);
      if (rafId) cancelAnimationFrame(rafId);
    };
  }, [factor, radius]);

  return elementRef;
}

'use client';

import * as React from 'react';
import { useMagneticEffect } from '@/hooks/useMagneticEffect';
import { playHapticSound, type HapticSoundVariant } from '@/lib/hapticAudio';

export interface MagneticActionButtonProps {
  readonly children: React.ReactNode;
  readonly onClick?: () => void;
  readonly soundVariant?: HapticSoundVariant;
  readonly className?: string;
}

export function MagneticActionButton({
  children,
  onClick,
  soundVariant = 'click',
  className = '',
}: MagneticActionButtonProps) {
  const buttonRef = useMagneticEffect<HTMLButtonElement>({
    factor: 0.3,
    radius: 100,
  });

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    playHapticSound(soundVariant);
    onClick?.();
  };

  return (
    <button
      ref={buttonRef}
      type="button"
      onClick={handleClick}
      className={`relative inline-flex items-center justify-center px-6 py-3 rounded-2xl font-bold text-sm text-white bg-gradient-to-r from-accent-violet to-purple-600 border border-accent-violet/40 shadow-lg shadow-accent-violet/20 active:scale-95 transition-shadow duration-200 outline-none focus-visible:ring-2 focus-visible:ring-accent-cyan cursor-pointer select-none ${className}`}
    >
      <span className="relative z-10 pointer-events-none flex items-center gap-2">
        {children}
      </span>
    </button>
  );
}