1import{r as j,j as e,h as D,P as re}from"./index-6IxEvYfq.js";import{r as Q}from"./ArrowRight.es-YeiR9JGJ.js";import{o as se,H as oe}from"./header-BXK1hvHp.js";import{B as S}from"./badge-YlXDsASi.js";import{B as I}from"./logos-QC6ofofL.js";import{B as w}from"./useRegisterFieldControl-Dl0Mi-IE.js";import{C as W}from"./card-shell-BpNLv4wT.js";import{I as G}from"./input-0bWE6avy.js";import"./SpinnerGap.es-Dyg6n7_s.js";import"./api-D8tz6b1z.js";import"./index-BqXIYpRL.js";const ne=`#version 300 es 2precision mediump float; 3 4layout(location = 0) in vec4 a_position; 5 6uniform vec2 u_resolution; 7uniform float u_pixelRatio; 8uniform float u_imageAspectRatio; 9uniform float u_originX; 10uniform float u_originY; 11uniform float u_worldWidth; 12uniform float u_worldHeight; 13uniform float u_fit; 14uniform float u_scale; 15uniform float u_rotation; 16uniform float u_offsetX; 17uniform float u_offsetY; 18 19out vec2 v_objectUV; 20out vec2 v_objectBoxSize; 21out vec2 v_responsiveUV; 22out vec2 v_responsiveBoxGivenSize; 23out vec2 v_patternUV; 24out vec2 v_patternBoxSize; 25out vec2 v_imageUV; 26 27vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) { 28 vec2 box = vec2(0.);
29 // fit = none 30 box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y); 31 float noFitBoxWidth = box.x; 32 if (u_fit == 1.) { // fit = contain 33 box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y); 34 } else if (u_fit == 2.) { // fit = cover 35 box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y); 36 } 37 box.y = box.x / boxRatio; 38 return vec3(box, noFitBoxWidth); 39} 40 41void main() { 42 gl_Position = a_position; 43 44 vec2 uv = gl_Position.xy * .5; 45 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 46 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 47 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 48 float r = u_rotation * 3.14159265358979323846 / 180.; 49 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 50 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 51 52 53 // =================================================== 54 55 float fixedRatio = 1.; 56 vec2 fixedRatioBoxGivenSize = vec2( 57 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 58 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 59 ); 60 61 v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy; 62 vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize; 63 64 v_objectUV = uv; 65 v_objectUV *= objectWorldScale; 66 v_objectUV += boxOrigin * (objectWorldScale - 1.); 67 v_objectUV += graphicOffset; 68 v_objectUV /= u_scale; 69 v_objectUV = graphicRotation * v_objectUV; 70 71 // =================================================== 72 73 v_responsiveBoxGivenSize = vec2( 74 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 75 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 76 ); 77 float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 78 vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy; 79 vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize; 80 81 #ifdef ADD_HELPERS 82 v_responsiveHelperBox = uv; 83 v_responsiveHelperBox *= responsiveBoxScale; 84 v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.); 85 #endif 86 87 v_responsiveUV = uv; 88 v_responsiveUV *= responsiveBoxScale; 89 v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.); 90 v_responsiveUV += graphicOffset; 91 v_responsiveUV /= u_scale; 92 v_responsiveUV.x *= responsiveRatio; 93 v_responsiveUV = graphicRotation * v_responsiveUV; 94 v_responsiveUV.x /= responsiveRatio; 95 96 // =================================================== 97 98 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 99 vec2 patternBoxGivenSize = vec2( 100 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 101 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 102 ); 103 patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y; 104 105 vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize); 106 v_patternBoxSize = boxSizeData.xy; 107 float patternBoxNoFitBoxWidth = boxSizeData.z; 108 vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize; 109 110 v_patternUV = uv; 111 v_patternUV += graphicOffset / patternBoxScale; 112 v_patternUV += boxOrigin; 113 v_patternUV -= boxOrigin / patternBoxScale; 114 v_patternUV *= u_resolution.xy; 115 v_patternUV /= u_pixelRatio; 116 if (u_fit > 0.) { 117 v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x); 118 } 119 v_patternUV /= u_scale; 120 v_patternUV = graphicRotation * v_patternUV; 121 v_patternUV += boxOrigin / patternBoxScale; 122 v_patternUV -= boxOrigin; 123 // x100 is a default multiplier between vertex and fragmant shaders 124 // we use it to avoid UV presision issues 125 v_patternUV *= .01; 126 127 // =================================================== 128 129 vec2 imageBoxSize; 130 if (u_fit == 1.) { // contain 131 imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 132 } else if (u_fit == 2.) { // cover 133 imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 134 } else { 135 imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio); 136 } 137 imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio; 138 vec2 imageBoxScale = u_resolution.xy / imageBoxSize; 139 140 v_imageUV = uv; 141 v_imageUV *= imageBoxScale; 142 v_imageUV += boxOrigin * (imageBoxScale - 1.); 143 v_imageUV += graphicOffset; 144 v_imageUV /= u_scale; 145 v_imageUV.x *= u_imageAspectRatio; 146 v_imageUV = graphicRotation * v_imageUV; 147 v_imageUV.x /= u_imageAspectRatio; 148 149 v_imageUV += .5; 150 v_imageUV.y = 1. - v_imageUV.y; 151}`,X=1920*1080*4;let ae=class{parentElement;canvasElement;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastRenderTime=0;currentFrame=0;speed=0;currentSpeed=0;providedUniforms;mipmaps=[];hasBeenDisposed=!1;resolutionChanged=!0;textures=new Map;minPixelRatio;maxPixelCount;isSafari=de();uniformCache={};textureUnitMap=new Map;constructor(t,s,r,a,o=0,n=0,l=2,x=X,m=[]){if(t instanceof HTMLElement)this.parentElement=t;else throw new Error("Paper Shaders: parent element must be an HTMLElement");
151if(!document.querySelector("style[data-paper-shader]")){const u=document.createElement("style");u.innerHTML=ce,u.setAttribute("data-paper-shader",""),document.head.prepend(u)}const c=document.createElement("canvas");this.canvasElement=c,this.parentElement.prepend(c),this.fragmentShader=s,this.providedUniforms=r,this.mipmaps=m,this.currentFrame=n,this.minPixelRatio=l,this.maxPixelCount=x;const g=c.getContext("webgl2",a);if(!g)throw new Error("Paper Shaders: WebGL is not supported in this browser");this.gl=g,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(o),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,document.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}initProgram=()=>{const t=le(this.gl,ne,this.fragmentShader);t&&(this.program=t)};setupPositionAttribute=()=>{const t=this.gl.getAttribLocation(this.program,"a_position"),s=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,s);const r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(t),this.gl.vertexAttribPointer(t,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{const t={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([s,r])=>{if(t[s]=this.gl.getUniformLocation(this.program,s),r instanceof HTMLImageElement){const a=`${s}AspectRatio`;t[a]=this.gl.getUniformLocation(this.program,a)}}),this.uniformLocations=t};renderScale=1;parentWidth=0;parentHeight=0;parentDevicePixelWidth=0;parentDevicePixelHeight=0;devicePixelsSupported=!1;resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(([t])=>{if(t?.borderBoxSize[0]){const s=t.devicePixelContentBoxSize?.[0];s!==void 0&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=s.inlineSize,this.parentDevicePixelHeight=s.blockSize),this.parentWidth=t.borderBoxSize[0].inlineSize,this.parentHeight=t.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)};handleVisualViewportChange=()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()};handleResize=()=>{let t=0,s=0;const r=Math.max(1,window.devicePixelRatio),a=visualViewport?.scale??1;if(this.devicePixelsSupported){const c=Math.max(1,this.minPixelRatio/r);t=this.parentDevicePixelWidth*c*a,s=this.parentDevicePixelHeight*c*a}else{let c=Math.max(r,this.minPixelRatio)*a;if(this.isSafari){const g=he();c*=Math.max(1,g)}t=Math.round(this.parentWidth)*c,s=Math.round(this.parentHeight)*c}const o=Math.sqrt(this.maxPixelCount)/Math.sqrt(t*s),n=Math.min(1,o),l=Math.round(t*n),x=Math.round(s*n),m=l/Math.round(this.parentWidth);(this.canvasElement.width!==l||this.canvasElement.height!==x||this.renderScale!==m)&&(this.renderScale=m,this.canvasElement.width=l,this.canvasElement.height=x,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=t=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}const s=t-this.lastRenderTime;this.lastRenderTime=t,this.currentSpeed!==0&&(this.currentFrame+=s*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.currentFrame*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.currentSpeed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};setTextureUniform=(t,s)=>
151{if(!s.complete||s.naturalWidth===0)throw new Error(`Paper Shaders: image for uniform ${t} must be fully loaded`);const r=this.textures.get(t);r&&this.gl.deleteTexture(r),this.textureUnitMap.has(t)||this.textureUnitMap.set(t,this.textureUnitMap.size);const a=this.textureUnitMap.get(t);this.gl.activeTexture(this.gl.TEXTURE0+a);const o=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,o),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,s),this.mipmaps.includes(t)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));const n=this.gl.getError();if(n!==this.gl.NO_ERROR||o===null){console.error("Paper Shaders: WebGL error when uploading texture:",n);return}this.textures.set(t,o);const l=this.uniformLocations[t];if(l){this.gl.uniform1i(l,a);const x=`${t}AspectRatio`,m=this.uniformLocations[x];if(m){const c=s.naturalWidth/s.naturalHeight;this.gl.uniform1f(m,c)}}};areUniformValuesEqual=(t,s)=>t===s?!0:Array.isArray(t)&&Array.isArray(s)&&t.length===s.length?t.every((r,a)=>this.areUniformValuesEqual(r,s[a])):!1;setUniformValues=t=>{this.gl.useProgram(this.program),Object.entries(t).forEach(([s,r])=>{let a=r;if(r instanceof HTMLImageElement&&(a=`${r.src.slice(0,200)}|${r.naturalWidth}x${r.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[s],a))return;this.uniformCache[s]=a;const o=this.uniformLocations[s];if(!o){console.warn(`Uniform location for ${s} not found`);return}if(r instanceof HTMLImageElement)this.setTextureUniform(s,r);else if(Array.isArray(r)){let n=null,l=null;if(r[0]!==void 0&&Array.isArray(r[0])){const x=r[0].length;if(r.every(m=>m.length===x))n=r.flat(),l=x;else{console.warn(`All child arrays must be the same length for ${s}`);return}}else n=r,l=n.length;switch(l){case 2:this.gl.uniform2fv(o,n);break;case 3:this.gl.uniform3fv(o,n);break;case 4:this.gl.uniform4fv(o,n);break;case 9:this.gl.uniformMatrix3fv(o,!1,n);break;case 16:this.gl.uniformMatrix4fv(o,!1,n);break;default:console.warn(`Unsupported uniform array length: ${l}`)}}else typeof r=="number"?this.gl.uniform1f(o,r):typeof r=="boolean"?this.gl.uniform1i(o,r?1:0):console.warn(`Unsupported uniform type for ${s}: ${typeof r}`)})};getCurrentFrame=()=>this.currentFrame;setFrame=t=>{this.currentFrame=t,this.lastRenderTime=performance.now(),this.render(performance.now())};setSpeed=(t=1)=>{this.speed=t,this.setCurrentSpeed(document.hidden?0:t)};setCurrentSpeed=t=>{this.currentSpeed=t,this.rafId===null&&t!==0&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&t===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setMaxPixelCount=(t=X)=>{this.maxPixelCount=t,this.handleResize()};setMinPixelRatio=(t=2)=>{this.minPixelRatio=t,this.handleResize()};setUniforms=t=>{this.setUniformValues(t),this.providedUniforms={...this.providedUniforms,...t},this.render(performance.now())};handleDocumentVisibilityChange=()=>{this.setCurrentSpeed(document.hidden?0:this.speed)};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(t=>{this.gl.deleteTexture(t)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),document.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount}};function Y(i,t,s){const r=i.createShader(t);return r?(i.shaderSource(r,s),i.compileShader(r),i.getShaderParameter(r,i.COMPILE_STATUS)?r:(console.error("An error occurred compiling the shaders: "+i.getShaderInfoLog(r)),i.deleteShader(r),null)):null}function le(i,t,s){const r=i.getShaderPrecisionFormat(i.FRAGMENT_SHADER,i.MEDIUM_FLOAT),a=r?r.precision:null;a&&a<23&&(t=t.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),s=s.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));const o=Y(i,i.VERTEX_SHADER,t),n=Y(i,i.FRAGMENT_SHADER,s);if(!o||!n)return null;const l=i.createProgram();return l?(i.attachShader(l,o),i.attachShader(l,n),i.linkProgram(l),i.getProgramParameter(l,i.LINK_STATUS)?(i.detachShader(l,o),i.detachShader(l,n),i.deleteShader(o),i.deleteShader(n),l):(console.error("Unable to initialize the shader program: "+i.getProgramInfoLog(l)),i.deleteProgram(l),i.deleteShader(o),i.deleteShader(n),null)):null}const ce=`@layer paper-shaders { 152 :where([data-paper-shader]) { 153 isolation: isolate; 154 position: relative; 155 156 & canvas { 157 contain: strict; 158 display: block; 159 position: absolute; 160 inset: 0; 161 z-index: -1; 162 width: 100%; 163 height: 100%; 164 border-radius: inherit; 165 corner-shape: inherit; 166 } 167 } 168}`;function de(){const i=navigator.userAgent.toLowerCase();return i.includes("safari")&&!i.includes("chrome")&&!i.includes("android")}
168function he(){const i=visualViewport?.scale??1,t=visualViewport?.width??window.innerWidth,s=window.innerWidth-document.documentElement.clientWidth,r=i*t+s,a=outerWidth/r,o=Math.round(100*a);return o%5===0?o/100:o===33?1/3:o===67?2/3:o===133?4/3:a}const ue={fit:"none",scale:1,rotation:0,offsetX:0,offsetY:0,originX:.5,originY:.5,worldWidth:0,worldHeight:0},xe={none:0,contain:1,cover:2},me=` 169#define TWO_PI 6.28318530718 170#define PI 3.14159265358979323846 171`,pe=` 172 float hash11(float p) { 173 p = fract(p * 0.3183099) + 0.1; 174 p *= p + 19.19; 175 return fract(p * p); 176 } 177`,fe=` 178 float hash21(vec2 p) { 179 p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1; 180 p += dot(p, p + 19.19); 181 return fract(p.x * p.y); 182 } 183`,ge=` 184vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } 185float snoise(vec2 v) { 186 const vec4 C = vec4(0.211324865405187, 0.366025403784439, 187 -0.577350269189626, 0.024390243902439); 188 vec2 i = floor(v + dot(v, C.yy)); 189 vec2 x0 = v - i + dot(i, C.xx); 190 vec2 i1; 191 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 192 vec4 x12 = x0.xyxy + C.xxzz; 193 x12.xy -= i1; 194 i = mod(i, 289.0); 195 vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) 196 + i.x + vec3(0.0, i1.x, 1.0)); 197 vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), 198 dot(x12.zw, x12.zw)), 0.0); 199 m = m * m; 200 m = m * m; 201 vec3 x = 2.0 * fract(p * C.www) - 1.0; 202 vec3 h = abs(x) - 0.5; 203 vec3 ox = floor(x + 0.5); 204 vec3 a0 = x - ox; 205 m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h); 206 vec3 g; 207 g.x = a0.x * x0.x + h.x * x0.y; 208 g.yz = a0.yz * x12.xz + h.yz * x12.yw; 209 return 130.0 * dot(m, g); 210} 211`,ve=`#version 300 es 212precision mediump float; 213 214uniform float u_time; 215 216uniform vec2 u_resolution; 217uniform float u_pixelRatio; 218uniform float u_originX; 219uniform float u_originY; 220uniform float u_worldWidth; 221uniform float u_worldHeight; 222uniform float u_fit; 223uniform float u_scale; 224uniform float u_rotation; 225uniform float u_offsetX; 226uniform float u_offsetY; 227 228uniform float u_pxSize; 229uniform vec4 u_colorBack; 230uniform vec4 u_colorFront; 231uniform float u_shape; 232uniform float u_type; 233 234out vec4 fragColor; 235 236${ge} 237${me} 238${pe} 239${fe} 240 241float getSimplexNoise(vec2 uv, float t) { 242 float noise = .5 * snoise(uv - vec2(0., .3 * t)); 243 noise += .5 * snoise(2. * uv + vec2(0., .32 * t)); 244 245 return noise; 246} 247 248const int bayer2x2[4] = int[4](0, 2, 3, 1); 249const int bayer4x4[16] = int[16]( 2500, 8, 2, 10, 25112, 4, 14, 6, 2523, 11, 1, 9, 25315, 7, 13, 5 254); 255 256const int bayer8x8[64] = int[64]( 2570, 32, 8, 40, 2, 34, 10, 42, 25848, 16, 56, 24, 50, 18, 58, 26, 25912, 44, 4, 36, 14, 46, 6, 38, 26060, 28, 52, 20, 62, 30, 54, 22, 2613, 35, 11, 43, 1, 33, 9, 41, 26251, 19, 59, 27, 49, 17, 57, 25, 26315, 47, 7, 39, 13, 45, 5, 37, 26463, 31, 55, 23, 61, 29, 53, 21 265); 266 267float getBayerValue(vec2 uv, int size) { 268 ivec2 pos = ivec2(fract(uv / float(size)) * float(size)); 269 int index = pos.y * size + pos.x; 270 271 if (size == 2) { 272 return float(bayer2x2[index]) / 4.0; 273 } else if (size == 4) { 274 return float(bayer4x4[index]) / 16.0; 275 } else if (size == 8) { 276 return float(bayer8x8[index]) / 64.0; 277 } 278 return 0.0; 279} 280 281 282void main() { 283 float t = .5 * u_time; 284 285 float pxSize = u_pxSize * u_pixelRatio; 286 vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution; 287 pxSizeUV /= pxSize; 288 vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize; 289 vec2 normalizedUV = canvasPixelizedUV / u_resolution; 290 291 vec2 ditheringNoiseUV = canvasPixelizedUV; 292 vec2 shapeUV = normalizedUV; 293 294 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 295 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 296 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 297 float r = u_rotation * PI / 180.; 298 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 299 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 300 301 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 302 vec2 boxSize = vec2( 303 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 304 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 305 ); 306 307 if (u_shape > 3.5) { 308 vec2 objectBoxSize = vec2(0.); 309 // fit = none 310 objectBoxSize.x = min(boxSize.x, boxSize.y); 311 if (u_fit == 1.) { // fit = contain 312 objectBoxSize.x = min(u_resolution.x, u_resolution.y); 313 } else if (u_fit == 2.) { // fit = cover 314 objectBoxSize.x = max(u_resolution.x, u_resolution.y); 315 } 316 objectBoxSize.y = objectBoxSize.x; 317 vec2 objectWorldScale = u_resolution.xy / objectBoxSize; 318 319 shapeUV *= objectWorldScale; 320 shapeUV += boxOrigin * (objectWorldScale - 1.); 321 shapeUV += vec2(-u_offsetX, u_offsetY); 322 shapeUV /= u_scale; 323 shapeUV = graphicRotation * shapeUV; 324 } else { 325 vec2 patternBoxSize = vec2(0.);
326 // fit = none 327 patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y); 328 float patternWorldNoFitBoxWidth = patternBoxSize.x; 329 if (u_fit == 1.) { // fit = contain 330 patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y); 331 } else if (u_fit == 2.) { // fit = cover 332 patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y); 333 } 334 patternBoxSize.y = patternBoxSize.x / patternBoxRatio; 335 vec2 patternWorldScale = u_resolution.xy / patternBoxSize; 336 337 shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale; 338 shapeUV += boxOrigin; 339 shapeUV -= boxOrigin / patternWorldScale; 340 shapeUV *= u_resolution.xy; 341 shapeUV /= u_pixelRatio; 342 if (u_fit > 0.) { 343 shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x); 344 } 345 shapeUV /= u_scale; 346 shapeUV = graphicRotation * shapeUV; 347 shapeUV += boxOrigin / patternWorldScale; 348 shapeUV -= boxOrigin; 349 shapeUV += .5; 350 } 351 352 float shape = 0.; 353 if (u_shape < 1.5) { 354 // Simplex noise 355 shapeUV *= .001; 356 357 shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t); 358 shape = smoothstep(0.3, 0.9, shape); 359 360 } else if (u_shape < 2.5) { 361 // Warp 362 shapeUV *= .003; 363 364 for (float i = 1.0; i < 6.0; i++) { 365 shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t); 366 shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t); 367 } 368 369 shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x))); 370 shape = smoothstep(0.02, 1., shape); 371 372 } else if (u_shape < 3.5) { 373 // Dots 374 shapeUV *= .05; 375 376 float stripeIdx = floor(2. * shapeUV.x / TWO_PI); 377 float rand = hash11(stripeIdx * 10.); 378 rand = sign(rand - .5) * pow(.1 + abs(rand), .4); 379 shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t); 380 shape = pow(abs(shape), 6.); 381 382 } else if (u_shape < 4.5) { 383 // Sine wave 384 shapeUV *= 4.; 385 386 float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t)); 387 shape = 1. - smoothstep(-1., 1., shapeUV.y + wave); 388 389 } else if (u_shape < 5.5) { 390 // Ripple 391 392 float dist = length(shapeUV); 393 float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5; 394 shape = waves; 395 396 } else if (u_shape < 6.5) { 397 // Swirl 398 399 float l = length(shapeUV); 400 float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t; 401 float twist = 1.2; 402 float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI; 403 float mid = smoothstep(0., 1., pow(l, twist)); 404 shape = mix(0., fract(offset), mid); 405 406 } else { 407 // Sphere 408 shapeUV *= 2.; 409 410 float d = 1. - pow(length(shapeUV), 2.); 411 vec3 pos = vec3(shapeUV, sqrt(max(0., d))); 412 vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t))); 413 shape = .5 + .5 * dot(lightPos, pos); 414 shape *= step(0., d); 415 } 416 417 418 int type = int(floor(u_type)); 419 float dithering = 0.0; 420 421 switch (type) { 422 case 1: { 423 dithering = step(hash21(ditheringNoiseUV), shape); 424 } break; 425 case 2: 426 dithering = getBayerValue(pxSizeUV, 2); 427 break; 428 case 3: 429 dithering = getBayerValue(pxSizeUV, 4); 430 break; 431 default : 432 dithering = getBayerValue(pxSizeUV, 8); 433 break; 434 } 435 436 dithering -= .5; 437 float res = step(.5, shape + dithering); 438 439 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 440 float fgOpacity = u_colorFront.a; 441 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 442 float bgOpacity = u_colorBack.a; 443 444 vec3 color = fgColor * res; 445 float opacity = fgOpacity * res; 446 447 color += bgColor * (1. - opacity); 448 opacity += bgOpacity * (1. - opacity); 449 450 fragColor = vec4(color, opacity); 451} 452`,be={simplex:1,warp:2,dots:3,wave:4,ripple:5,swirl:6,sphere:7},_e={random:1,"2x2":2,"4x4":3,"8x8":4};function q(i){if(Array.isArray(i))return i.length===4?i:i.length===3?[...i,1]:O;if(typeof i!="string")return O;let t,s,r,a=1;if(i.startsWith("#"))[t,s,r,a]=je(i);else if(i.startsWith("rgb"))[t,s,r,a]=ye(i);else if(i.startsWith("hsl"))[t,s,r,a]=Se(we(i));else return console.error("Unsupported color format",i),O;return[F(t,0,1),F(s,0,1),F(r,0,1),F(a,0,1)]}function je(i){i=i.replace(/^#/,""),i.length===3&&(i=i.split("").map(o=>o+o).join("")),i.length===6&&(i=i+"ff");const t=parseInt(i.slice(0,2),16)/255,s=parseInt(i.slice(2,4),16)/255,r=parseInt(i.slice(4,6),16)/255,a=parseInt(i.slice(6,8),16)/255;return[t,s,r,a]}function ye(i){const t=i.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255,t[4]===void 0?1:parseFloat(t[4])]:[0,0,0,1]}function we(i){const t=i.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0"),t[4]===void 0?1:parseFloat(t[4])]:[0,0,0,1]}function Se(i){const[t,s,r,a]=i,o=t/360,n=s/100,l=r/100;let x,m,c;if(s===0)x=m=c=l;else{const g=(v,d,h)=>(h<0&&(h+=1),h>1&&(h-=1),h<.16666666666666666?v+(d-v)*6*h:h<.5?d:h<.6666666666666666?v+(d-v)*(.6666666666666666-h)*6:v),u=l<.5?l*(1+n):l+n-l*n,N=2*l-u;x=g(N,u,o+1/3),m=g(N,u,o),c=g(N,u,o-1/3)}return[x,m,c,a]}const F=(i,t,s)=>Math.min(Math.max(i,t),s),O=[0,0,0,1];function Ne(){if(typeof window>"u"){console.warn("Paper Shaders: canât create an image on the server");return}const i=new Image;return i.src=Re,i}const Re="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";function Ue(i){const t=j.useRef(void 0),s=j.useCallback(r=>{const a=i.map(o=>{if(o!=null){if(typeof o=="function"){const n=o,l=n(r);return typeof l=="function"?l:()=>{n(null)}}return o.current=r,()=>{o.current=null}}});return()=>{a.forEach(o=>o?.())}},i);return j.useMemo(()=>i.every(r=>r==null)?null:r=>{t.current&&(t.current(),t.current=void 0),r!=null&&(t.current=s(r))},i)}
452function Z(i){if(i.naturalWidth<1024&&i.naturalHeight<1024){if(i.naturalWidth<1||i.naturalHeight<1)return;const t=i.naturalWidth/i.naturalHeight;i.width=Math.round(t>1?1024*t:1024),i.height=Math.round(t>1?1024:1024/t)}}async function K(i){const t={},s=[],r=o=>{try{return o.startsWith("/")||new URL(o),!0}catch{return!1}},a=o=>{try{return o.startsWith("/")?!1:new URL(o,window.location.origin).origin!==window.location.origin}catch{return!1}};return Object.entries(i).forEach(([o,n])=>{if(typeof n=="string"){if(!n){t[o]=Ne();return}if(!r(n)){console.warn(`Uniform "${o}" has invalid URL "${n}". Skipping image loading.`);return}const l=new Promise((x,m)=>{const c=new Image;a(n)&&(c.crossOrigin="anonymous"),c.onload=()=>{Z(c),t[o]=c,x()},c.onerror=()=>{console.error(`Could not set uniforms. Failed to load image at ${n}`),m()},c.src=n});s.push(l)}else n instanceof HTMLImageElement&&Z(n),t[o]=n}),await Promise.all(s),t}const J=j.forwardRef(function({fragmentShader:t,uniforms:s,webGlContextAttributes:r,speed:a=0,frame:o=0,width:n,height:l,minPixelRatio:x,maxPixelCount:m,mipmaps:c,style:g,...u},N){const[v,d]=j.useState(!1),h=j.useRef(null),f=j.useRef(null),b=j.useRef(r);j.useEffect(()=>((async()=>{const B=await K(s);h.current&&!f.current&&(f.current=new ae(h.current,t,B,b.current,a,o,x,m,c),d(!0))})(),()=>{f.current?.dispose(),f.current=null}),[t]),j.useEffect(()=>{let U=!1;return(async()=>{const A=await K(s);U||f.current?.setUniforms(A)})(),()=>{U=!0}},[s,v]),j.useEffect(()=>{f.current?.setSpeed(a)},[a,v]),j.useEffect(()=>{f.current?.setMaxPixelCount(m)},[m,v]),j.useEffect(()=>{f.current?.setMinPixelRatio(x)},[x,v]),j.useEffect(()=>{f.current?.setFrame(o)},[o,v]);const R=Ue([h,N]);return e.jsx("div",{ref:R,style:n!==void 0||l!==void 0?{width:typeof n=="string"&&isNaN(+n)===!1?+n:n,height:typeof l=="string"&&isNaN(+l)===!1?+l:l,...g}:g,...u})});J.displayName="ShaderMount";const _={params:{...ue,speed:1,frame:0,scale:.6,colorBack:"#000000",colorFront:"#00b2ff",shape:"sphere",type:"4x4",size:2}},ee=j.memo(function({speed:t=_.params.speed,frame:s=_.params.frame,colorBack:r=_.params.colorBack,colorFront:a=_.params.colorFront,shape:o=_.params.shape,type:n=_.params.type,pxSize:l,size:x=l===void 0?_.params.size:l,fit:m=_.params.fit,scale:c=_.params.scale,rotation:g=_.params.rotation,originX:u=_.params.originX,originY:N=_.params.originY,offsetX:v=_.params.offsetX,offsetY:d=_.params.offsetY,worldWidth:h=_.params.worldWidth,worldHeight:f=_.params.worldHeight,...b}){const R={u_colorBack:q(r),u_colorFront:q(a),u_shape:be[o],u_type:_e[n],u_pxSize:x,u_fit:xe[m],u_scale:c,u_rotation:g,u_offsetX:v,u_offsetY:d,u_originX:u,u_originY:N,u_worldWidth:h,u_worldHeight:f};return e.jsx(J,{...b,speed:t,frame:s,fragmentShader:ve,uniforms:R})}),M={primary:{front:"#E8EEFF",back:"#5B6FDB"},secondary:{front:"#FFF8E8",back:"#9C8340"},tertiary:{front:"#E8FFE8",back:"#5AA75A"}};function L({title:i,description:t,badge:s,shape:r,colors:a,speed:o=.2}){return e.jsxs("button",{type:"button",className:"group relative w-full overflow-hidden rounded-sm border border-border bg-background-card text-left transition-all hover:border-field-border-hover",children:[e.jsxs("div",{className:"relative h-36 overflow-hidden",children:[e.jsx(ee,{style:{position:"absolute",inset:0,width:"100%",height:"100%"},colorBack:a.back,colorFront:a.front,shape:r,type:"4x4",size:2,speed:o,scale:.6}),e.jsx("div",{className:"absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-background-card/90 to-transparent"})]}),e.jsxs("div",{className:"relative -mt-4 px-4 pb-4",children:[e.jsx(S,{className:"rounded-sm bg-background-card font-mono text-[10px]",children:s}),e.jsx("h3",{className:"mt-2 font-heading text-lg font-semibold tracking-tight text-foreground",children:i}),e.jsx("p",{className:"mt-1 text-sm leading-relaxed text-foreground-muted",children:t})]})]})}function Be({title:i,description:t,badge:s,stats:r,shape:a,colors:o,speed:n=.1}){return e.jsxs("button",{type:"button",className:"group relative w-full overflow-hidden rounded-sm border border-border bg-invert text-left transition-all hover:bg-invert/95",children:[e.jsx("div",{className:"absolute inset-0 overflow-hidden opacity-30",children:e.jsx(ee,{style:{position:"absolute",inset:0,width:"100%",height:"100%"},colorBack:o.back,colorFront:o.front,shape:a,type:"4x4",size:2,speed:n,scale:.8})}),e.jsxs("div",{className:"relative p-6",children:[e.jsxs(S,{className:"rounded-sm bg-secondary font-mono text-xs text-secondary-foreground",children:[e.jsx(se,{className:"mr-1 size-3",weight:"fill"}),s]}),e.jsx("h3",{className:"mt-4 font-heading text-2xl font-bold tracking-tight text-invert-foreground",children:i}),e.jsx("p",{className:"mt-2 max-w-lg text-sm leading-relaxed text-invert-foreground
452/70",children:t}),e.jsx("div",{className:"mt-6 flex gap-8",children:r.map(l=>e.jsxs("div",{children:[e.jsx("div",{className:"font-heading text-2xl font-bold text-secondary",children:l.value}),e.jsx("div",{className:"mt-0.5 text-xs text-invert-foreground/60",children:l.label})]},l.label))}),e.jsxs("div",{className:"mt-6 flex items-center gap-2",children:[e.jsx("span",{className:"text-sm font-semibold text-secondary",children:"Learn more"}),e.jsx(Q,{className:"size-4 text-secondary transition-transform group-hover:translate-x-1","aria-hidden":"true"})]})]})]})}function T({title:i,description:t,children:s}){return e.jsx("section",{className:"border-b border-border px-6 py-8",children:e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)]",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-heading text-xl font-semibold tracking-tight text-foreground",children:i}),e.jsx("p",{className:"mt-2 text-sm leading-relaxed text-foreground-muted",children:t})]}),e.jsx("div",{className:"grid gap-4",children:s})]})})}function ze(){return e.jsxs("div",{children:[e.jsx(T,{title:"Feature Cards with Dithering",description:"Cards with animated dithering headers using @paper-design/shaders-react. The gradient fade creates a smooth transition to content.",children:e.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:[e.jsx(L,{title:"Email Discovery",description:"Find verified work emails from company domains and names.",badge:"Enrichment",shape:"warp",colors:M.primary,speed:.2}),e.jsx(L,{title:"AI Opener Generator",description:"Create personalized first-touch messages that convert.",badge:"AI Feature",shape:"wave",colors:M.secondary,speed:.15}),e.jsx(L,{title:"Company Insights",description:"Get rich company data including headcount and funding.",badge:"Data",shape:"dots",colors:M.tertiary,speed:.25})]})}),e.jsx(T,{title:"Hero Card with Dithering",description:"Large inverted card with subtle dithering overlay. For key features or promotional content.",children:e.jsx("div",{className:"max-w-2xl",children:e.jsx(Be,{title:"Generate personalized openers at scale",description:"Turn any spreadsheet column into context. Our AI reads company data, recent news, and LinkedIn profiles to craft first-touch copy.",badge:"AI-Powered",stats:[{value:"3x",label:"Reply rate"},{value:"< 2s",label:"Per row"},{value:"20+",label:"Tone presets"}],shape:"warp",colors:M.secondary,speed:.08})})}),e.jsx(T,{title:"Static Dithering (speed=0)",description:"Same card with static background. Better for dense UIs where animation would be distracting.",children:e.jsx("div",{className:"max-w-md",children:e.jsx(L,{title:"LinkedIn Sales Nav Import",description:"Pull leads directly from your Sales Navigator searches.",badge:"Source",shape:"ripple",colors:M.primary,speed:0})})}),e.jsx(T,{title:"Available Shapes",description:"Dithering supports 6 shapes: warp, wave, dots, ripple, swirl, sphere. Pick based on visual effect needed.",children:e.jsxs("div",{className:"rounded-sm border border-border bg-background-muted/50 p-4",children:[e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:'shape: "warp" | "wave" | "dots" | "ripple" | "swirl" | "sphere"'}),e.jsx("p",{className:"mt-2 text-sm text-foreground-muted",children:"Note: WebGL limits concurrent contexts to ~8-16. Use sparingly in production - one or two animated backgrounds per page maximum."})]})}),e.jsx(T,{title:"Pattern Backgrounds",description:"Blue backgrounds with dot or grid patterns. Gradient and solid variants. Pure CSS implementation.",children:e.jsxs("div",{className:"grid grid-cols-4 gap-4",children:[e.jsxs("div",{children:[e.jsx($,{pattern:"dots",variant:"gradient",className:"h-48 w-full rounded-sm"}),e.jsx("p",{className:"mt-2 text-center font-mono text-xs text-foreground-muted",children:"Gradient + Dots"})]}),e.jsxs("div",{children:[e.jsx($,{pattern:"grid",variant:"gradient",className:"h-48 w-full rounded-sm"}),e.jsx("p",{className:"mt-2 text-center font-mono text-xs text-foreground-muted",children:"Gradient + Grid"})]}),e.jsxs("div",{children:[e.jsx($,{pattern:"dots",variant:"solid",className:"h-48 w-full rounded-sm"}),e.jsx("p",{className:"mt-2 text-center font-mono text-xs text-foreground-muted",children:"Solid + Dots"})]}),e.jsxs("div",{children:[e.jsx($,{pattern:"grid",variant:"solid",className:"h-48 w-full rounded-sm"}),e.jsx("p",{className:"mt-2 text-center font-mono text-xs text-foreground-muted",children:"Solid + Grid"})]})]})}),e.jsx(T,{title:"Floating Card on Gradient",description:"Card with soft outer glow effect floating over the gradient dot pattern background.",children:e.jsx($,{pattern:"dots",variant:"gradient",className:"flex h-[500px] w-full items-center justify-center rounded-sm",children:e.jsx(Ee,{className:"h-80 w-80"})})}),e.jsx(T,{title:"Grid Shapes",description:"Organic shapes made from connected grid squares. Cells snap to grid, rounded corners with smooth connectors between adjacent cells.",children:e.jsx("div",{className:"grid grid-cols-4 gap-4",children:Pe.map(({name:i,cells:t,variant:s,cellSize:r})=>e.jsxs("div",{children:[e.jsx($,{pattern:"grid",variant:"gradient",className:"flex h-48 w-full items-center justify-center rounded-sm",children:s==="pixel"?e.jsx(Ve,{cells:t,cellSize:r??24}):e.jsx(Ae,{cells:t,cellSize:r??48,radius:10})}),e.jsx("p",{className:"mt-2 text-center font-mono text-xs text-foreground-muted",children:i})]},i))})})]})}function $({className:i,children:t,pattern:s="dots",variant:r="gradient"}){const a=r==="gradient"?"linear-gradient(180deg, oklch(0.481 0.157 264.7) 0%, oklch(0.563 0.184 264.55) 50%, oklch(0.653 0.15 269.5) 100%)":"oklch(0.563 0.184 264.55)",o=s==="dots"?{backgroundImage:"radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px)",backgroundSize:"24px 24px"}:{backgroundImage:"linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)",backgroundSize:"24px 24px"};return e.jsxs("div",{className:D("relative overflow-hidden",i),style:{background:a},children:[e.jsx("div",{className:"pointer-events-none absolute inset-0",style:o}),t]})}function Ee({className:i}){return e.jsxs("div",{className:D("relative",i),children:[e.jsx("div",{className:"absolute -inset-3 rounded-3xl",style:{background:"linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.12) 100%)",backdropFilter:"blur(2px)",WebkitBackdropFilter:"blur(2px)"}}),e.jsx("div",{className:"relative h-full w-full rounded-2xl bg-white",style:{boxShadow:"0 8px 32px -8px rgba(0,0,0,0.15)"}})]})}function Ae({cells:i,cellSize:t=64,radius:s=12,className:r}){const a=new Set(i.map(([d,h])=>`${d},${h}`)),o=(d,h)=>a.has(`${d},${h}`),n=Math.min(...i.map(([d])=>d)),l=Math.max(...i.map(([d])=>d)),x=Math.min(...i.map(([,d])=>d)),m=Math.max(...i.map(([,d])=>d)),c=(l-n+1)*t,g=(m-x+1)*t,u=s,N=[];for(const[d,h]of i){const f=(d-n)*t,b=(h-x)*t,R=o(d,h-1),U=o(d,h+1),B=o(d-1,h),A=o(d+1,h),z=!R&&!B?u:0,
452V=!R&&!A?u:0,P=!U&&!A?u:0,k=!U&&!B?u:0;let p=`M ${f+z} ${b}`;p+=` H ${f+t-V}`,V>0&&(p+=` A ${V} ${V} 0 0 1 ${f+t} ${b+V}`),p+=` V ${b+t-P}`,P>0&&(p+=` A ${P} ${P} 0 0 1 ${f+t-P} ${b+t}`),p+=` H ${f+k}`,k>0&&(p+=` A ${k} ${k} 0 0 1 ${f} ${b+t-k}`),p+=` V ${b+z}`,z>0&&(p+=` A ${z} ${z} 0 0 1 ${f+z} ${b}`),p+=" Z",N.push(p)}const v=[];for(const[d,h]of i){const f=(d-n)*t,b=(h-x)*t,R=o(d,h-1),U=o(d,h+1),B=o(d-1,h),A=o(d+1,h),z=o(d+1,h-1),V=o(d+1,h+1),P=o(d-1,h+1),k=o(d-1,h-1);if(A&&R&&!z){const p=f+t,y=b;v.push(`M ${p} ${y} L ${p+u} ${y} A ${u} ${u} 0 0 1 ${p} ${y-u} Z`)}if(A&&U&&!V){const p=f+t,y=b+t;v.push(`M ${p} ${y} L ${p} ${y+u} A ${u} ${u} 0 0 1 ${p+u} ${y} Z`)}if(B&&U&&!P){const p=f,y=b+t;v.push(`M ${p} ${y} L ${p-u} ${y} A ${u} ${u} 0 0 1 ${p} ${y+u} Z`)}if(B&&R&&!k){const p=f,y=b;v.push(`M ${p} ${y} L ${p} ${y-u} A ${u} ${u} 0 0 1 ${p-u} ${y} Z`)}}return e.jsx("svg",{className:r,width:c,height:g,viewBox:`0 0 ${c} ${g}`,fill:"none",children:e.jsx("path",{d:[...N,...v].join(" "),fill:"oklch(0.957 0.016 278.56)"})})}function Ve({cells:i,cellSize:t=24,radius:s=6,className:r}){const a=Math.min(...i.map(([c])=>c)),o=Math.max(...i.map(([c])=>c)),n=Math.min(...i.map(([,c])=>c)),l=Math.max(...i.map(([,c])=>c)),x=(o-a+1)*t,m=(l-n+1)*t;return e.jsx("svg",{className:r,width:x,height:m,viewBox:`0 0 ${x} ${m}`,fill:"none",children:i.map(([c,g])=>e.jsx("rect",{x:(c-a)*t+1,y:(g-n)*t+1,width:t-2,height:t-2,rx:s,fill:"oklch(0.957 0.016 278.56)"},`${c}-${g}`))})}const Pe=[{name:"lShape",cells:[[0,0],[0,1],[1,1]]},{name:"corner",cells:[[0,0],[1,0],[0,1]]},{name:"zigzag",cells:[[0,0],[1,0],[1,1],[2,1]]},{name:"tShape",cells:[[0,0],[1,0],[2,0],[1,1]]},{name:"cross",cells:[[1,0],[0,1],[1,1],[2,1],[1,2]]},{name:"arrow",cells:[[1,0],[0,1],[1,1],[2,1],[1,2],[1,3]]},{name:"hook",cells:[[2,0],[2,1],[0,2],[1,2],[2,2]]},{name:"stairs",cells:[[0,0],[1,1],[2,2],[3,3]]},{name:"snake",cells:[[0,0],[1,0],[1,1],[1,2],[2,2]]},{name:"wave",cells:[[0,0],[1,1],[2,0],[3,1],[4,0]]},{name:"bolt",cells:[[1,0],[2,0],[1,1],[0,2],[1,2],[0,3]]},{name:"branch",cells:[[0,0],[1,1],[2,0],[1,2],[1,3]]},{name:"email",cells:[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0],[0,1],[1,1],[4,1],[5,1],[0,2],[2,2],[3,2],[5,2],[0,3],[5,3],[0,4],[1,4],[2,4],[3,4],[4,4],[5,4]],variant:"pixel",cellSize:24}],ke=[{label:"Personalization at scale",headline:"Personalize every prospect.",highlight:"At any scale.",body:"Research, qualify, and write from the context in every row."},{label:"Lead list building",headline:"Build the lead list",highlight:"your campaign actually needs.",body:"Source across channels, then shape the list in one spreadsheet."},{label:"AI at scale",headline:"Research 1,000 accounts",highlight:"like you researched them one by one.",body:"Set the research once, then inspect the answer on every row."},{label:"Prospect enrichment",headline:"The right integration",highlight:"for every data point.",body:"Combine the best providers for every email, phone, and signal."},{label:"Personalized sequences",headline:"Turn prospect research",highlight:"into messages worth sending.",body:"Turn each prospectâs context into email and LinkedIn sequences."},{label:"Quality / price",headline:"High-quality enrichment.",highlight:"Without the Clay-sized bill.",body:"Spend more of your budget on usable prospect data."}];function Te(){return e.jsxs("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0 hidden sm:block",children:[e.jsx("div",{className:"cta-integration-drift-a absolute left-[7%] top-[9%] [animation-delay:-1.8s]",children:e.jsx("div",{className:"flex size-16 items-center justify-center rounded-full border border-white/70 bg-white/90 shadow-[0_14px_34px_rgba(24,45,110,0.2)] backdrop-blur-sm",children:e.jsx(I,{logo:"linkedin",size:"lg"})})}),e.jsx("div",{className:"cta-integration-drift-b absolute right-[9%] top-[13%] [animation-delay:-4.2s]",children:e.jsx("div",{className:"flex size-13 items-center justify-center rounded-full border border-white/60 bg-white/85 shadow-[0_10px_28px_rgba(24,45,110,0.16)] backdrop-blur-sm",children:e.jsx(I,{logo:"maps",size:"md"})})}),e.jsx("div",{className:"cta-integration-drift-c absolute left-[4%] top-[47%] opacity-55 blur-[1.2px] [animation-delay:-2.6s]",children:e.jsx("div",{className:"flex size-11 items-center justify-center rounded-full border border-white/50 bg-white/75 shadow-[0_8px_22px_rgba(24,45,110,0.12)]",children:e.jsx(I,{logo:"meta",size:"sm"})})}),e.jsx("div",{className:"cta-integration-drift-b absolute bottom-[9%] left-[11%] opacity-85 blur-[0.35px] [animation-delay:-6.1s]",children:e.jsx("div",{className:"flex size-14 items-center justify-center rounded-full border border-white/65 bg-white/85 shadow-[0_12px_30px_rgba(24,45,110,0.18)] backdrop-blur-sm",children:e.jsx(I,{logo:"instagram",size:"md"})})}),e.jsx("div",{className:"cta-integration-drift-a absolute bottom-[
45210%] right-[10%] opacity-75 blur-[0.7px] [animation-delay:-5.3s]",children:e.jsx("div",{className:"flex size-15 items-center justify-center rounded-full border border-white/60 bg-white/80 shadow-[0_12px_32px_rgba(24,45,110,0.16)] backdrop-blur-sm",children:e.jsx(I,{logo:"google",size:"lg"})})}),e.jsx("div",{className:"cta-integration-drift-c absolute right-[4%] top-[49%] opacity-50 blur-[1.4px] [animation-delay:-7.4s]",children:e.jsx("div",{className:"flex size-10 items-center justify-center rounded-full border border-white/45 bg-white/70 shadow-[0_8px_20px_rgba(24,45,110,0.1)]",children:e.jsx(I,{logo:"shopify",size:"sm"})})})]})}function Ce({cta:i}){return e.jsx($,{pattern:"grid",variant:"solid",className:"flex min-h-[320px] rounded-xl border border-white/15 p-6 shadow-sm sm:p-8",children:e.jsxs("div",{className:"relative flex w-full flex-col items-center justify-center text-center",children:[i.label==="Prospect enrichment"&&e.jsx(Te,{}),e.jsxs("div",{className:"relative z-10 flex w-full flex-col items-center",children:[e.jsxs("h3",{className:"max-w-xl font-heading text-3xl font-medium leading-[1.02] tracking-[-0.04em] text-white sm:text-4xl",children:[e.jsx("span",{className:"block",children:i.headline}),e.jsx("span",{className:"mt-2 block text-secondary",children:i.highlight})]}),e.jsx("p",{className:"mt-5 max-w-lg text-sm font-medium leading-6 text-blue-50/70",children:i.body}),e.jsx("div",{className:"mt-7",children:e.jsxs(w,{shape:"pill",size:"sm",className:"bg-white text-primary hover:bg-blue-50",children:["Try Cockpit for free",e.jsx(Q,{"aria-hidden":"true"})]})})]})]})})}function $e(){return e.jsxs("section",{className:"border-b border-border px-6 py-8",children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("p",{className:"font-mono text-xs font-medium text-foreground-muted",children:"Calls to action"}),e.jsx("h2",{className:"mt-2 font-heading text-xl font-semibold tracking-tight text-foreground",children:"Benefit-led blue CTAs"}),e.jsx("p",{className:"mt-2 max-w-2xl text-sm leading-relaxed text-foreground-muted",children:"Six directions covering Cockpitâs strongest benefits, from list building and controlled AI to personalization and accessible pricing."})]}),e.jsx("div",{className:"grid gap-5 lg:grid-cols-2",children:ke.map((i,t)=>e.jsxs("div",{children:[e.jsxs("p",{className:"mb-2 font-mono text-[11px] font-medium uppercase tracking-wide text-foreground-muted",children:[String(t+1).padStart(2,"0")," · ",i.label]}),e.jsx(Ce,{cta:i})]},i.label))})]})}function C({title:i,description:t,children:s}){return e.jsx("section",{className:"border-b border-border px-6 py-8",children:e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)]",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-heading text-xl font-semibold tracking-tight text-foreground",children:i}),e.jsx("p",{className:"mt-2 text-sm leading-relaxed text-foreground-muted",children:t})]}),e.jsx("div",{className:"grid gap-4",children:s})]})})}function E({label:i,children:t}){return e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx("span",{className:"w-24 shrink-0 font-mono text-xs text-foreground-muted",children:i}),t]})}function te({children:i,className:t}){return e.jsxs("span",{className:D("font-mono text-xs uppercase tracking-wide text-foreground-muted",t),children:[e.jsx("span",{className:"text-primary",children:"["}),e.jsx("span",{className:"mx-1.5",children:i}),e.jsx("span",{className:"text-primary",children:"]"})]})}function Ie(){return e.jsxs("div",{className:"grid justify-items-center gap-4 roun
452ded-sm border border-border bg-background p-8 text-center",children:[e.jsx(te,{children:"core features"}),e.jsx("h3",{className:"font-heading text-2xl font-medium leading-tight tracking-tight text-foreground",children:"Everything you need from import to outreach"}),e.jsx("p",{className:"max-w-lg text-sm leading-relaxed text-foreground-muted",children:"Four pillars that power your lead enrichment workflow."})]})}function ie(){return e.jsxs("div",{children:[e.jsx(C,{title:"Kicker / Eyebrow",description:"Section label with bracket style. Used above headings on landing pages.",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(E,{label:"default",children:e.jsx(te,{children:"core features"})}),e.jsx(E,{label:"in context",children:e.jsx("div",{className:"w-full",children:e.jsx(Ie,{})})})]})}),e.jsx(C,{title:"Button",description:"Primary action buttons. Rounded pill shape with multiple variants and sizes.",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(E,{label:"variant",children:[e.jsx(w,{variant:"default",children:"Primary"}),e.jsx(w,{variant:"physical",children:"Physical"}),e.jsx(w,{variant:"invert",children:"Invert"}),e.jsx(w,{variant:"secondary",children:"Secondary"}),e.jsx(w,{variant:"outline",children:"Outline"}),e.jsx(w,{variant:"ghost",children:"Ghost"}),e.jsx(w,{variant:"destructive",children:"Destructive"})]}),e.jsxs(E,{label:"size",children:[e.jsx(w,{size:"xs",children:"Extra Small"}),e.jsx(w,{size:"sm",children:"Small"}),e.jsx(w,{size:"default",children:"Default"}),e.jsx(w,{size:"lg",children:"Large"})]}),e.jsxs(E,{label:"disabled",children:[e.jsx(w,{disabled:!0,children:"Disabled"}),e.jsx(w,{variant:"outline",disabled:!0,children:"Disabled"})]})]})}),e.jsx(C,{title:"Badge",description:"Status indicators and labels. Used for tags, statuses, and metadata.",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(E,{label:"variant",children:[e.jsx(S,{variant:"default",children:"Default"}),e.jsx(S,{variant:"secondary",children:"Secondary"}),e.jsx(S,{variant:"tertiary",children:"Tertiary"}),e.jsx(S,{variant:"destructive",children:"Destructive"}),e.jsx(S,{variant:"outline",children:"Outline"}),e.jsx(S,{variant:"ghost",children:"Ghost"}),e.jsx(S,{variant:"muted",children:"Muted"}),e.jsx(S,{variant:"nuance",children:"Nuance"}),e.jsx(S,{variant:"success",children:"Success"}),e.jsx(S,{variant:"card",children:"Card"})]})})}),e.jsx(C,{title:"Input",description:"Text input fields with consistent styling and focus states.",children:e.jsxs("div",{className:"max-w-sm space-y-4",children:[e.jsx(E,{label:"default",children:e.jsx(G,{placeholder:"Enter text...",className:"flex-1"})}),e.jsx(E,{label:"disabled",children:e.jsx(G,{placeholder:"Disabled",disabled:!0,className:"flex-1"})})]})}),e.jsx(C,{title:"Card Shell",description:"Container component for grouped content. Supports interactive and selected states.",children:e.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:[e.jsxs(W,{children:[e.jsx("p",{className:"font-medium text-foreground",children:"Default Card"}),e.jsx("p",{className:"mt-1 text-sm text-foreground-muted",children:"Static container for content"})]}),e.jsxs(W,{interactive:!0,children:[e.jsx("p",{className:"font-medium text-foreground",children:"Interactive Card"}),e.jsx("p",{className:"mt-1 text-sm text-foreground-muted",children:"Hover and click states"})]}),e.jsxs(W,{interactive:!0,selected:!0,children:[e.jsx("p",{className:"font-medium text-foreground",children:"Selected Card"}),e.jsx("p",{className:"mt-1 text-sm text-foreground-muted",children:"Active selection state"})]})]})}),e.jsx(C,{title:"Typography",description:"Heading and body text styles using the design system fonts.",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"headings"}),e.jsx("h1",{className:"font-heading text-4xl font-medium tracking-tight text-foreground",children:"Heading 1"}),e.jsx("h2",{className:"font-heading text-3xl font-medium tracking-tight text-foreground",children:"Heading 2"}),e.jsx("h3",{className:"font-heading text-2xl font-medium tracking-tight text-foreground",children:"Heading 3"}),e.jsx("h4",{className:"font-heading text-xl font-medium tracking-tight text-foreground",children:"Heading 4"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"body"}),e.jsx("p",{className:"text-base text-foreground",children:"Body text (base) - The quick brown fox jumps over the lazy dog."}),e.jsx("p",{className:"text-sm text-foreground-muted",children:"Body text (sm, muted) - Secondary information and descriptions."}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"Mono text (xs) - Code, labels, metadata"})]})]})}),e.jsx(C,{title:"Colors",description:"Semantic color tokens from the design system.",children:e.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm bg-primary"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"primary"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm bg-secondary"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"secondary"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm bg-destructive"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"destructive"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm bg-muted"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"muted"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm border border-border bg-background"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"background"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm border border-border bg-background-card"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"background-card"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm border border-border bg-background-muted"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"background-muted"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-16 rounded-sm bg-invert"}),e.jsx("p",{className:"font-mono text-xs text-foreground-muted",children:"invert"})]})]})})]})}const H=[{id:"design-system",label:"Design System",component:ie}
452,{id:"backgrounds",label:"Background Patterns",component:ze},{id:"calls-to-action",label:"Calls to Action",component:$e}];function Ke(){const[i,t]=j.useState(H[0].id),s=H.find(r=>r.id===i)?.component??ie;return e.jsxs(re,{children:[e.jsx(oe,{}),e.jsxs("main",{className:"min-w-0 flex-1",children:[e.jsxs("header",{className:"border-b border-border px-6 py-6",children:[e.jsx("p",{className:"font-mono text-xs font-medium text-foreground-muted",children:"Component tests"}),e.jsx("h1",{className:"mt-2 font-heading text-3xl font-medium tracking-tight text-foreground",children:"Design system and CTA gallery"}),e.jsx("p",{className:"mt-3 max-w-2xl text-sm leading-6 text-foreground-muted",children:"A working reference for the components and product stories used across Cockpit."}),e.jsx("div",{className:"mt-4 flex gap-1",children:H.map(r=>e.jsx("button",{type:"button",onClick:()=>t(r.id),className:D("rounded-sm px-3 py-1.5 font-mono text-xs font-medium transition-colors",i===r.id?"bg-foreground text-background":"bg-background-muted text-foreground-muted hover:bg-border hover:text-foreground"),children:r.label},r.id))})]}),e.jsx(s,{})]})]})}export{Ke as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.