59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
// Animate decorative snack images with gentle randomized motion.
|
|
|
|
import type {FloatingSnack} from '@/types/domain';
|
|
import {useEffect, useRef} from 'react';
|
|
import {gsap} from 'gsap';
|
|
|
|
/**
|
|
* Renders the centralized `floatingSnacks` config as absolutely-positioned
|
|
* images and gives each one a gentle, randomized floating drift via GSAP.
|
|
* Positions/sizes/images all come from data/content.ts — edit there only.
|
|
*/
|
|
export default function FloatingItems({items}: {items: FloatingSnack[]}) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const nodes = containerRef.current?.querySelectorAll('[data-float-item]');
|
|
if (!nodes) return;
|
|
|
|
const tweens = Array.from(nodes).map((node, i) => {
|
|
const drift = 14 + Math.random() * 14;
|
|
const rotate = 4 + Math.random() * 6;
|
|
return gsap.to(node, {
|
|
y: `+=${drift}`,
|
|
rotate: i % 2 === 0 ? rotate : -rotate,
|
|
duration: 3.5 + Math.random() * 2.5,
|
|
ease: 'sine.inOut',
|
|
yoyo: true,
|
|
repeat: -1,
|
|
delay: Math.random() * 1.5,
|
|
});
|
|
});
|
|
|
|
return () => tweens.forEach((t) => t.kill());
|
|
}, [items]);
|
|
|
|
return (
|
|
<div ref={containerRef} className="absolute inset-0 pointer-events-none hidden md:block">
|
|
{items.map((item) => (
|
|
<img
|
|
key={item.id}
|
|
data-float-item
|
|
src={item.image}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="absolute drop-shadow-[0_8px_20px_rgba(0,0,0,0.35)]"
|
|
style={{
|
|
top: item.top,
|
|
left: item.left,
|
|
width: item.size,
|
|
height: 'auto',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|