{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/yYw68oxJPR6GMAVuJz6p/5H3RDJ4b7whOWIvoZZll/ResponsiveImageMasked.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function ResponsiveImageMasked(props){const{radius,image,isMixed,topLeft,topRight,bottomRight,bottomLeft,children,type,animationDirection,animationDuration,maskColor}=props;const borderRadius=isMixed?`${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`:`${radius}px`;// Mask animation using translateX\n// const maskVariants = (dir) => ({\n//     hidden: {\n//         x: dir === \"left-to-right\" ? \"0%\" : \"100%\", // Start fully covering the image\n//     },\n//     visible: {\n//         x: dir === \"left-to-right\" ? \"100%\" : \"0%\", // Slide the mask off to reveal the image\n//         transition: { duration: animationDuration, ease: \"easeInOut\" },\n//     },\n// })\nconst maskVariants=dir=>({hidden:{x:dir===\"left-to-right\"?\"0%\":\"0%\"},visible:{x:dir===\"left-to-right\"?\"100%\":\"-100%\",transition:{duration:animationDuration,ease:\"easeInOut\"}}});return /*#__PURE__*/_jsxs(\"div\",{style:{...containerStyle,borderRadius,minHeight:\"200px\",width:\"100%\",position:\"relative\",overflow:\"hidden\"},children:[type===\"component\"&&children,type===\"image\"&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(motion.div,{initial:\"hidden\",whileInView:\"visible\",viewport:{once:true,amount:.3},variants:maskVariants(animationDirection),style:maskStyle(animationDirection,maskColor)}),/*#__PURE__*/_jsx(\"img\",{style:{...squareStyle,borderRadius},src:(image===null||image===void 0?void 0:image.src)||\"https://images.unsplash.com/photo-1682687218147-9806132dc697?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",srcSet:image===null||image===void 0?void 0:image.srcSet,alt:(image===null||image===void 0?void 0:image.alt)||\"Image\"})]})]});}addPropertyControls(ResponsiveImageMasked,{radius:{type:ControlType.FusedNumber,title:\"Radius\",defaultValue:0,toggleKey:\"isMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"topLeft\",\"topRight\",\"bottomRight\",\"bottomLeft\"],valueLabels:[\"TL\",\"TR\",\"BR\",\"BL\"],min:0},type:{type:ControlType.Enum,options:[\"image\",\"component\"],optionTitles:[\"Image\",\"Component\"],defaultValue:\"image\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},children:{type:ControlType.ComponentInstance,hidden(props){return props.type===\"image\";}},image:{type:ControlType.ResponsiveImage,hidden(props){return props.type===\"component\";}},animationDirection:{type:ControlType.Enum,title:\"Animation Direction\",options:[\"left-to-right\",\"right-to-left\"],optionTitles:[\"Left to Right\",\"Right to Left\"],defaultValue:\"left-to-right\"},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:1,min:.1,max:10,step:.1},maskColor:{// New property for customizing the mask color\ntype:ControlType.Color,title:\"Mask Color\",defaultValue:\"#ffffff\"}});// Styling for the container and image\nconst containerStyle={display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};const squareStyle={width:\"100%\",height:\"auto\"};// Mask style, where we adjust the direction and borderRadius to match the image\nconst maskStyle=(direction,maskColor)=>({position:\"absolute\",top:0,left:direction===\"left-to-right\"?0:\"auto\",right:direction===\"right-to-left\"?0:\"auto\",bottom:0,width:\"107%\",height:\"107%\",backgroundColor:maskColor,zIndex:3});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ResponsiveImageMasked\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ResponsiveImageMasked.map"],
  "mappings": "4EAGkB,SAARA,EAAuCC,EAAM,CAAC,GAAK,CAAC,OAAAC,EAAO,MAAAC,EAAM,QAAAC,EAAQ,QAAAC,EAAQ,SAAAC,EAAS,YAAAC,EAAY,WAAAC,EAAW,SAAAC,EAAS,KAAAC,EAAK,mBAAAC,EAAmB,kBAAAC,EAAkB,UAAAC,CAAS,EAAEZ,EAAYa,EAAaV,EAAQ,GAAGC,CAAO,MAAMC,CAAQ,MAAMC,CAAW,MAAMC,CAAU,KAAK,GAAGN,CAAM,KAU3Ra,EAAaC,IAAM,CAAC,OAAO,CAAC,EAAwB,IAAS,EAAE,QAAQ,CAAC,EAAEA,IAAM,gBAAgB,OAAO,QAAQ,WAAW,CAAC,SAASJ,EAAkB,KAAK,WAAW,CAAC,CAAC,GAAG,OAAoBK,EAAM,MAAM,CAAC,MAAM,CAAC,GAAGC,EAAe,aAAAJ,EAAa,UAAU,QAAQ,MAAM,OAAO,SAAS,WAAW,SAAS,QAAQ,EAAE,SAAS,CAACJ,IAAO,aAAaD,EAASC,IAAO,SAAsBO,EAAME,EAAU,CAAC,SAAS,CAAcC,EAAKC,EAAO,IAAI,CAAC,QAAQ,SAAS,YAAY,UAAU,SAAS,CAAC,KAAK,GAAK,OAAO,EAAE,EAAE,SAASN,EAAaJ,CAAkB,EAAE,MAAMW,EAAUX,EAAmBE,CAAS,CAAC,CAAC,EAAeO,EAAK,MAAM,CAAC,MAAM,CAAC,GAAGG,EAAY,aAAAT,CAAY,EAAE,IAAyCX,GAAM,KAAM,wKAAwK,OAA2CA,GAAM,OAAO,IAAyCA,GAAM,KAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACqB,EAAoBxB,EAAsB,CAAC,OAAO,CAAC,KAAKyB,EAAY,YAAY,MAAM,SAAS,aAAa,EAAE,UAAU,UAAU,aAAa,CAAC,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,WAAW,cAAc,YAAY,EAAE,YAAY,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,KAAKA,EAAY,KAAK,QAAQ,CAAC,QAAQ,WAAW,EAAE,aAAa,CAAC,QAAQ,WAAW,EAAE,aAAa,QAAQ,wBAAwB,GAAK,0BAA0B,UAAU,EAAE,SAAS,CAAC,KAAKA,EAAY,kBAAkB,OAAOxB,EAAM,CAAC,OAAOA,EAAM,OAAO,OAAQ,CAAC,EAAE,MAAM,CAAC,KAAKwB,EAAY,gBAAgB,OAAOxB,EAAM,CAAC,OAAOA,EAAM,OAAO,WAAY,CAAC,EAAE,mBAAmB,CAAC,KAAKwB,EAAY,KAAK,MAAM,sBAAsB,QAAQ,CAAC,gBAAgB,eAAe,EAAE,aAAa,CAAC,gBAAgB,eAAe,EAAE,aAAa,eAAe,EAAE,kBAAkB,CAAC,KAAKA,EAAY,OAAO,MAAM,qBAAqB,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,EAAE,UAAU,CACv5D,KAAKA,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,CAAC,CAAC,EAClE,IAAMP,EAAe,CAAC,QAAQ,OAAO,eAAe,SAAS,WAAW,SAAS,SAAS,QAAQ,EAAQK,EAAY,CAAC,MAAM,OAAO,OAAO,MAAM,EAC3ID,EAAU,CAACI,EAAUb,KAAa,CAAC,SAAS,WAAW,IAAI,EAAE,KAAKa,IAAY,gBAAgB,EAAE,OAAO,MAAMA,IAAY,gBAAgB,EAAE,OAAO,OAAO,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgBb,EAAU,OAAO,CAAC",
  "names": ["ResponsiveImageMasked", "props", "radius", "image", "isMixed", "topLeft", "topRight", "bottomRight", "bottomLeft", "children", "type", "animationDirection", "animationDuration", "maskColor", "borderRadius", "maskVariants", "dir", "u", "containerStyle", "l", "p", "motion", "maskStyle", "squareStyle", "addPropertyControls", "ControlType", "direction"]
}