@nous-research/ui 0.11.0 → 0.13.0

package/dist/ui/components/tv.js

@@ -140,15 +140,42 @@ function useGL(ref) {
         const ro = new ResizeObserver(resize);
         ro.observe(c);
         const t0 = performance.now();
-        const loop = () => {
+        let visible = !document.hidden;
+        let inView = true;
+        let raf2 = 0;
+        const tick = () => {
             gl.uniform1f(uT, (performance.now() - t0) / 1e3);
             gl.uniform2f(uR, c.width, c.height);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            raf.current = requestAnimationFrame(loop);
+            raf2 = requestAnimationFrame(tick);
         };
-        raf.current = requestAnimationFrame(loop);
+        const start = () => {
+            if (visible && inView && !raf2) {
+                raf2 = requestAnimationFrame(tick);
+            }
+        };
+        const stop = () => {
+            if (raf2) {
+                cancelAnimationFrame(raf2);
+                raf2 = 0;
+            }
+        };
+        const onVisibility = () => {
+            visible = !document.hidden;
+            visible ? start() : stop();
+        };
+        const io = new IntersectionObserver(entries => {
+            inView = entries.some(e => e.isIntersecting);
+            inView ? start() : stop();
+        }, { threshold: 0 });
+        io.observe(c);
+        document.addEventListener('visibilitychange', onVisibility);
+        start();
+        raf.current = raf2;
         return () => {
-            cancelAnimationFrame(raf.current);
+            stop();
+            io.disconnect();
+            document.removeEventListener('visibilitychange', onVisibility);
             ro.disconnect();
         };
     }, [ref]);

package/dist/ui/components/tv.js.map

