{"version":3,"file":"EmojiParticleExploder.gAzvEVmH.mjs","names":["useRef","useMemo","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/gbVEKd3wyUcgc5rFV2mt/NCQEOLkFC9NwvCtGoKAq/EmojiParticleExploder.js"],"sourcesContent":["// Emoji Particle Exploder Component\n// User request: create an emoji particle exploder where custom emojis can be added,\n// with properties for spread, angle, size variation, and speed.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";import{useRef,useState,useMemo,useCallback,startTransition}from\"react\";/**\n * EmojiParticleExploder\n *\n * Emoji particle exploder with configurable emojis, spread, angle, size variation and speed.\n *\n * @framerIntrinsicWidth 240\n * @framerIntrinsicHeight 240\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function EmojiParticleExploder(props){const{emojis=[\"😄\",\"😍\",\"😘\",\"🥰\",\"🤩\"],spread=45,angle=75,sizeVariation=.5,speed=1,particleCount=18,baseSize=28,backgroundColor=\"#000000\",emojiFont,style}=props;const containerRef=useRef(null);const inView=useInView(containerRef,{margin:\"0px\",amount:.1});const isStatic=useIsStaticRenderer();const isFixedWidth=style&&style.width===\"100%\";const particles=useMemo(()=>Array.from({length:Math.max(1,Math.round(particleCount))},(_,i)=>i),[particleCount]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{position:\"relative\",overflow:\"visible\",width:\"100%\",height:\"100%\",backgroundColor,borderRadius:16,// Enable 3D depth for particles\nperspective:600,transformStyle:\"preserve-3d\",...style,...isFixedWidth?{}:{minWidth:\"max-content\"}},children:(inView||isStatic)&&particles.map(id=>/*#__PURE__*/_jsx(EmojiParticle,{emojis:emojis,baseAngle:angle,spread:spread,sizeVariation:sizeVariation,speed:speed,baseSize:baseSize,inView:inView,isStatic:isStatic,emojiFont:emojiFont},id))});}function clamp(value,min,max){return Math.min(max,Math.max(min,value));}function EmojiParticle(props){const{emojis,baseAngle,spread,sizeVariation,speed,baseSize,inView,isStatic,emojiFont}=props;const[iteration,setIteration]=useState(0);const config=useMemo(()=>{const emoji=emojis&&emojis.length>0?emojis[Math.floor(Math.random()*emojis.length)]:\"✨\";const angleOffset=(Math.random()-.5)*spread;const angleDeg=baseAngle+angleOffset;const angleRad=angleDeg*Math.PI/180;const travelDistance=120+Math.random()*120;const startX=10+Math.random()*220;const startY=20+Math.random()*200;const endX=startX+Math.cos(angleRad)*travelDistance;const endY=startY-Math.sin(angleRad)*travelDistance;const variation=clamp(sizeVariation,0,1);const sizeFactor=1-variation/2+Math.random()*variation;const fontSize=baseSize*sizeFactor;const baseDuration=4;const duration=clamp(baseDuration/clamp(speed,.2,3),1,8);const delay=Math.random()*1.5;const opacityPeak=.9+Math.random()*.1;// Depth-of-field configuration based on Z position\nconst depthFactor=Math.random()// 0 (far) to 1 (near)\n;const z=-150+depthFactor*300// range roughly [-150, 150]\n;const depthScale=.7+depthFactor*.6// slightly larger when closer\n;return{emoji,startX,startY,endX,endY,fontSize,duration,delay,opacityPeak,z,depthScale};},[iteration,emojis,baseAngle,spread,sizeVariation,speed,baseSize]);const handleComplete=useCallback(()=>{if(isStatic||!inView)return;startTransition(()=>{setIteration(prev=>prev+1);});},[inView,isStatic]);if(isStatic){return /*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",bottom:8+Math.random()*40,left:8+Math.random()*40,fontSize:baseSize,opacity:.8,pointerEvents:\"none\",transform:`translateZ(${config.z}px) scale(${config.depthScale})`,...emojiFont},children:config.emoji});}// When not in view, do not render the particle at all to let Framer fully hide the layer\nif(!inView){return null;}return /*#__PURE__*/_jsx(motion.span,{initial:{x:config.startX,y:config.startY,opacity:0,scale:.6*config.depthScale,z:config.z},animate:{x:config.endX,y:config.endY,opacity:[0,config.opacityPeak,0],scale:[.6*config.depthScale,1*config.depthScale,.8*config.depthScale],z:config.z},transition:{duration:config.duration,delay:config.delay,ease:\"easeOut\",repeat:Infinity,repeatType:\"loop\",repeatDelay:0},onAnimationComplete:handleComplete,\"aria-hidden\":\"true\",style:{position:\"absolute\",fontSize:config.fontSize,pointerEvents:\"none\",// Remove blur so emojis stay crisp while keeping depth via 3D transform\ntransform:`translateZ(${config.z}px)`,...emojiFont},children:config.emoji});}addPropertyControls(EmojiParticleExploder,{emojis:{type:ControlType.Array,title:\"Emojis\",defaultValue:[\"😄\",\"😍\",\"😘\",\"🥰\",\"🤩\"],control:{type:ControlType.String,placeholder:\"Emoji\",defaultValue:\"😄\"},maxCount:10},spread:{type:ControlType.Number,title:\"Spread\",defaultValue:60,min:0,max:180,unit:\"\\xb0\",step:1},angle:{type:ControlType.Number,title:\"Angle\",defaultValue:75,min:0,max:360,unit:\"\\xb0\",step:1},sizeVariation:{type:ControlType.Number,title:\"Size Var\",defaultValue:.5,min:0,max:1,step:.05},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.2,max:3,step:.1},particleCount:{type:ControlType.Number,title:\"Count\",defaultValue:18,min:4,max:60,step:1,displayStepper:false},baseSize:{type:ControlType.Number,title:\"Base Size\",defaultValue:28,min:10,max:80,step:1,unit:\"px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},emojiFont:{type:ControlType.Font,title:\"Emoji Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"28px\",variant:\"Regular\",letterSpacing:\"0em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"EmojiParticleExploder\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"240\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"240\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./EmojiParticleExploder.map"],"mappings":"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"}