Claude
61a40437d2
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
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
// 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>
|
|
)
|
|
}
|