{"version":3,"file":"Gradient_bars.DjROZoxQ.mjs","names":["useId","useState"],"sources":["https:/framerusercontent.com/modules/33j6Sf7gqOsJdABH83ZT/OhreNhFvQ1QAln5CIIXB/Gradient_bars.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useId,useState}from\"react\";// ============================================================================\n// VERSION v6\n// ============================================================================\n// v6: Adds Mirror Gap control — spacing between the top and mirrored\n//     bottom halves. Only applies when Mirror is on.\n//\n// v5: Overall opacity control.\n// v4: Mirror toggle.\n// v3-v1: earlier iterations.\n/**\n * GradientBars\n *\n * Animated background of vertical bars. Each bar's height varies via\n * combined sine waves creating flowing curve shapes. Rendered as SVG so\n * it fills any container size naturally — no fiddly sizing setup.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n */export default function GradientBars(props){// Version log\nuseEffect(()=>{console.log(\"[GradientBars] VERSION v6\");},[]);const barCount=Math.max(2,Math.floor(Number(props.barCount)||40));const maxAmplitude=Math.max(0,Math.min(1,Number(props.maxAmplitude)??.9));const minAmplitude=Math.max(0,Math.min(1,Number(props.minAmplitude)??.15));const waveCount=Number(props.waveCount)||1.5;const complexity=Math.max(0,Math.min(1,Number(props.complexity)??.5));const speed=Number(props.speed)||8;const direction=props.direction||\"right\";const mirror=props.mirror===true;const mirrorGap=Math.max(0,Number(props.mirrorGap)??0);const overallOpacity=Math.max(0,Math.min(1,Number(props.overallOpacity)??1));const color1=props.color1||\"rgba(255, 60, 120, 1)\";const color2=props.color2||\"rgba(160, 60, 220, 0.9)\";const color3=props.color3||\"rgba(60, 100, 220, 0.5)\";const color4=props.color4||\"rgba(0, 0, 40, 0)\";const gap=Math.max(0,Math.min(.9,Number(props.gap)??.1));const{style}=props;const rawId=useId();const gradId=`gb-grad-${rawId.replace(/:/g,\"\")}`;// Parse rgba/rgb/hex colour strings into separate colour + opacity.\n// rgba directly in SVG stopColor renders inconsistently when the\n// parent applies opacity — splitting into stopColor + stopOpacity is\n// the reliable form.\nconst parseColor=str=>{if(!str)return{color:\"#000000\",opacity:1};const rgba=str.match(/rgba?\\(([^)]+)\\)/);if(rgba){const parts=rgba[1].split(\",\").map(s=>s.trim());const[r,g,b,a=\"1\"]=parts;return{color:`rgb(${r}, ${g}, ${b})`,opacity:parseFloat(a)};}// Hex or named colour — assume fully opaque\nreturn{color:str,opacity:1};};const c1=parseColor(color1);const c2=parseColor(color2);const c3=parseColor(color3);const c4=parseColor(color4);// Time driver via requestAnimationFrame.\nconst[time,setTime]=useState(0);useEffect(()=>{let raf;const start=performance.now();const tick=()=>{setTime((performance.now()-start)/1e3);raf=requestAnimationFrame(tick);};raf=requestAnimationFrame(tick);return()=>cancelAnimationFrame(raf);},[]);// Compute each bar's height as a fraction of viewBox height (0-100).\nconst dirSign=direction===\"left\"?-1:1;const computeHeight=i=>{const pos=i/(barCount-1);const phase=pos*waveCount*2*Math.PI*dirSign;const t=time/speed*2*Math.PI;const wave1=Math.sin(phase-t);const wave2=Math.sin(phase*1.7-t*1.3);const combined=wave1*(1-complexity*.5)+wave2*(complexity*.5);const normalised=.5+.5*combined;return minAmplitude+(maxAmplitude-minAmplitude)*normalised;};// Each bar occupies 1 unit of horizontal space in the viewBox\n// (viewBox width = barCount). Gap is a fraction of that unit.\nconst barWidth=1-gap;// Reusable SVG content — used once by default, twice (with flip) when mirrored.\nconst renderSvg=flipped=>/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",viewBox:`0 0 ${barCount} 100`,preserveAspectRatio:\"none\",style:{display:\"block\",transform:flipped?\"scaleY(-1)\":undefined},children:[/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"linearGradient\",{id:flipped?`${gradId}-m`:gradId,x1:\"0\",y1:\"100\",x2:\"0\",y2:\"0\",gradientUnits:\"userSpaceOnUse\",children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0%\",stopColor:c4.color,stopOpacity:c4.opacity}),/*#__PURE__*/_jsx(\"stop\",{offset:\"30%\",stopColor:c3.color,stopOpacity:c3.opacity}),/*#__PURE__*/_jsx(\"stop\",{offset:\"65%\",stopColor:c2.color,stopOpacity:c2.opacity}),/*#__PURE__*/_jsx(\"stop\",{offset:\"100%\",stopColor:c1.color,stopOpacity:c1.opacity})]})}),Array.from({length:barCount}).map((_,i)=>{const heightPct=computeHeight(i)*100;return /*#__PURE__*/_jsx(\"rect\",{x:i+gap/2,y:100-heightPct,width:barWidth,height:heightPct,fill:`url(#${flipped?`${gradId}-m`:gradId})`},i);})]});return /*#__PURE__*/_jsxs(\"div\",{style:{...style,width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",opacity:overallOpacity},children:[/*#__PURE__*/_jsx(\"div\",{style:{flex:1,minHeight:0},children:renderSvg(false)}),mirror&&mirrorGap>0&&/*#__PURE__*/_jsx(\"div\",{style:{height:`${mirrorGap}px`,flexShrink:0}}),mirror&&/*#__PURE__*/_jsx(\"div\",{style:{flex:1,minHeight:0},children:renderSvg(true)})]});}addPropertyControls(GradientBars,{overallOpacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:1,min:0,max:1,step:.05,description:\"Overall opacity of the entire visualisation.\"},barCount:{type:ControlType.Number,title:\"Bars\",defaultValue:40,min:4,max:200,step:1,description:\"Number of vertical bars.\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:.1,min:0,max:.9,step:.02,description:\"Gap between bars as fraction of bar width. 0 = no gap, 0.5 = gap equals bar width.\"},maxAmplitude:{type:ControlType.Number,title:\"Max Height\",defaultValue:.9,min:0,max:1,step:.02,description:\"Tallest bar height as fraction of container.\"},minAmplitude:{type:ControlType.Number,title:\"Min Height\",defaultValue:.15,min:0,max:1,step:.02,description:\"Shortest bar height as fraction of container.\"},waveCount:{type:ControlType.Number,title:\"Waves\",defaultValue:1.5,min:.5,max:10,step:.1,description:\"Number of wave peaks visible across the width.\"},complexity:{type:ControlType.Number,title:\"Complexity\",defaultValue:.5,min:0,max:1,step:.05,description:\"How much a secondary wave adds organic variation.\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:8,min:.5,max:60,step:.5,unit:\"s\",description:\"Seconds per animation cycle.\"},direction:{type:ControlType.Enum,title:\"Direction\",defaultValue:\"right\",options:[\"right\",\"left\"],optionTitles:[\"Right →\",\"Left ←\"],displaySegmentedControl:true},mirror:{type:ControlType.Boolean,title:\"Mirror\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"When on, adds a flipped copy below the first — top and bottom halves form a symmetric shape.\"},mirrorGap:{type:ControlType.Number,title:\"Mirror Gap\",defaultValue:0,min:0,max:400,step:1,unit:\"px\",description:\"Spacing between the top and mirrored bottom halves. Only applies when Mirror is on.\",hidden:p=>p.mirror!==true},color1:{type:ControlType.Color,title:\"Colour 1\",defaultValue:\"rgba(255, 60, 120, 1)\",description:\"Top of gradient.\"},color2:{type:ControlType.Color,title:\"Colour 2\",defaultValue:\"rgba(160, 60, 220, 0.9)\"},color3:{type:ControlType.Color,title:\"Colour 3\",defaultValue:\"rgba(60, 100, 220, 0.5)\"},color4:{type:ControlType.Color,title:\"Colour 4\",defaultValue:\"rgba(0, 0, 40, 0)\",description:\"Bottom of gradient. Use transparent for fade-out.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientBars\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"400\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Gradient_bars.map"],"mappings":"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"}