Barbier-Website für Amin B. Ahmadi (Kaiserslautern)

One-Pager mit Vite, React, Tailwind und Motion: WebGL-Seidenhintergrund,
Chrom-Wortmarke, Scroll-Laufband, Preisliste mit Direktbuchung pro Leistung
(Setmore-Deep-Links), Team-Raster mit Farb-Spotlight, Öffnungszeiten mit
Live-Status sowie Impressum und Datenschutz. Logo ist ein Platzhalter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF

src/components/Magnetic.tsx

@@ -0,0 +1,36 @@
+// Magnet-Effekt, inspiriert von „Magnet“ aus React Bits (reactbits.dev).
+import { motion, useMotionValue, useReducedMotion, useSpring } from 'motion/react'
+import { useRef, type ReactNode } from 'react'
+import { cn } from '../lib/cn'
+
+type Props = { children: ReactNode; strength?: number; className?: string }
+
+export function Magnetic({ children, strength = 0.35, className }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const reduce = useReducedMotion()
+  const x = useSpring(useMotionValue(0), { stiffness: 220, damping: 18, mass: 0.4 })
+  const y = useSpring(useMotionValue(0), { stiffness: 220, damping: 18, mass: 0.4 })
+
+  const onMove = (e: React.PointerEvent) => {
+    if (reduce || e.pointerType !== 'mouse' || !ref.current) return
+    const r = ref.current.getBoundingClientRect()
+    x.set((e.clientX - (r.left + r.width / 2)) * strength)
+    y.set((e.clientY - (r.top + r.height / 2)) * strength)
+  }
+  const reset = () => {
+    x.set(0)
+    y.set(0)
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      onPointerMove={onMove}
+      onPointerLeave={reset}
+      style={{ x, y }}
+      className={cn('inline-block', className)}
+    >
+      {children}
+    </motion.div>
+  )
+}