{"version":3,"file":"Rectangle_Random.B__pbJsO.mjs","names":["React.useRef","React.useState","p"],"sources":["https:/framerusercontent.com/modules/UYZTSOb7gKn1UZfItQSA/goZcp6LiiWpD7f0HzZyR/Rectangle_Random.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";// /**\n//  *\n//  * @framerIntrinsicWidth 1400\n//  * @framerIntrinsicHeight 1000\n//  *\n//  * @framerDisableUnlink\n//  *\n//  * @framerSupportedLayoutWidth fit\n//  * @framerSupportedLayoutHeight fit\n//  */\nexport default function ParticleRepulsion(props){const canvasRef=React.useRef(null);const containerRef=React.useRef(null);const particles=React.useRef([]);const mouse=React.useRef({x:-1e3,y:-1e3});const animationRef=React.useRef(null);// State để theo dõi xem component có đang hiển thị không\nconst[isVisible,setIsVisible]=React.useState(false);const{colors,count,baseSize,speed,repulsionRadius,repulsionForce,direction}=props;// Cấu hình Intersection Observer\nReact.useEffect(()=>{const observer=new IntersectionObserver(([entry])=>{// Cập nhật trạng thái hiển thị\nsetIsVisible(entry.isIntersecting);},{threshold:.1}// Chạy khi ít nhất 10% component xuất hiện\n);if(containerRef.current){observer.observe(containerRef.current);}return()=>observer.disconnect();},[]);React.useEffect(()=>{// Nếu không hiển thị thì không chạy logic animation\nif(!isVisible){if(animationRef.current)cancelAnimationFrame(animationRef.current);return;}const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");let width,height;const setupCanvas=()=>{const dpr=window.devicePixelRatio||1;width=containerRef.current.clientWidth;height=containerRef.current.clientHeight;canvas.width=width*dpr;canvas.height=height*dpr;ctx.scale(dpr,dpr);};// isInitial = true khi hạt được tạo lần đầu tiên lúc load trang\nconst createParticle=(isInitial=false)=>{let startX,startY,vx,vy;// Đảm bảo có màu mặc định nếu mảng colors chưa được thiết lập\nconst safeColors=colors&&colors.length>0?colors:[\"#000000\"];const color=safeColors[Math.floor(Math.random()*safeColors.length)];const size=baseSize*(.6+Math.random()*.6);if(direction===\"leftToRight\"){// Trái qua phải: Nếu là lần đầu, rải đều khắp màn hình. Nếu là sinh ra lại, bắt đầu từ mép trái.\nstartX=isInitial?Math.random()*width:-size-20;startY=Math.random()*height;vx=Math.random()*speed+speed*.2// Luôn dương (chạy sang phải)\n;vy=(Math.random()-.5)*speed*.5// Bay chéo nhẹ lên/xuống\n;}else if(direction===\"rightToLeft\"){// Phải qua trái\nstartX=isInitial?Math.random()*width:width+size+20;startY=Math.random()*height;vx=-(Math.random()*speed+speed*.2)// Luôn âm (chạy sang trái)\n;vy=(Math.random()-.5)*speed*.5;}else{// Mặc định: Từ giữa ra\nconst dirX=Math.random()>.5?1:-1;startX=width/2;startY=height/2+(Math.random()*20-10);vx=dirX*(Math.random()*speed+speed*.2);vy=(Math.random()-.5)*speed*.8;}return{x:startX,y:startY,vx:vx,vy:vy,color:color,size:size};};const initParticles=()=>{particles.current=[];for(let i=0;i<count;i++){const p=createParticle(true);// Phân tán hạt nếu chế độ là \"Từ giữa ra\"\nif(direction===\"center\"){const fastForward=Math.random()*300;p.x+=p.vx*fastForward;p.y+=p.vy*fastForward;}particles.current.push(p);}};setupCanvas();// Gọi initParticles mỗi khi thuộc tính thay đổi để update số lượng hoặc hướng đi mới\ninitParticles();const render=()=>{ctx.clearRect(0,0,width,height);particles.current.forEach((p,index)=>{const dx=p.x-mouse.current.x;const dy=p.y-mouse.current.y;const distance=Math.sqrt(dx*dx+dy*dy);if(distance<repulsionRadius){const forceDirectionX=dx/distance;const forceDirectionY=dy/distance;const force=(repulsionRadius-distance)/repulsionRadius;p.vx+=forceDirectionX*force*repulsionForce;p.vy+=forceDirectionY*force*repulsionForce;}p.x+=p.vx;p.y+=p.vy;ctx.fillStyle=p.color;ctx.fillRect(p.x-p.size/2,p.y-p.size/2,p.size,p.size);// Kiểm tra xem hạt đã bay hẳn ra khỏi màn hình chưa\nif(p.x<-100||p.x>width+100||p.y<-100||p.y>height+100){// Sinh ra một hạt mới (isInitial = false)\nparticles.current[index]=createParticle(false);}});animationRef.current=requestAnimationFrame(render);};render();const handleResize=()=>{setupCanvas();initParticles();};window.addEventListener(\"resize\",handleResize);return()=>{cancelAnimationFrame(animationRef.current);window.removeEventListener(\"resize\",handleResize);};},[isVisible,colors,count,baseSize,speed,repulsionRadius,repulsionForce,direction]);const handleMouseMove=e=>{const rect=canvasRef.current.getBoundingClientRect();mouse.current={x:e.clientX-rect.left,y:e.clientY-rect.top};};const handleMouseLeave=()=>{mouse.current={x:-1e3,y:-1e3};};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\"},onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave})});}ParticleRepulsion.defaultProps={direction:\"center\"};addPropertyControls(ParticleRepulsion,{direction:{type:ControlType.Enum,title:\"Direction\",options:[\"center\",\"leftToRight\",\"rightToLeft\"],optionTitles:[\"Từ giữa ra\",\"Tr\\xe1i qua phải\",\"Phải qua tr\\xe1i\"]},colors:{type:ControlType.Array,control:{type:ControlType.Color},title:\"Colors\"},count:{type:ControlType.Number,title:\"Shape Count\",min:1,max:100,step:1},baseSize:{type:ControlType.Number,title:\"Base Size\",min:5,max:50},speed:{type:ControlType.Number,title:\"Speed\",min:.1,max:10,step:.1},repulsionRadius:{type:ControlType.Number,title:\"Hover Radius\",min:50,max:400},repulsionForce:{type:ControlType.Number,title:\"Hover Force\",min:.1,max:5,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ParticleRepulsion\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerIntrinsicHeight\":\"\",\"framerSupportedLayoutWidth\":\"\",\"framerSupportedLayoutHeight\":\"\",\"framerIntrinsicWidth\":\"\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Rectangle_Random.map"],"mappings":"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"}