'use client'
import * as React from 'react'
import { motion, useReducedMotion } from 'framer-motion'
import { cn } from '@/lib/utils'
/**
* useMounted — returns true after the component has hydrated on the client.
* Used to gate Framer Motion animations that would otherwise cause SSR/client
* hydration mismatches.
*/
function useMounted() {
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
setMounted(true)
}, [])
return mounted
}
/**
* Round a number to 3 decimal places and return as a string.
*
* Used for SVG geometry attributes computed with Math.sin / Math.cos /
* Math.PI. Different JS engines can produce results that differ in the
* 17th significant digit, which React serializes differently on SSR vs
* client, triggering hydration mismatch warnings.
*/
function round3(n: number): string {
return n.toFixed(3)
}
/**
* Animated molecular structure background.
* Renders an SVG with floating molecule nodes and connecting bonds.
*
* Before mount (SSR + first client render), renders plain static circles
* so the DOM is identical on both sides. After mount, switches to
* animated motion.circle elements.
*/
export function MoleculeBackground({
className,
density = 'normal',
}: {
className?: string
density?: 'sparse' | 'normal' | 'dense'
}) {
const reduce = useReducedMotion()
const mounted = useMounted()
const count = density === 'sparse' ? 8 : density === 'dense' ? 18 : 12
const nodes = React.useMemo(
() =>
Array.from({ length: count }, (_, i) => {
const xNum = 10 + ((i * 73) % 90)
const yNum = 10 + ((i * 47) % 80)
const rNum = 3 + ((i * 13) % 5)
return {
id: i,
xNum,
yNum,
rNum,
x: round3(xNum),
y: round3(yNum),
rGlow: round3(rNum * 0.4),
rCore: round3(rNum * 0.18),
yShift: round3(yNum - 1.5),
delay: (i % 6) * 0.6,
}
}),
[count]
)
const bonds = React.useMemo(() => {
const out: [number, number][] = []
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const a = nodes[i]
const b = nodes[j]
const d = Math.hypot(a.xNum - b.xNum, a.yNum - b.yNum)
if (d < 28) out.push([i, j])
}
}
return out
}, [nodes])
const shouldAnimate = mounted && !reduce
return (
)
}
/**
* Animated DNA double-helix SVG.
*
* Before mount, renders static paths/lines. After mount, switches to
* animated motion elements.
*/
export function DNAHelix({ className }: { className?: string }) {
const reduce = useReducedMotion()
const mounted = useMounted()
const rungs = React.useMemo(() => Array.from({ length: 16 }, (_, i) => i), [])
const shouldAnimate = mounted && !reduce
return (
)
}
/**
* Slowly rotating orbital rings — used as decorative background motif.
*/
export function OrbitalRings({ className }: { className?: string }) {
const reduce = useReducedMotion()
const mounted = useMounted()
const shouldAnimate = mounted && !reduce
return (
)
}