import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
const images = [
'https://cdn.imweb.me/thumbnail/20250418/fb765b0e6231a.png',
'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
];
const Wrapper = styled.div`
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
`;
const StyledImage = styled(motion.img)`
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
`;
const directions = [
{ x: -400, y: -200 }, // 왼쪽 위
{ x: 400, y: -200 }, // 오른쪽 위
{ x: 0, y: 400 }, // 아래
];
const HeroImages = () => {
const [scattered, setScattered] = useState(false);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 50) setScattered(true);
else setScattered(false);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
{images.map((src, idx) => (