@@ -1 +1 @@
-{"version":3,"file":"tv.js","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,IAAI,GAAG,UAAU,CAAC,wDAAwD,CAAA;AAEhF,MAAM,IAAI,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGtB,CAAA;AAEF,SAAS,KAAK,CAAC,GAA8C;IAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;QAErB,IAAI,CAAC,CAAC,EAAE,CAAC;YACP,OAAM;QACR,CAAC;QAED,MAAM,EAAE,GAAG,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAEhC,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAM;QACR,CAAC;QAED,MAAM,EAAE,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,EAAE;YACvC,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAE,CAAA;YAChC,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YACvB,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;YAEnB,OAAO,CAAC,CAAA;QACV,CAAC,CAAA;QAED,MAAM,CAAC,GAAG,EAAE,CAAC,aAAa,EAAG,CAAA;QAC7B,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAA;QAC9C,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAA;QAChD,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACjB,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;QAEhB,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,EAAE,CAAC,CAAA;QACjD,EAAE,CAAC,UAAU,CACX,EAAE,CAAC,YAAY,EACf,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAC9C,EAAE,CAAC,WAAW,CACf,CAAA;QAED,MAAM,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACtC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAA;QAC7B,EAAE,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEnD,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACxC,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAExC,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAA;YACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAA;YAEzC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAA;YAC1B,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;YAE5B,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;QACtC,CAAC,CAAA;QAED,MAAM,EAAE,CAAA;QAER,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAA;QACrC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAEb,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAE5B,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAA;YAChD,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;YACnC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAEtC,GAAG,CAAC,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC3C,CAAC,CAAA;QAED,GAAG,CAAC,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACjC,EAAE,CAAC,UAAU,EAAE,CAAA;QACjB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AACX,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,EAAE,SAAS,EAA0B;IACtD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,KAAK,CAAC,SAAS,CAAC,CAAA;IAEhB,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAC/D,eAAK,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,aACvE,eACE,CAAC,EAAC,iUAAiU,EACnU,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,MAAM,GAClB,EAEF,eACE,CAAC,EAAC,iEAAiE,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,KAAK,GACjB,EAEF,eACE,CAAC,EAAC,8DAA8D,EAChE,IAAI,EAAC,SAAS,GACd,IACE,EAEN,iBACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,SAAS,EACd,KAAK,EAAE;oBACL,QAAQ,EACN,iEAAiE;iBACpE,GACD,IACE,CACP,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\n\nconst VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`\n\nconst FRAG = /* glsl */ `precision highp float;\nuniform float t;\nuniform vec2 r;\n\nconst float FBM_STR = .08;\n\nfloat h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\nfloat n2(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  f = f * f * (3. - 2. * f);\n\n  return mix(\n    mix(h(i), h(i + vec2(1, 0)), f.x),\n    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),\n    f.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0., a = .5;\n\n  for (int i = 0; i < 4; i++) {\n    v += a * n2(p);\n    p *= 2.1;\n    a *= .45;\n  }\n\n  return v;\n}\n\nfloat drift(float speed, float s) {\n  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));\n}\n\nfloat brushAt(vec2 uv, float y, float th, float s) {\n  float hw = .34 + .08 * h(vec2(s, 77.));\n  float cx = .5;\n  float xn = (uv.x - (cx - hw)) / (2. * hw);\n  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);\n  float localTh = th * env;\n\n  if (localTh < .002) return 0.;\n\n  float morph = floor(t * 8.) * .7 + s;\n  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;\n  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;\n  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;\n  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;\n\n  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));\n\n  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4\n    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35\n    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;\n\n  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));\n\n  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / r;\n  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));\n  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;\n\n  vec3 c = vec3(.992, .992, .051);\n\n  float smScroll = -drift(.04, 5.) * 2.;\n  float sm = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));\n  }\n\n  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);\n  float big = max(\n    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),\n    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))\n  );\n\n  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));\n  c *= .94 + .06 * sin(uv.y * r.y * 6.283);\n\n  vec2 raw = gl_FragCoord.xy / r;\n  float dx = min(raw.x - .22, .90 - raw.x);\n  float dy = min(raw.y - .29, .86 - raw.y);\n  float cycle = floor(t * .4);\n  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))\n    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)\n    * (.7 + .3 * h(vec2(cycle, 7.)));\n\n  float scanY = floor(gl_FragCoord.y);\n  float rowNoise = h(vec2(scanY, floor(t * 30.)));\n  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));\n\n  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);\n}`\n\nfunction useGL(ref: React.RefObject<HTMLCanvasElement | null>) {\n  const raf = useRef(0)\n\n  useEffect(() => {\n    const c = ref.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const sh = (type: number, src: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, src)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const p = gl.createProgram()!\n    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(p)\n    gl.useProgram(p)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(p, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(p, 't')\n    const uR = gl.getUniformLocation(p, 'r')\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const t0 = performance.now()\n\n    const loop = () => {\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n\n      raf.current = requestAnimationFrame(loop)\n    }\n\n    raf.current = requestAnimationFrame(loop)\n\n    return () => {\n      cancelAnimationFrame(raf.current)\n      ro.disconnect()\n    }\n  }, [ref])\n}\n\nexport function TV({ className }: { className?: string }) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  useGL(canvasRef)\n\n  return (\n    <div className={['relative', className].filter(Boolean).join(' ')}>\n      <svg className=\"relative h-full w-full\" fill=\"none\" viewBox=\"0 0 210 173\">\n        <path\n          d=\"M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z\"\n          fill=\"#FDFD0D\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"3.15\"\n        />\n\n        <path\n          d=\"M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z\"\n          fill=\"#000\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"4.2\"\n        />\n\n        <path\n          d=\"M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z\"\n          fill=\"#FDFD0D\"\n        />\n      </svg>\n\n      <canvas\n        className=\"absolute inset-0 h-full w-full\"\n        ref={canvasRef}\n        style={{\n          clipPath:\n            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'\n        }}\n      />\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"tv.js","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\n\nconst VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`\n\nconst FRAG = /* glsl */ `precision highp float;\nuniform float t;\nuniform vec2 r;\n\nconst float FBM_STR = .08;\n\nfloat h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\nfloat n2(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  f = f * f * (3. - 2. * f);\n\n  return mix(\n    mix(h(i), h(i + vec2(1, 0)), f.x),\n    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),\n    f.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0., a = .5;\n\n  for (int i = 0; i < 4; i++) {\n    v += a * n2(p);\n    p *= 2.1;\n    a *= .45;\n  }\n\n  return v;\n}\n\nfloat drift(float speed, float s) {\n  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));\n}\n\nfloat brushAt(vec2 uv, float y, float th, float s) {\n  float hw = .34 + .08 * h(vec2(s, 77.));\n  float cx = .5;\n  float xn = (uv.x - (cx - hw)) / (2. * hw);\n  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);\n  float localTh = th * env;\n\n  if (localTh < .002) return 0.;\n\n  float morph = floor(t * 8.) * .7 + s;\n  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;\n  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;\n  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;\n  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;\n\n  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));\n\n  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4\n    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35\n    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;\n\n  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));\n\n  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / r;\n  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));\n  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;\n\n  vec3 c = vec3(.992, .992, .051);\n\n  float smScroll = -drift(.04, 5.) * 2.;\n  float sm = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));\n  }\n\n  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);\n  float big = max(\n    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),\n    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))\n  );\n\n  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));\n  c *= .94 + .06 * sin(uv.y * r.y * 6.283);\n\n  vec2 raw = gl_FragCoord.xy / r;\n  float dx = min(raw.x - .22, .90 - raw.x);\n  float dy = min(raw.y - .29, .86 - raw.y);\n  float cycle = floor(t * .4);\n  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))\n    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)\n    * (.7 + .3 * h(vec2(cycle, 7.)));\n\n  float scanY = floor(gl_FragCoord.y);\n  float rowNoise = h(vec2(scanY, floor(t * 30.)));\n  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));\n\n  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);\n}`\n\nfunction useGL(ref: React.RefObject<HTMLCanvasElement | null>) {\n  const raf = useRef(0)\n\n  useEffect(() => {\n    const c = ref.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const sh = (type: number, src: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, src)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const p = gl.createProgram()!\n    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(p)\n    gl.useProgram(p)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(p, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(p, 't')\n    const uR = gl.getUniformLocation(p, 'r')\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const t0 = performance.now()\n\n    let visible = !document.hidden\n    let inView = true\n    let raf2 = 0\n\n    const tick = () => {\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n\n      raf2 = requestAnimationFrame(tick)\n    }\n\n    const start = () => {\n      if (visible && inView && !raf2) {\n        raf2 = requestAnimationFrame(tick)\n      }\n    }\n\n    const stop = () => {\n      if (raf2) {\n        cancelAnimationFrame(raf2)\n        raf2 = 0\n      }\n    }\n\n    const onVisibility = () => {\n      visible = !document.hidden\n      visible ? start() : stop()\n    }\n\n    const io = new IntersectionObserver(\n      entries => {\n        inView = entries.some(e => e.isIntersecting)\n        inView ? start() : stop()\n      },\n      { threshold: 0 }\n    )\n\n    io.observe(c)\n    document.addEventListener('visibilitychange', onVisibility)\n\n    start()\n    raf.current = raf2\n\n    return () => {\n      stop()\n      io.disconnect()\n      document.removeEventListener('visibilitychange', onVisibility)\n      ro.disconnect()\n    }\n  }, [ref])\n}\n\nexport function TV({ className }: { className?: string }) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  useGL(canvasRef)\n\n  return (\n    <div className={['relative', className].filter(Boolean).join(' ')}>\n      <svg className=\"relative h-full w-full\" fill=\"none\" viewBox=\"0 0 210 173\">\n        <path\n          d=\"M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z\"\n          fill=\"#FDFD0D\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"3.15\"\n        />\n\n        <path\n          d=\"M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z\"\n          fill=\"#000\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"4.2\"\n        />\n\n        <path\n          d=\"M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z\"\n          fill=\"#FDFD0D\"\n        />\n      </svg>\n\n      <canvas\n        className=\"absolute inset-0 h-full w-full\"\n        ref={canvasRef}\n        style={{\n          clipPath:\n            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'\n        }}\n      />\n    </div>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nous-research/ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "type": "module",
   "license": "MIT",
   "sideEffects": [