@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/icons/link.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function LinkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 17 7" {...props}>
+      <path
+        d="M.264191.25061 6.27068.265071V2.26334h3.96512v1.99578l4.0238.00091.043-2.06986-4.0381.07302-.0142-2.01254L16.271.250649l-.0144 6.006381h-5.992l-.0287-1.9981-3.96528-.0002v1.99826l-6.02085-.0001zM6.24063 2.26197l-3.97944-.01436v1.99827l3.97954.01446z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth=".5"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/minus.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function MinusIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 12 3" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M12 0 0-5.2e-7-1e-7 2.50075H12z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/search.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react'
+
+export function SearchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 20 21" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M7.49773 1.6664h6.66637V0H7.49773zM14.1641 15.0001H7.49773v1.6664h6.66637z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M5.8336 3.33278H7.5v-1.6664H5.8336zM15.8359 13.3329h-1.6671v1.6672h1.6671zM4.16877 5.00017h1.66717V3.33301H4.16877zM17.5 11.6665h-1.6664v1.6664H17.5zM4.16406 11.6665V5.00012h-1.6664v6.66638zM17.4977 5.00012v6.66638h1.6664V5.00012z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M17.5 5.00017V3.33301h-1.6664v1.66716zM15.8359 3.33278v-1.6664h-1.6671v1.6664zM15.8359 10.0002V6.6665h-1.6671v3.3337zM14.1641 6.6664V5h-1.6664v1.6664zM5.8335 13.3328v-1.6664H4.16633V15H7.5v-1.6671zM4.16406 16.6664V15h-1.6664v1.6664zM2.5 18.3331v-1.6664H.8336v1.6664z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/ui/components/image-distortion.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import fillerBg from '../../assets/filler-bg0.webp'
+import { Button } from './button'
+import { ImageDistortion } from './image-distortion'
+
+const meta: Meta<typeof ImageDistortion> = {
+  args: { active: true, src: fillerBg.src ?? (fillerBg as unknown as string) },
+  component: ImageDistortion,
+  title: 'Components/Effects/ImageDistortion'
+}
+
+export default meta
+
+type Story = StoryObj<typeof ImageDistortion>
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="bg-background-base relative h-[420px] w-[560px] overflow-hidden border border-current/20"
+      style={{ backgroundColor: 'var(--background)' }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => (
+    <Frame>
+      <ImageDistortion {...args} />
+    </Frame>
+  )
+}
+
+export const Tinted: Story = {
+  args: { tint: '#88ccaa' },
+  render: args => (
+    <Frame>
+      <ImageDistortion {...args} />
+    </Frame>
+  )
+}
+
+export const TintStrength: Story = {
+  render: () => {
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="grid grid-cols-3 gap-4">
+        {[
+          ['#88ccaa', 'mint'],
+          ['#ccaa88', 'amber'],
+          ['#ff4444', 'fatal']
+        ].map(([tint, label]) => (
+          <div className="flex flex-col gap-2" key={label}>
+            <span className="text-xs uppercase tracking-widest opacity-50">
+              {label}
+            </span>
+
+            <Frame>
+              <ImageDistortion
+                src={src}
+                tint={tint}
+                tintStrength={{ active: 0.55, inactive: 0.25 }}
+              />
+            </Frame>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+/**
+ * Runs the haptic-distortion effect on a choreographed motion pattern so
+ * the image looks alive without needing a real pointer. Perfect for
+ * screen recordings, posters, and social cuts.
+ */
+export const AutoPlay: Story = {
+  render: () => {
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="grid grid-cols-3 gap-4">
+        {(['slash', 'gentle', 'aggressive'] as const).map(pattern => (
+          <div className="flex flex-col gap-2" key={pattern}>
+            <span className="text-xs uppercase tracking-widest opacity-50">
+              {pattern}
+            </span>
+
+            <Frame>
+              <ImageDistortion autoPlay={pattern} src={src} tint="#ccaa88" />
+            </Frame>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+export const ToggleActive: Story = {
+  render: () => {
+    const [active, setActive] = useState(true)
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="flex flex-col gap-3">
+        <Frame>
+          <ImageDistortion active={active} src={src} tint="#ff4444" />
+        </Frame>
+
+        <Button onClick={() => setActive(v => !v)}>
+          {active ? 'Active' : 'Inactive'}
+        </Button>
+      </div>
+    )
+  }
+}

package/src/ui/components/image-distortion.tsx

@@ -0,0 +1,498 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { useGpuTier } from '../../hooks/use-gpu-tier'
+import { cn, hexToRgb } from '../../utils'
+
+const NUM_BANDS = 12
+
+const VERT = `attribute vec2 a;varying vec2 vUv;void main(){vUv=vec2(a.x*.5+.5,.5-a.y*.5);gl_Position=vec4(a,0,1);}`
+
+const FRAG = `precision highp float;
+uniform float t;
+uniform vec2 r,imgSize,vel;
+uniform sampler2D tex;
+uniform float bands[${NUM_BANDS}];
+uniform vec3 tint;
+uniform float tintStrength;
+varying vec2 vUv;
+
+float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+
+// cover-style UV: crops the image to fill the canvas, centered
+vec2 coverUV(vec2 uv){
+  float canvasAspect=r.x/r.y;
+  float imgAspect=imgSize.x/imgSize.y;
+  vec2 scale=canvasAspect>imgAspect
+    ?vec2(1.0,imgAspect/canvasAspect)
+    :vec2(canvasAspect/imgAspect,1.0);
+  return(uv-0.5)*scale+0.5;
+}
+
+void main(){
+  vec2 uv=coverUV(vUv);
+  float scanY=floor(vUv.y*r.y);
+
+  float bandF=vUv.y*${NUM_BANDS}.0;
+  int bandIdx=int(floor(bandF));
+  float bandFrac=fract(bandF);
+
+  float strength=0.0;
+  for(int i=0;i<${NUM_BANDS};i++){
+    if(i==bandIdx) strength=bands[i];
+  }
+
+  float neighborStr=0.0;
+  int neighborIdx=bandFrac>.5?bandIdx+1:bandIdx-1;
+  for(int i=0;i<${NUM_BANDS};i++){
+    if(i==neighborIdx) neighborStr=bands[i];
+  }
+  float edgeBlend=abs(bandFrac-.5)*2.0;
+  edgeBlend*=edgeBlend;
+  strength=mix(strength,neighborStr,edgeBlend*.3);
+
+  float speed=length(vel);
+  float dirBlend=smoothstep(0.0,0.02,speed);
+  vec2 dir=speed>.0001?vel/speed:vec2(0);
+  dir*=dirBlend;
+
+  float rowSeed=h(vec2(scanY,floor(t*3.)+float(bandIdx)*7.));
+  float rowVar=mix(.4,1.0,rowSeed);
+
+  float ySmooth=vUv.y*6.0+t*0.7;
+  float yNoise=mix(h(vec2(floor(ySmooth),13.)),h(vec2(floor(ySmooth)+1.0,13.)),smoothstep(0.0,1.0,fract(ySmooth)));
+  float colVar=mix(.4,1.0,yNoise);
+
+  float tearShiftX=dir.x*strength*rowVar*0.15;
+  float tearShiftY=dir.y*strength*colVar*0.10;
+
+  float bandSeed=h(vec2(float(bandIdx),42.));
+  tearShiftX+=strength*(.5-bandSeed)*0.05;
+
+  float yJitter=mix(h(vec2(floor(ySmooth),73.)),h(vec2(floor(ySmooth)+1.0,73.)),smoothstep(0.0,1.0,fract(ySmooth)));
+  tearShiftY+=strength*(.5-yJitter)*0.035;
+
+  uv.x+=tearShiftX;
+  uv.y+=tearShiftY;
+
+  float sortGate=step(.5,strength)*step(.4,rowSeed);
+  uv.x+=dir.x*sortGate*strength*0.03;
+  uv.y+=dir.y*sortGate*strength*0.02;
+
+  float caX=abs(tearShiftX)*2.5+sortGate*strength*0.01;
+  float caY=abs(tearShiftY)*2.5+sortGate*strength*0.01;
+  float cr=texture2D(tex,vec2(uv.x+caX,uv.y+caY)).r;
+  float cg=texture2D(tex,uv).g;
+  float cb=texture2D(tex,vec2(uv.x-caX,uv.y-caY)).b;
+
+  vec3 col=vec3(cr,cg,cb);
+
+  col*=.97+.03*sin(vUv.y*r.y*3.14159);
+
+  float bandEdge=smoothstep(.02,.0,min(bandFrac,1.0-bandFrac));
+  col+=vec3(bandEdge*strength*.1);
+
+  col=mix(col,col*tint,tintStrength);
+
+  gl_FragColor=vec4(col,1.0);
+}`
+
+/**
+ * Choreographed motion patterns used when `autoPlay` is set. Each pattern
+ * returns a synthetic pointer position in [0,1] and a hover intensity in
+ * [0,1] for the current time (seconds). They drive the shader without
+ * requiring a real pointer, which is what lets us record the distortion
+ * as a GIF / screenshot / poster.
+ */
+const AUTOPLAY_PATTERNS: Record<
+  AutoPlayPattern,
+  (t: number) => { hover: number; mx: number; my: number }
+> = {
+  aggressive: t => {
+    const cycle = 1.4
+    const phase = (t % cycle) / cycle
+    const stab = Math.exp(-((phase - 0.15) ** 2) * 260)
+    const angle = Math.floor(t / cycle) * 1.37
+    const mx = 0.5 + Math.cos(angle) * 0.42 * (stab + 0.15)
+    const my = 0.5 + Math.sin(angle) * 0.38 * (stab + 0.15)
+
+    return { hover: 0.55 + stab * 0.45, mx, my }
+  },
+  gentle: t => ({
+    hover: 0.45 + Math.sin(t * 0.9) * 0.1,
+    mx: 0.5 + Math.sin(t * 0.5) * 0.28,
+    my: 0.5 + Math.cos(t * 0.37) * 0.22
+  }),
+  slash: t => {
+    // Long breath -> sword slash -> recoil twitch, repeating.
+    const cycle = 3.6
+    const phase = (t % cycle) / cycle
+    const slash = Math.exp(-((phase - 0.28) ** 2) * 180)
+    const micro = Math.exp(-((phase - 0.7) ** 2) * 340)
+
+    const driftX = 0.5 + Math.sin(t * 0.7) * 0.16
+    const driftY = 0.55 + Math.cos(t * 0.5) * 0.14
+
+    // Slash trajectory: bottom-left up into the giant's chest (top-right).
+    const slashX = -0.15 + phase * 1.55
+    const slashY = 0.95 - phase * 1.35
+
+    const mx = driftX * (1 - slash) + slashX * slash
+    const my = driftY * (1 - slash) + slashY * slash
+
+    return { hover: 0.5 + slash * 0.5 + micro * 0.35, mx, my }
+  }
+}
+
+export function ImageDistortion({
+  active = true,
+  autoPlay,
+  className,
+  fallbackClassName,
+  src,
+  style,
+  tint,
+  tintStrength
+}: ImageDistortionProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const tier = useGpuTier()
+  const [loaded, setLoaded] = useState(false)
+
+  const activeRef = useRef(active)
+  activeRef.current = active
+  const tintStrengthRef = useRef(tintStrength)
+  tintStrengthRef.current = tintStrength
+  const autoPlayRef = useRef(autoPlay)
+  autoPlayRef.current = autoPlay
+
+  const state = useRef({
+    bandTargets: new Float32Array(NUM_BANDS),
+    bands: new Float32Array(NUM_BANDS),
+    hoverTarget: 0,
+    imgH: 1,
+    imgW: 1,
+    mx: 0.5,
+    my: 0.5,
+    prevMx: 0.5,
+    prevMy: 0.5,
+    vx: 0,
+    vy: 0
+  })
+
+  useEffect(() => {
+    if (tier === 0) {
+      return
+    }
+
+    const c = canvasRef.current
+
+    if (!c) {
+      return
+    }
+
+    const gl = c.getContext('webgl')
+
+    if (!gl) {
+      return
+    }
+
+    const compile = (type: number, source: string) => {
+      const s = gl.createShader(type)!
+      gl.shaderSource(s, source)
+      gl.compileShader(s)
+
+      return s
+    }
+
+    const prog = gl.createProgram()!
+    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT))
+    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG))
+    gl.linkProgram(prog)
+    gl.useProgram(prog)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    )
+
+    const a = gl.getAttribLocation(prog, 'a')
+    gl.enableVertexAttribArray(a)
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)
+
+    const uT = gl.getUniformLocation(prog, 't')
+    const uR = gl.getUniformLocation(prog, 'r')
+    const uImgSize = gl.getUniformLocation(prog, 'imgSize')
+    const uVel = gl.getUniformLocation(prog, 'vel')
+    const uTex = gl.getUniformLocation(prog, 'tex')
+    const uTint = gl.getUniformLocation(prog, 'tint')
+    const uTintStrength = gl.getUniformLocation(prog, 'tintStrength')
+    const uBands: (null | WebGLUniformLocation)[] = []
+
+    for (let i = 0; i < NUM_BANDS; i++) {
+      uBands.push(gl.getUniformLocation(prog, `bands[${i}]`))
+    }
+
+    const texture = gl.createTexture()!
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([0, 0, 0, 255])
+    )
+
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+
+    img.onload = () => {
+      state.current.imgW = img.naturalWidth
+      state.current.imgH = img.naturalHeight
+      gl.bindTexture(gl.TEXTURE_2D, texture)
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        img
+      )
+      setLoaded(true)
+    }
+
+    img.src = src
+
+    gl.activeTexture(gl.TEXTURE0)
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.uniform1i(uTex, 0)
+
+    const resize = () => {
+      const rect = c.getBoundingClientRect()
+      const dpr = Math.min(devicePixelRatio, 2)
+      c.width = rect.width * dpr
+      c.height = rect.height * dpr
+      gl.viewport(0, 0, c.width, c.height)
+    }
+
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(c)
+
+    const onMove = (e: PointerEvent) => {
+      const rect = c.getBoundingClientRect()
+      state.current.mx = (e.clientX - rect.left) / rect.width
+      state.current.my = (e.clientY - rect.top) / rect.height
+    }
+
+    const onEnter = () => {
+      state.current.hoverTarget = 1
+    }
+
+    const onLeave = () => {
+      state.current.hoverTarget = 0
+    }
+
+    // When autoPlay drives the distortion we want the poster to look
+    // alive regardless of whether a pointer is near the canvas, so we
+    // skip the real pointer listeners entirely.
+    if (!autoPlayRef.current) {
+      c.addEventListener('pointermove', onMove)
+      c.addEventListener('pointerenter', onEnter)
+      c.addEventListener('pointerleave', onLeave)
+    }
+
+    const bandEaseRates = new Float32Array(NUM_BANDS)
+
+    for (let i = 0; i < NUM_BANDS; i++) {
+      bandEaseRates[i] = 0.02 + Math.random() * 0.06
+    }
+
+    const tintVec: readonly [number, number, number] = tint
+      ? (() => {
+          const [tr, tg, tb] = hexToRgb(tint)
+
+          return [tr / 255, tg / 255, tb / 255] as const
+        })()
+      : ([1, 1, 1] as const)
+
+    const t0 = performance.now()
+    let raf = 0
+    let visible = !document.hidden
+    let inView = true
+
+    const loop = () => {
+      raf = requestAnimationFrame(loop)
+      const s = state.current
+
+      const pattern = autoPlayRef.current
+        ? AUTOPLAY_PATTERNS[autoPlayRef.current]
+        : null
+
+      if (pattern) {
+        const driven = pattern((performance.now() - t0) / 1e3)
+        s.mx = driven.mx
+        s.my = driven.my
+        s.hoverTarget = driven.hover
+      }
+
+      const dvx = s.mx - s.prevMx
+      const dvy = s.my - s.prevMy
+      s.vx += (dvx * 8 - s.vx) * 0.1
+      s.vy += (dvy * 8 - s.vy) * 0.1
+      s.prevMx = s.mx
+      s.prevMy = s.my
+
+      const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy)
+
+      for (let i = 0; i < NUM_BANDS; i++) {
+        const bandCenter = (i + 0.5) / NUM_BANDS
+        const dist = Math.abs(s.my - bandCenter)
+        const proximity = Math.max(0, 1 - dist / 0.3)
+        const activation =
+          s.hoverTarget * proximity * (0.4 + Math.min(speed, 1) * 0.6)
+        s.bandTargets[i] = activation
+      }
+
+      for (let i = 0; i < NUM_BANDS; i++) {
+        const rate = bandEaseRates[i]!
+        const current = s.bands[i] ?? 0
+        const target = s.bandTargets[i] ?? 0
+        s.bands[i] = current + (target - current) * rate
+
+        if (s.bands[i]! < 0.001) {
+          s.bands[i] = 0
+        }
+      }
+
+      gl.uniform1f(uT, (performance.now() - t0) / 1e3)
+      gl.uniform2f(uR, c.width, c.height)
+      gl.uniform2f(uImgSize, s.imgW, s.imgH)
+      gl.uniform2f(uVel, s.vx, s.vy)
+      gl.uniform3f(uTint, tintVec[0], tintVec[1], tintVec[2])
+
+      const ts = tintStrengthRef.current
+      const defaultStrength = tint ? 0.35 : 0
+      const defaultInactive = tint ? 0.15 : 0
+      gl.uniform1f(
+        uTintStrength,
+        activeRef.current
+          ? (ts?.active ?? defaultStrength)
+          : (ts?.inactive ?? defaultInactive)
+      )
+
+      for (let i = 0; i < NUM_BANDS; i++) {
+        gl.uniform1f(uBands[i]!, s.bands[i]!)
+      }
+
+      gl.bindTexture(gl.TEXTURE_2D, texture)
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+    }
+
+    const start = () => {
+      if (visible && inView && !raf) {
+        raf = requestAnimationFrame(loop)
+      }
+    }
+
+    const stop = () => {
+      if (raf) {
+        cancelAnimationFrame(raf)
+        raf = 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()
+
+    return () => {
+      stop()
+      io.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      ro.disconnect()
+      c.removeEventListener('pointermove', onMove)
+      c.removeEventListener('pointerenter', onEnter)
+      c.removeEventListener('pointerleave', onLeave)
+      gl.deleteTexture(texture)
+      gl.deleteProgram(prog)
+      setLoaded(false)
+    }
+    // autoPlay is intentionally omitted so toggling it at runtime doesn't
+    // tear down the shader pipeline. The ref-driven loop reads the live
+    // value each frame, so listener attach/detach is handled once on mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src, tier, tint])
+
+  if (tier === 0) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        alt=""
+        className={cn(
+          'absolute inset-0 h-full w-full object-cover',
+          fallbackClassName ?? className
+        )}
+        src={src}
+        style={{ mixBlendMode: 'overlay', ...style }}
+      />
+    )
+  }
+
+  return (
+    <canvas
+      className={cn(
+        'absolute inset-0 h-full w-full transition-opacity duration-500',
+        className
+      )}
+      ref={canvasRef}
+      style={{
+        mixBlendMode: 'overlay',
+        opacity: loaded ? 1 : 0,
+        ...style
+      }}
+    />
+  )
+}
+
+export type AutoPlayPattern = 'aggressive' | 'gentle' | 'slash'
+
+interface ImageDistortionProps {
+  active?: boolean
+  /**
+   * Drive the distortion with a choreographed motion pattern instead of
+   * waiting for a real pointer. Useful for posters, social clips, and any
+   * context where the image needs to feel alive on its own.
+   */
+  autoPlay?: AutoPlayPattern
+  className?: string
+  fallbackClassName?: string
+  src: string
+  style?: React.CSSProperties
+  tint?: string
+  tintStrength?: { active: number; inactive: number }
+}