{"version":3,"file":"Button_rolling.BwsPYLTG.mjs","names":["useState","useRef","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/TLamLQ5YniGxIV4578tP/2XdxvjujISMFbT712rA0/Button_rolling.js"],"sourcesContent":["// Built for samnad.com /v2 — AI Product Designer portfolio.\n//\n// User instructions for this component:\n// \"Rolling text hover on every link and button. The label is duplicated inside\n// an overflow hidden mask. On hover, the first copy slides up and out while the\n// second slides in from below. Duration 0.45s, ease cubic bezier (0.65, 0, 0.35, 1).\n// Button arrows: on hover, the arrow slides out to the right while a second\n// arrow enters from the left. Magnetic pull on primary CTAs, max 8px.\n// Respect prefers reduced motion. Inline styles only. Expose all text, colors,\n// media and timing as property controls. Clean up animations on unmount.\"\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useCallback,useRef,useState,startTransition}from\"react\";import{motion,useSpring,useReducedMotion}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const EASE=\"cubic-bezier(0.65, 0, 0.35, 1)\";function Arrow({size,color}){return /*#__PURE__*/_jsx(\"svg\",{width:size,height:size,viewBox:\"0 0 16 16\",fill:\"none\",\"aria-hidden\":\"true\",style:{display:\"block\",flexShrink:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M2.5 8h11M9 3.5 13.5 8 9 12.5\",stroke:color,strokeWidth:\"1.4\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})});}/**\n * V2 / Rolling Button\n *\n * @framerIntrinsicWidth 180\n * @framerIntrinsicHeight 52\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function V2RollingButton(props){const{label,link,openInNewTab,variant,showArrow,magnetic,magneticStrength,duration,background,foreground,borderColor,fontSize,fontWeight,letterSpacing,paddingX,paddingY,style}=props;const[hovered,setHovered]=useState(false);const wrapRef=useRef(null);const isStatic=useIsStaticRenderer();const reduced=useReducedMotion();const motionOff=isStatic||reduced===true;// Magnetic pull. Springs are owned by framer-motion and torn down with the\n// component, so there is nothing to clean up manually here.\nconst x=useSpring(0,{stiffness:220,damping:18,mass:.4});const y=useSpring(0,{stiffness:220,damping:18,mass:.4});const pullActive=magnetic&&!motionOff;const handleMove=useCallback(event=>{if(!pullActive)return;const node=wrapRef.current;if(!node)return;const rect=node.getBoundingClientRect();if(!rect.width||!rect.height)return;const relX=(event.clientX-(rect.left+rect.width/2))/(rect.width/2);const relY=(event.clientY-(rect.top+rect.height/2))/(rect.height/2);const clamp=v=>Math.max(-1,Math.min(1,v));x.set(clamp(relX)*magneticStrength);y.set(clamp(relY)*magneticStrength);},[pullActive,magneticStrength,x,y]);const handleEnter=useCallback(()=>{startTransition(()=>setHovered(true));},[]);const handleLeave=useCallback(()=>{startTransition(()=>setHovered(false));x.set(0);y.set(0);},[x,y]);// A static canvas render should still read as the button, so show the\n// resting state rather than an empty mask.\nconst rolled=hovered&&!motionOff;const isPrimary=variant===\"primary\";const isText=variant===\"text\";const surface=isText?\"transparent\":isPrimary?background:\"transparent\";const border=isText?\"none\":isPrimary?\"none\":`1px solid ${borderColor}`;const transition=motionOff?\"none\":`transform ${duration}s ${EASE}`;const lineHeight=1;const maskHeight=Math.ceil(fontSize*lineHeight);const arrowSize=Math.round(fontSize*.95);const labelStyle={display:\"block\",height:maskHeight,width:\"max-content\",margin:0,fontFamily:'\"Albert Sans\", sans-serif',fontSize,fontWeight,lineHeight,letterSpacing:`${letterSpacing}em`,color:foreground,whiteSpace:\"nowrap\"};const inner=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"relative\",display:\"block\",height:maskHeight,overflow:\"hidden\",flexShrink:0},children:/*#__PURE__*/_jsxs(\"span\",{style:{display:\"block\",transform:rolled?\"translateY(-50%)\":\"translateY(0%)\",transition,willChange:\"transform\"},children:[/*#__PURE__*/_jsx(\"span\",{style:labelStyle,children:label}),/*#__PURE__*/_jsx(\"span\",{style:labelStyle,\"aria-hidden\":\"true\",children:label})]})}),showArrow&&/*#__PURE__*/_jsxs(\"span\",{style:{position:\"relative\",display:\"block\",width:arrowSize,height:arrowSize,overflow:\"hidden\",flexShrink:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",inset:0,transform:rolled?\"translateX(140%)\":\"translateX(0%)\",transition,willChange:\"transform\"},children:/*#__PURE__*/_jsx(Arrow,{size:arrowSize,color:foreground})}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,transform:rolled?\"translateX(0%)\":\"translateX(-140%)\",transition,willChange:\"transform\"},children:/*#__PURE__*/_jsx(Arrow,{size:arrowSize,color:foreground})})]})]});const surfaceStyle={position:\"relative\",display:\"inline-flex\",alignItems:\"center\",gap:showArrow?Math.round(fontSize*.5):0,width:style?.width===\"100%\"?\"100%\":\"max-content\",justifyContent:\"center\",boxSizing:\"border-box\",padding:isText?0:`${paddingY}px ${paddingX}px`,borderRadius:999,background:surface,border,textDecoration:\"none\",cursor:\"pointer\",userSelect:\"none\",WebkitTapHighlightColor:\"transparent\"};return /*#__PURE__*/_jsx(motion.div,{ref:wrapRef,onMouseMove:handleMove,onMouseEnter:handleEnter,onMouseLeave:handleLeave,style:{position:\"relative\",display:\"inline-flex\",width:style?.width===\"100%\"?\"100%\":\"max-content\",...pullActive?{x,y}:null,...style},children:link?/*#__PURE__*/_jsx(\"a\",{href:link,target:openInNewTab?\"_blank\":undefined,rel:openInNewTab?\"noopener noreferrer\":undefined,style:surfaceStyle,children:inner}):/*#__PURE__*/_jsx(\"button\",{type:\"button\",style:{...surfaceStyle,font:\"inherit\"},children:inner})});}addPropertyControls(V2RollingButton,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Book a call\"},link:{type:ControlType.Link,title:\"Link\"},openInNewTab:{type:ControlType.Boolean,title:\"New Tab\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:false},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"primary\",\"secondary\",\"text\"],optionTitles:[\"Primary\",\"Secondary\",\"Text\"],defaultValue:\"primary\",displaySegmentedControl:true},showArrow:{type:ControlType.Boolean,title:\"Arrow\",enabledTitle:\"Show\",disabledTitle:\"Hide\",defaultValue:true},magnetic:{type:ControlType.Boolean,title:\"Magnetic\",enabledTitle:\"On\",disabledTitle:\"Off\",defaultValue:true},magneticStrength:{type:ControlType.Number,title:\"Pull\",min:0,max:16,step:1,unit:\"px\",defaultValue:8,hidden:({magnetic})=>!magnetic},duration:{type:ControlType.Number,title:\"Duration\",min:.1,max:1.2,step:.05,unit:\"s\",defaultValue:.45},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#5D41E3\"},foreground:{type:ControlType.Color,title:\"Text\",defaultValue:\"#F1F1F1\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(23,23,23,0.10)\",hidden:({variant})=>variant!==\"secondary\"},fontSize:{type:ControlType.Number,title:\"Size\",min:10,max:32,step:1,unit:\"px\",defaultValue:16},fontWeight:{type:ControlType.Number,title:\"Weight\",min:300,max:800,step:100,defaultValue:500,displayStepper:true},letterSpacing:{type:ControlType.Number,title:\"Tracking\",min:-.06,max:.1,step:.005,unit:\"em\",defaultValue:0},paddingX:{type:ControlType.Number,title:\"Pad X\",min:0,max:60,step:2,unit:\"px\",defaultValue:26},paddingY:{type:ControlType.Number,title:\"Pad Y\",min:0,max:40,step:2,unit:\"px\",defaultValue:16}});V2RollingButton.displayName=\"V2 / Rolling Button\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"V2RollingButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerIntrinsicHeight\":\"52\",\"framerIntrinsicWidth\":\"180\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Button_rolling.map"],"mappings":"oRAU+T,SAAS,EAAM,CAAC,OAAK,SAAO,CAAC,OAAoB,EAAK,MAAM,CAAC,MAAM,EAAK,OAAO,EAAK,QAAQ,YAAY,KAAK,OAAO,cAAc,OAAO,MAAM,CAAC,QAAQ,QAAQ,WAAW,CAAC,EAAE,SAAsB,EAAK,OAAO,CAAC,EAAE,gCAAgC,OAAO,EAAM,YAAY,MAAM,cAAc,QAAQ,eAAe,OAAO,CAAC,CAAC,CAAC,CAAE,CAQ/nB,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,QAAM,OAAK,eAAa,UAAQ,YAAU,WAAS,mBAAiB,WAAS,aAAW,aAAW,cAAY,WAAS,aAAW,gBAAc,WAAS,WAAS,SAAO,EAAW,CAAC,EAAQ,GAAYA,EAAS,EAAK,EAAQ,EAAQC,EAAO,IAAI,EAAQ,EAAS,EAAoB,EAAQ,EAAQ,EAAiB,EAAQ,EAAU,GAAU,IAAU,GAEjZ,EAAE,EAAU,EAAE,CAAC,UAAU,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC,EAAQ,EAAE,EAAU,EAAE,CAAC,UAAU,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC,EAAQ,EAAW,GAAU,CAAC,EAAgB,EAAWC,EAAY,GAAO,CAAC,GAAG,CAAC,EAAW,OAAO,IAAM,EAAK,EAAQ,QAAQ,GAAG,CAAC,EAAK,OAAO,IAAM,EAAK,EAAK,sBAAsB,EAAE,GAAG,CAAC,EAAK,OAAO,CAAC,EAAK,OAAO,OAAO,IAAM,GAAM,EAAM,SAAS,EAAK,KAAK,EAAK,MAAM,KAAK,EAAK,MAAM,GAAS,GAAM,EAAM,SAAS,EAAK,IAAI,EAAK,OAAO,KAAK,EAAK,OAAO,GAAS,EAAM,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAM,CAAI,EAAE,CAAgB,EAAE,EAAE,IAAI,EAAM,CAAI,EAAE,CAAgB,CAAE,EAAE,CAAC,EAAW,EAAiB,EAAE,CAAC,CAAC,EAAQ,EAAYA,MAAgB,CAAC,MAAoB,EAAW,EAAI,CAAC,CAAE,EAAE,CAAC,CAAC,EAAQ,EAAYA,MAAgB,CAAC,MAAoB,EAAW,EAAK,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAElxB,EAAO,GAAS,CAAC,EAAgB,EAAU,IAAU,UAAgB,EAAO,IAAU,OAAa,EAAQ,EAAO,cAAc,EAAU,EAAW,cAAoB,EAAO,GAAc,EAAP,OAAwB,aAAa,IAAoB,EAAW,EAAU,OAAO,aAAa,EAAS,IAAI,IAAgC,EAAW,KAAK,KAAK,EAAS,CAAU,EAAQ,EAAU,KAAK,MAAM,EAAS,GAAG,EAAQ,EAAW,CAAC,QAAQ,QAAQ,OAAO,EAAW,MAAM,cAAc,OAAO,EAAE,WAAW,4BAA4B,WAAS,aAAW,aAAW,cAAc,GAAG,EAAc,IAAI,MAAM,EAAW,WAAW,QAAQ,EAAQ,EAAmB,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,QAAQ,QAAQ,OAAO,EAAW,SAAS,SAAS,WAAW,CAAC,EAAE,SAAsB,EAAM,OAAO,CAAC,MAAM,CAAC,QAAQ,QAAQ,UAAU,EAAO,mBAAmB,iBAAiB,aAAW,WAAW,WAAW,EAAE,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,EAAW,SAAS,CAAK,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,EAAW,cAAc,OAAO,SAAS,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAwB,EAAM,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,QAAQ,QAAQ,MAAM,EAAU,OAAO,EAAU,SAAS,SAAS,WAAW,CAAC,EAAE,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,UAAU,EAAO,mBAAmB,iBAAiB,aAAW,WAAW,WAAW,EAAE,SAAsB,EAAK,EAAM,CAAC,KAAK,EAAU,MAAM,CAAU,CAAC,CAAC,CAAC,EAAe,EAAK,OAAO,CAAC,cAAc,OAAO,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,UAAU,EAAO,iBAAiB,oBAAoB,aAAW,WAAW,WAAW,EAAE,SAAsB,EAAK,EAAM,CAAC,KAAK,EAAU,MAAM,CAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAQ,EAAa,CAAC,SAAS,WAAW,QAAQ,cAAc,WAAW,SAAS,IAAI,EAAU,KAAK,MAAM,EAAS,EAAE,EAAE,EAAE,MAAM,GAAO,QAAQ,OAAO,OAAO,cAAc,eAAe,SAAS,UAAU,aAAa,QAAQ,EAAO,EAAE,GAAG,EAAS,KAAK,EAAS,IAAI,aAAa,IAAI,WAAW,EAAQ,SAAO,eAAe,OAAO,OAAO,UAAU,WAAW,OAAO,wBAAwB,aAAa,EAAE,OAAoB,EAAK,EAAO,IAAI,CAAC,IAAI,EAAQ,YAAY,EAAW,aAAa,EAAY,aAAa,EAAY,MAAM,CAAC,SAAS,WAAW,QAAQ,cAAc,MAAM,GAAO,QAAQ,OAAO,OAAO,cAAc,GAAG,EAAW,CAAC,IAAE,GAAC,EAAE,KAAK,GAAG,CAAK,EAAE,SAAS,EAAkB,EAAK,IAAI,CAAC,KAAK,EAAK,OAAO,EAAa,SAAS,IAAA,GAAU,IAAI,EAAa,sBAAsB,IAAA,GAAU,MAAM,EAAa,SAAS,CAAK,CAAC,EAAe,EAAK,SAAS,CAAC,KAAK,SAAS,MAAM,CAAC,GAAG,EAAa,KAAK,SAAS,EAAE,SAAS,CAAK,CAAC,CAAC,CAAC,CAAE,mBAZ3hF,IAA+D,IAA6D,IAAwE,EAAO,EAAK,iCAY40E,EAAoB,EAAgB,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,aAAa,EAAE,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,EAAE,aAAa,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,MAAM,cAAc,KAAK,aAAa,EAAK,EAAE,QAAQ,CAAC,KAAK,EAAY,KAAK,MAAM,UAAU,QAAQ,CAAC,UAAU,YAAY,MAAM,EAAE,aAAa,CAAC,UAAU,YAAY,MAAM,EAAE,aAAa,UAAU,wBAAwB,EAAI,EAAE,UAAU,CAAC,KAAK,EAAY,QAAQ,MAAM,QAAQ,aAAa,OAAO,cAAc,OAAO,aAAa,EAAI,EAAE,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,WAAW,aAAa,KAAK,cAAc,MAAM,aAAa,EAAI,EAAE,iBAAiB,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,aAAa,EAAE,QAAQ,CAAC,cAAY,CAAC,CAAQ,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,IAAI,GAAG,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,aAAa,GAAG,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,aAAa,sBAAsB,QAAQ,CAAC,aAAW,IAAU,WAAW,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,aAAa,EAAE,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,aAAa,IAAI,eAAe,EAAI,EAAE,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,IAAI,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,KAAK,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,aAAa,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,aAAa,EAAE,CAAC,CAAC,EAAE,EAAgB,YAAY"}