{"version":3,"file":"RollingText.CAje7Tbs.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/ZmjT2U4CUmaOIIxjPk8S/QQ7TWQtixaf0LGStmmLH/RollingText.js"],"sourcesContent":["// Rolling Text Animation by Robbi Firmansah - Bie Lab\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";/**\n * Vertical Text Rolling Animation\n *\n * Each character position shows a vertical column of the SAME target letter repeated multiple times, rolling to reveal the final character.\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function RollingText(props){const{text=\"ROLLING\",duplicateCount=8,rollDuration=2,staggerDelay=.1,blurIntensity=8,autoPlay=true,backgroundColor=\"#000000\",textColor=\"#FFFFFF\",font,animationPattern=\"sequential\"}=props;const[isAnimating,setIsAnimating]=useState(false);const containerRef=useRef(null);const isInView=useInView(containerRef,{once:true});const isStatic=useIsStaticRenderer();useEffect(()=>{if(autoPlay&&isInView&&!isStatic){const timer=setTimeout(()=>{startTransition(()=>setIsAnimating(true));},100);return()=>clearTimeout(timer);}},[autoPlay,isInView,isStatic]);const handleReplay=()=>{startTransition(()=>{setIsAnimating(false);setTimeout(()=>{startTransition(()=>setIsAnimating(true));},50);});};const characters=text.split(\"\");return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\",cursor:\"pointer\",userSelect:\"none\"},onClick:isStatic?undefined:handleReplay,children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:\"0.05em\",...font},children:characters.map((char,index)=>/*#__PURE__*/_jsx(CharacterColumn,{character:char,duplicateCount:duplicateCount,rollDuration:rollDuration,delay:index*staggerDelay,blurIntensity:blurIntensity,isAnimating:isAnimating,textColor:textColor,font:font,isStatic:isStatic,animationPattern:animationPattern,characterIndex:index},`${char}-${index}`))})});}function CharacterColumn({character,duplicateCount,rollDuration,delay,blurIntensity,isAnimating,textColor,font,isStatic,animationPattern,characterIndex}){// Create array of duplicate characters\nconst duplicates=Array(duplicateCount).fill(character);// Calculate the height needed to show one character\nconst lineHeight=parseFloat(font?.lineHeight||\"1em\");const fontSize=parseFloat(font?.fontSize||\"60px\");const characterHeight=fontSize*lineHeight;// Calculate total scroll distance (all duplicates minus the final visible one)\nconst totalScrollDistance=characterHeight*(duplicateCount-1);// Determine animation direction based on pattern and character position\nconst isOddPosition=characterIndex%2===0// 0-indexed, so 0,2,4... are \"odd\" positions (1st, 3rd, 5th...)\n;const shouldRollFromBottom=animationPattern===\"alternating\"&&!isOddPosition;// Set initial and final positions based on direction\nconst initialY=shouldRollFromBottom?-totalScrollDistance:0;const finalY=shouldRollFromBottom?0:-totalScrollDistance;if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",height:`${characterHeight}px`,overflow:\"hidden\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,...font,lineHeight:font?.lineHeight||\"1em\"},children:character})});}return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",height:`${characterHeight}px`,overflow:\"hidden\",display:\"flex\",alignItems:\"flex-start\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(motion.div,{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"center\"},initial:{y:initialY},animate:isAnimating?{y:finalY}:{y:initialY},transition:{duration:rollDuration,delay:delay,ease:[.25,.46,.45,.94],type:\"tween\"},children:duplicates.map((char,index)=>/*#__PURE__*/_jsx(motion.span,{style:{color:textColor,height:`${characterHeight}px`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",...font,lineHeight:font?.lineHeight||\"1em\"},initial:{filter:\"blur(0px)\"},animate:isAnimating?{filter:[\"blur(0px)\",`blur(${blurIntensity}px)`,`blur(${blurIntensity}px)`,\"blur(0px)\"]}:{filter:\"blur(0px)\"},transition:{duration:rollDuration,delay:delay,times:[0,.2,.8,1],ease:\"easeOut\"},children:char},index))})});}addPropertyControls(RollingText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"ROLLING\"},animationPattern:{type:ControlType.Enum,title:\"Animation Pattern\",options:[\"sequential\",\"alternating\"],optionTitles:[\"Sequential\",\"Alternating\"],defaultValue:\"sequential\",displaySegmentedControl:true},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"60px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},duplicateCount:{type:ControlType.Number,title:\"Duplicate Count\",defaultValue:8,min:3,max:20,step:1},rollDuration:{type:ControlType.Number,title:\"Roll Duration\",defaultValue:2,min:.5,max:5,step:.1,unit:\"s\"},staggerDelay:{type:ControlType.Number,title:\"Stagger Delay\",defaultValue:.1,min:0,max:.5,step:.01,unit:\"s\"},blurIntensity:{type:ControlType.Number,title:\"Blur Intensity\",defaultValue:8,min:0,max:20,step:1,unit:\"px\"},autoPlay:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"RollingText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"400\",\"framerIntrinsicHeight\":\"120\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./RollingText.map"],"mappings":"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"}