blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-FeatProd/CircularGallery.tsx

@@ -0,0 +1,1179 @@
+'use client'
+
+import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl'
+import { useCallback, useEffect, useRef } from 'react'
+
+type GL = Renderer['gl']
+type ScrollDirection = 'right' | 'left'
+
+interface GalleryScrollState {
+  current: number
+  target: number
+  direction: ScrollDirection
+}
+
+function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {
+  let timeout: number
+
+  return function (this: any, ...args: Parameters<T>) {
+    window.clearTimeout(timeout)
+    timeout = window.setTimeout(() => func.apply(this, args), wait)
+  }
+}
+
+function lerp(p1: number, p2: number, t: number): number {
+  return p1 + (p2 - p1) * t
+}
+
+function autoBind(instance: any): void {
+  const proto = Object.getPrototypeOf(instance)
+
+  Object.getOwnPropertyNames(proto).forEach((key) => {
+    if (key !== 'constructor' && typeof instance[key] === 'function') {
+      instance[key] = instance[key].bind(instance)
+    }
+  })
+}
+
+const DEFAULT_FONT = 'bold 64px Poppins'
+const DEFAULT_FONT_URL =
+  'https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'
+
+const CHEVRON_VIEWBOX_WIDTH = 125
+const CHEVRON_VIEWBOX_HEIGHT = 128
+
+function deriveFontFamilyFromUrl(url: string): string {
+  const fileName = (url.split('/').pop() || 'custom-font').split('?')[0]
+  const base = fileName.replace(/\.(woff2?|ttf|otf|eot)$/i, '')
+
+  return base.replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'CircularGalleryFont'
+}
+
+async function loadFontFromStylesheet(url: string): Promise<string> {
+  const response = await fetch(url)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch font stylesheet (${response.status})`)
+  }
+
+  const cssText = await response.text()
+  const faceBlocks = cssText.match(/@font-face\s*{[^}]*}/g) || []
+
+  let family: string | null = null
+  const fontFaces: FontFace[] = []
+
+  for (const block of faceBlocks) {
+    const familyMatch = block.match(/font-family:\s*['"]?([^;'"]+)['"]?/)
+    const urlMatch = block.match(/url\(\s*['"]?([^'")]+)['"]?\s*\)/)
+
+    if (!familyMatch || !urlMatch) continue
+
+    family = familyMatch[1].trim()
+
+    const descriptors: FontFaceDescriptors = {}
+    const weightMatch = block.match(/font-weight:\s*([^;]+);/)
+    const styleMatch = block.match(/font-style:\s*([^;]+);/)
+    const rangeMatch = block.match(/unicode-range:\s*([^;]+);/)
+
+    if (weightMatch) descriptors.weight = weightMatch[1].trim()
+    if (styleMatch) descriptors.style = styleMatch[1].trim()
+    if (rangeMatch) descriptors.unicodeRange = rangeMatch[1].trim()
+
+    fontFaces.push(new FontFace(family, `url(${urlMatch[1]})`, descriptors))
+  }
+
+  if (!family) {
+    throw new Error('No @font-face rule found in the stylesheet')
+  }
+
+  await Promise.allSettled(
+    fontFaces.map(async (face) => {
+      await face.load()
+      document.fonts.add(face)
+    }),
+  )
+
+  return family
+}
+
+async function loadFontFromFile(url: string): Promise<string> {
+  const family = deriveFontFamilyFromUrl(url)
+  const fontFace = new FontFace(family, `url(${url})`)
+
+  await fontFace.load()
+  document.fonts.add(fontFace)
+
+  return family
+}
+
+async function loadCustomFont(fontUrl: string): Promise<string> {
+  const isStylesheet = fontUrl.includes('fonts.googleapis.com') || /\.css(\?.*)?$/i.test(fontUrl)
+
+  return isStylesheet ? loadFontFromStylesheet(fontUrl) : loadFontFromFile(fontUrl)
+}
+
+async function resolveFont(font: string, fontUrl?: string): Promise<string> {
+  const effectiveUrl = fontUrl || (font === DEFAULT_FONT ? DEFAULT_FONT_URL : null)
+
+  if (!effectiveUrl) {
+    if (document.fonts && document.fonts.load) {
+      try {
+        await document.fonts.load(font)
+        await document.fonts.ready
+      } catch {}
+    }
+
+    return font
+  }
+
+  try {
+    const family = await loadCustomFont(effectiveUrl)
+    const sizeMatch = font.match(/^\s*(.*?\d+px)/)
+    const prefix = sizeMatch ? sizeMatch[1].trim() : 'bold 64px'
+    const resolved = `${prefix} "${family}"`
+
+    if (document.fonts && document.fonts.load) {
+      try {
+        await document.fonts.load(resolved)
+      } catch {}
+    }
+
+    return resolved
+  } catch (error) {
+    console.error('CircularGallery: unable to load font from', fontUrl, error)
+    return font
+  }
+}
+
+function getFontSize(font: string): number {
+  const match = font.match(/(\d+)px/)
+  return match ? parseInt(match[1], 10) : 64
+}
+
+function createTextTexture(
+  gl: GL,
+  text: string,
+  font: string = 'bold 64px monospace',
+  color: string = '#292524',
+): { texture: Texture; width: number; height: number } {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+
+  if (!context) throw new Error('Could not get 2d context')
+
+  const pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
+  const fontSize = getFontSize(font)
+
+  context.font = font
+
+  const metrics = context.measureText(text)
+  const width = Math.ceil(metrics.width + 40)
+  const height = Math.ceil(fontSize * 1.4)
+
+  canvas.width = width * pixelRatio
+  canvas.height = height * pixelRatio
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
+
+  context.scale(pixelRatio, pixelRatio)
+  context.font = font
+  context.fillStyle = color
+  context.textBaseline = 'middle'
+  context.textAlign = 'center'
+  context.clearRect(0, 0, width, height)
+  context.fillText(text, width / 2, height / 2)
+
+  const texture = new Texture(gl, {
+    generateMipmaps: false,
+  })
+
+  texture.image = canvas
+
+  return {
+    texture,
+    width,
+    height,
+  }
+}
+function createTransparentPlaceholderCanvas(): HTMLCanvasElement {
+  const canvas = document.createElement('canvas')
+
+  canvas.width = 1
+  canvas.height = 1
+
+  return canvas
+}
+
+interface TitleProps {
+  gl: GL
+  plane: Mesh
+  renderer: Renderer
+  text: string
+  textColor?: string
+  font?: string
+}
+
+class Title {
+  gl: GL
+  plane: Mesh
+  renderer: Renderer
+  text: string
+  textColor: string
+  font: string
+  mesh!: Mesh
+  textureWidth: number = 1
+  textureHeight: number = 1
+
+  constructor({
+    gl,
+    plane,
+    renderer,
+    text,
+    textColor = '#57534e',
+    font = '64px sans-serif',
+  }: TitleProps) {
+    autoBind(this)
+
+    this.gl = gl
+    this.plane = plane
+    this.renderer = renderer
+    this.text = text
+    this.textColor = textColor
+    this.font = font
+
+    this.createMesh()
+  }
+
+  createMesh() {
+    const { texture, width, height } = createTextTexture(
+      this.gl,
+      this.text,
+      this.font,
+      this.textColor,
+    )
+
+    this.textureWidth = width
+    this.textureHeight = height
+
+    const geometry = new Plane(this.gl)
+
+    const program = new Program(this.gl, {
+      vertex: `
+        attribute vec3 position;
+        attribute vec2 uv;
+
+        uniform mat4 modelViewMatrix;
+        uniform mat4 projectionMatrix;
+
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragment: `
+        precision highp float;
+
+        uniform sampler2D tMap;
+
+        varying vec2 vUv;
+
+        void main() {
+          vec4 color = texture2D(tMap, vUv);
+
+          if (color.a < 0.1) {
+            discard;
+          }
+
+          gl_FragColor = color;
+        }
+      `,
+      uniforms: {
+        tMap: {
+          value: texture,
+        },
+      },
+      transparent: true,
+    })
+
+    this.mesh = new Mesh(this.gl, {
+      geometry,
+      program,
+    })
+
+    this.mesh.setParent(this.plane)
+    this.onResize()
+  }
+
+  onResize() {
+    const aspect = this.textureWidth / this.textureHeight
+    const desiredHeight = this.plane.scale.y * 0.15
+    const desiredWidth = desiredHeight * aspect
+
+    this.mesh.scale.set(desiredWidth / this.plane.scale.x, desiredHeight / this.plane.scale.y, 1)
+
+    const localTextHeight = desiredHeight / this.plane.scale.y
+
+    this.mesh.position.y = -0.5 - localTextHeight * 0.5 - 0.5 / this.plane.scale.y
+  }
+}
+
+interface ScreenSize {
+  width: number
+  height: number
+}
+
+interface Viewport {
+  width: number
+  height: number
+}
+
+interface MediaProps {
+  geometry: Plane
+  gl: GL
+  image: string
+  index: number
+  length: number
+  renderer: Renderer
+  scene: Transform
+  screen: ScreenSize
+  text: string
+  viewport: Viewport
+  bend: number
+  textColor: string
+  borderRadius?: number
+  font?: string
+}
+
+class Media {
+  extra: number = 0
+  geometry: Plane
+  gl: GL
+  image: string
+  index: number
+  length: number
+  renderer: Renderer
+  scene: Transform
+  screen: ScreenSize
+  text: string
+  viewport: Viewport
+  bend: number
+  textColor: string
+  borderRadius: number
+  font?: string
+  program!: Program
+  plane!: Mesh
+  title!: Title
+  scale!: number
+  padding!: number
+  width!: number
+  widthTotal!: number
+  x!: number
+  speed: number = 0
+  isBefore: boolean = false
+  isAfter: boolean = false
+
+  constructor({
+    geometry,
+    gl,
+    image,
+    index,
+    length,
+    renderer,
+    scene,
+    screen,
+    text,
+    viewport,
+    bend,
+    textColor,
+    borderRadius = 0,
+    font,
+  }: MediaProps) {
+    this.geometry = geometry
+    this.gl = gl
+    this.image = image
+    this.index = index
+    this.length = length
+    this.renderer = renderer
+    this.scene = scene
+    this.screen = screen
+    this.text = text
+    this.viewport = viewport
+    this.bend = bend
+    this.textColor = textColor
+    this.borderRadius = borderRadius
+    this.font = font
+
+    this.createShader()
+    this.createMesh()
+    this.createTitle()
+    this.onResize()
+    this.plane.scale.y = (this.viewport.height * (700 * this.scale)) / this.screen.height
+    this.plane.scale.x = (this.viewport.width * (1000 * this.scale)) / this.screen.width
+    this.title?.onResize()
+  }
+
+  createShader() {
+    const texture = new Texture(this.gl, {
+      image: createTransparentPlaceholderCanvas(),
+      generateMipmaps: true,
+    })
+
+    this.program = new Program(this.gl, {
+      depthTest: false,
+      depthWrite: false,
+      vertex: `
+        precision highp float;
+
+        attribute vec3 position;
+        attribute vec2 uv;
+
+        uniform mat4 modelViewMatrix;
+        uniform mat4 projectionMatrix;
+
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragment: `
+        precision highp float;
+
+        uniform vec2 uImageSizes;
+        uniform vec2 uPlaneSizes;
+        uniform sampler2D tMap;
+        uniform float uBorderRadius;
+
+        varying vec2 vUv;
+
+        float roundedBoxSDF(vec2 p, vec2 b, float r) {
+          vec2 d = abs(p) - b;
+
+          return length(max(d, vec2(0.0))) +
+            min(max(d.x, d.y), 0.0) -
+            r;
+        }
+
+        void main() {
+          vec2 ratio = vec2(
+            min(
+              (uPlaneSizes.x / uPlaneSizes.y) /
+                (uImageSizes.x / uImageSizes.y),
+              1.0
+            ),
+            min(
+              (uPlaneSizes.y / uPlaneSizes.x) /
+                (uImageSizes.y / uImageSizes.x),
+              1.0
+            )
+          );
+
+          vec2 uv = vec2(
+            vUv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+            vUv.y * ratio.y + (1.0 - ratio.y) * 0.5
+          );
+
+          vec4 color = texture2D(tMap, uv);
+
+          float d = roundedBoxSDF(
+            vUv - 0.5,
+            vec2(0.5 - uBorderRadius),
+            uBorderRadius
+          );
+
+          float edgeSmooth = 0.02;
+          float alpha = 1.0 - smoothstep(-edgeSmooth, edgeSmooth, d);
+
+          gl_FragColor = vec4(color.rgb, alpha);
+        }
+      `,
+      uniforms: {
+        tMap: {
+          value: texture,
+        },
+        uPlaneSizes: {
+          value: [0, 0],
+        },
+        uImageSizes: {
+          value: [0, 0],
+        },
+        uBorderRadius: {
+          value: this.borderRadius,
+        },
+      },
+      transparent: true,
+    })
+
+    const img = new Image()
+
+    img.crossOrigin = 'anonymous'
+    img.src = this.image
+
+    img.onload = () => {
+      texture.image = img
+
+      this.program.uniforms.uImageSizes.value = [img.naturalWidth, img.naturalHeight]
+    }
+  }
+
+  createMesh() {
+    this.plane = new Mesh(this.gl, {
+      geometry: this.geometry,
+      program: this.program,
+    })
+
+    this.plane.setParent(this.scene)
+  }
+
+  createTitle() {
+    this.title = new Title({
+      gl: this.gl,
+      plane: this.plane,
+      renderer: this.renderer,
+      text: this.text,
+      textColor: this.textColor,
+      font: this.font,
+    })
+  }
+
+  update(
+    scroll: {
+      current: number
+      last: number
+    },
+    direction: ScrollDirection,
+  ) {
+    this.plane.position.x = this.x - scroll.current - this.extra
+
+    const x = this.plane.position.x
+    const halfViewportWidth = this.viewport.width / 2
+
+    if (this.bend === 0) {
+      this.plane.position.y = 0
+      this.plane.rotation.z = 0
+    } else {
+      const absoluteBend = Math.abs(this.bend)
+      const radius =
+        (halfViewportWidth * halfViewportWidth + absoluteBend * absoluteBend) / (2 * absoluteBend)
+
+      const effectiveX = Math.min(Math.abs(x), halfViewportWidth)
+      const arc = radius - Math.sqrt(radius * radius - effectiveX * effectiveX)
+
+      if (this.bend > 0) {
+        this.plane.position.y = -arc
+        this.plane.rotation.z = -Math.sign(x) * Math.asin(effectiveX / radius)
+      } else {
+        this.plane.position.y = arc
+        this.plane.rotation.z = Math.sign(x) * Math.asin(effectiveX / radius)
+      }
+    }
+
+    this.speed = scroll.current - scroll.last
+
+    const planeOffset = this.plane.scale.x / 2
+    const viewportOffset = this.viewport.width / 2
+
+    this.isBefore = this.plane.position.x + planeOffset < -viewportOffset
+
+    this.isAfter = this.plane.position.x - planeOffset > viewportOffset
+
+    if (direction === 'right' && this.isBefore) {
+      this.extra -= this.widthTotal
+      this.isBefore = false
+      this.isAfter = false
+    }
+
+    if (direction === 'left' && this.isAfter) {
+      this.extra += this.widthTotal
+      this.isBefore = false
+      this.isAfter = false
+    }
+  }
+
+  onResize({
+    screen,
+    viewport,
+  }: {
+    screen?: ScreenSize
+    viewport?: Viewport
+  } = {}) {
+    if (screen) {
+      this.screen = screen
+    }
+
+    if (viewport) {
+      this.viewport = viewport
+
+      if (this.plane.program.uniforms.uViewportSizes) {
+        this.plane.program.uniforms.uViewportSizes.value = [
+          this.viewport.width,
+          this.viewport.height,
+        ]
+      }
+    }
+
+    this.scale = this.screen.height / 1500
+
+    this.plane.scale.y = (this.viewport.height * (700 * this.scale)) / this.screen.height
+
+    this.plane.scale.x = (this.viewport.width * (1000 * this.scale)) / this.screen.width
+
+    this.plane.program.uniforms.uPlaneSizes.value = [this.plane.scale.x, this.plane.scale.y]
+
+    this.padding = 2
+    this.width = this.plane.scale.x + this.padding
+    this.widthTotal = this.width * this.length
+    this.x = this.width * this.index
+  }
+}
+
+interface AppConfig {
+  items?: {
+    image: string
+    text: string
+  }[]
+  bend?: number
+  textColor?: string
+  borderRadius?: number
+  font?: string
+  scrollSpeed?: number
+  scrollEase?: number
+  onItemClick?: (index: number) => void
+  onScrollChange?: (state: GalleryScrollState) => void
+}
+
+class App {
+  container: HTMLElement
+  scrollSpeed: number
+  scroll: {
+    ease: number
+    current: number
+    target: number
+    last: number
+    position?: number
+  }
+  onCheckDebounce: (...args: any[]) => void
+  renderer!: Renderer
+  gl!: GL
+  camera!: Camera
+  scene!: Transform
+  planeGeometry!: Plane
+  medias: Media[] = []
+  mediasImages: {
+    image: string
+    text: string
+  }[] = []
+  screen!: {
+    width: number
+    height: number
+  }
+  viewport!: {
+    width: number
+    height: number
+  }
+  raf: number = 0
+  boundOnResize!: () => void
+  boundOnWheel!: (e: Event) => void
+  boundOnTouchDown!: (e: MouseEvent | TouchEvent) => void
+  boundOnTouchMove!: (e: MouseEvent | TouchEvent) => void
+  boundOnTouchUp!: (e: MouseEvent | TouchEvent) => void
+  isDown: boolean = false
+  start: number = 0
+  dragDistance: number = 0
+  onItemClick?: (index: number) => void
+  onScrollChange?: (state: GalleryScrollState) => void
+  originalLength: number = 0
+
+  constructor(
+    container: HTMLElement,
+    {
+      items,
+      bend = 1,
+      textColor = '#eee',
+      borderRadius = 0,
+      font = 'semibold 64px Poppins',
+      scrollSpeed = 2,
+      scrollEase = 0.05,
+      onItemClick,
+      onScrollChange,
+    }: AppConfig,
+  ) {
+    this.container = container
+    this.scrollSpeed = scrollSpeed
+    this.scroll = {
+      ease: scrollEase,
+      current: 0,
+      target: 0,
+      last: 0,
+    }
+
+    this.onCheckDebounce = debounce(this.onCheck.bind(this), 200)
+    this.onItemClick = onItemClick
+    this.onScrollChange = onScrollChange
+
+    this.createRenderer()
+    this.createCamera()
+    this.createScene()
+    this.onResize()
+    this.createGeometry()
+    this.createMedias(items, bend, textColor, borderRadius, font)
+    this.update()
+    this.addEventListeners()
+  }
+
+  createRenderer() {
+    this.renderer = new Renderer({
+      alpha: true,
+      antialias: true,
+      dpr: Math.min(window.devicePixelRatio || 1, 2),
+    })
+
+    this.gl = this.renderer.gl
+    this.gl.clearColor(0, 0, 0, 0)
+
+    this.container.appendChild(this.renderer.gl.canvas as HTMLCanvasElement)
+  }
+
+  createCamera() {
+    this.camera = new Camera(this.gl)
+    this.camera.fov = 45
+    this.camera.position.z = 20
+  }
+
+  createScene() {
+    this.scene = new Transform()
+  }
+
+  createGeometry() {
+    this.planeGeometry = new Plane(this.gl, {
+      heightSegments: 50,
+      widthSegments: 100,
+    })
+  }
+
+  createMedias(
+    items:
+      | {
+          image: string
+          text: string
+        }[]
+      | undefined,
+    bend: number,
+    textColor: string,
+    borderRadius: number,
+    font: string,
+  ) {
+    const galleryItems = items && items.length ? items : []
+
+    this.originalLength = galleryItems.length
+    this.mediasImages = galleryItems.concat(galleryItems)
+
+    this.medias = this.mediasImages.map(
+      (data, index) =>
+        new Media({
+          geometry: this.planeGeometry,
+          gl: this.gl,
+          image: data.image,
+          index,
+          length: this.mediasImages.length,
+          renderer: this.renderer,
+          scene: this.scene,
+          screen: this.screen,
+          text: data.text,
+          viewport: this.viewport,
+          bend,
+          textColor,
+          borderRadius,
+          font,
+        }),
+    )
+  }
+
+  onTouchDown(e: MouseEvent | TouchEvent) {
+    this.isDown = true
+    this.scroll.position = this.scroll.current
+    this.start = 'touches' in e ? e.touches[0].clientX : e.clientX
+  }
+
+  onTouchMove(e: MouseEvent | TouchEvent) {
+    if (!this.isDown) return
+
+    const x = 'touches' in e ? e.touches[0].clientX : e.clientX
+
+    this.dragDistance = Math.abs(x - this.start)
+
+    const distance = (this.start - x) * (this.scrollSpeed * 0.025)
+
+    this.scroll.target = (this.scroll.position ?? 0) + distance
+  }
+
+  onTouchUp(e: MouseEvent | TouchEvent) {
+    if (!this.isDown) return
+
+    const wasTap = this.dragDistance < 5
+
+    this.isDown = false
+    this.dragDistance = 0
+
+    // A click should only select the card. Snapping here changes the OGL
+    // scroll target at the same moment the parent carousel updates.
+    if (!wasTap) {
+      this.onCheck()
+    }
+
+    if (wasTap && this.onItemClick && this.medias.length > 0) {
+      const pointerX =
+        'changedTouches' in e ? e.changedTouches[0].clientX : (e as MouseEvent).clientX
+
+      const rect = this.container.getBoundingClientRect()
+      const normalizedX = (pointerX - rect.left) / this.screen.width - 0.5
+
+      const worldX = normalizedX * this.viewport.width
+
+      let closest = this.medias[0]
+      let closestDistance = Math.abs(closest.plane.position.x - worldX)
+
+      for (const media of this.medias) {
+        const distance = Math.abs(media.plane.position.x - worldX)
+
+        if (distance < closestDistance) {
+          closestDistance = distance
+          closest = media
+        }
+      }
+
+      const index = this.originalLength > 0 ? closest.index % this.originalLength : closest.index
+
+      this.onItemClick(index)
+    }
+  }
+
+  onWheel(e: Event) {
+    const wheelEvent = e as WheelEvent
+    const delta = wheelEvent.deltaY || (wheelEvent as any).wheelDelta || (wheelEvent as any).detail
+
+    this.scroll.target += (delta > 0 ? this.scrollSpeed : -this.scrollSpeed) * 0.2
+
+    this.onCheckDebounce()
+  }
+
+  onCheck() {
+    if (!this.medias || !this.medias[0]) return
+
+    const width = this.medias[0].width
+    const itemIndex = Math.round(Math.abs(this.scroll.target) / width)
+
+    const item = width * itemIndex
+
+    this.scroll.target = this.scroll.target < 0 ? -item : item
+  }
+
+  onResize() {
+    this.screen = {
+      width: Math.max(1, this.container.clientWidth),
+      height: Math.max(1, this.container.clientHeight),
+    }
+
+    this.renderer.setSize(this.screen.width, this.screen.height)
+
+    this.camera.perspective({
+      aspect: this.screen.width / this.screen.height,
+    })
+
+    const fov = (this.camera.fov * Math.PI) / 180
+    const height = 2 * Math.tan(fov / 2) * this.camera.position.z
+
+    const width = height * this.camera.aspect
+
+    this.viewport = {
+      width,
+      height,
+    }
+
+    if (this.medias) {
+      this.medias.forEach((media) =>
+        media.onResize({
+          screen: this.screen,
+          viewport: this.viewport,
+        }),
+      )
+    }
+  }
+
+  update() {
+    this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease)
+
+    const direction: ScrollDirection = this.scroll.current > this.scroll.last ? 'right' : 'left'
+
+    if (this.medias) {
+      this.medias.forEach((media) => media.update(this.scroll, direction))
+    }
+
+    this.onScrollChange?.({
+      current: this.scroll.current,
+      target: this.scroll.target,
+      direction,
+    })
+
+    this.renderer.render({
+      scene: this.scene,
+      camera: this.camera,
+    })
+
+    this.scroll.last = this.scroll.current
+
+    this.raf = window.requestAnimationFrame(this.update.bind(this))
+  }
+
+  addEventListeners() {
+    this.boundOnResize = this.onResize.bind(this)
+    this.boundOnWheel = this.onWheel.bind(this)
+    this.boundOnTouchDown = this.onTouchDown.bind(this)
+    this.boundOnTouchMove = this.onTouchMove.bind(this)
+    this.boundOnTouchUp = this.onTouchUp.bind(this)
+
+    window.addEventListener('resize', this.boundOnResize)
+
+    window.addEventListener('mousewheel', this.boundOnWheel)
+
+    window.addEventListener('wheel', this.boundOnWheel)
+
+    window.addEventListener('mousedown', this.boundOnTouchDown)
+
+    window.addEventListener('mousemove', this.boundOnTouchMove)
+
+    window.addEventListener('mouseup', this.boundOnTouchUp)
+
+    window.addEventListener('touchstart', this.boundOnTouchDown)
+
+    window.addEventListener('touchmove', this.boundOnTouchMove)
+
+    window.addEventListener('touchend', this.boundOnTouchUp)
+  }
+
+  destroy() {
+    window.cancelAnimationFrame(this.raf)
+
+    window.removeEventListener('resize', this.boundOnResize)
+
+    window.removeEventListener('mousewheel', this.boundOnWheel)
+
+    window.removeEventListener('wheel', this.boundOnWheel)
+
+    window.removeEventListener('mousedown', this.boundOnTouchDown)
+
+    window.removeEventListener('mousemove', this.boundOnTouchMove)
+
+    window.removeEventListener('mouseup', this.boundOnTouchUp)
+
+    window.removeEventListener('touchstart', this.boundOnTouchDown)
+
+    window.removeEventListener('touchmove', this.boundOnTouchMove)
+
+    window.removeEventListener('touchend', this.boundOnTouchUp)
+
+    if (this.renderer?.gl?.canvas.parentNode) {
+      this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement)
+    }
+  }
+}
+
+export interface CircularGalleryProps {
+  items?: {
+    image: string
+    text: string
+  }[]
+  bend?: number
+  textColor?: string
+  borderRadius?: number
+  font?: string
+  fontUrl?: string
+  scrollSpeed?: number
+  scrollEase?: number
+  onItemClick?: (index: number) => void
+  showScrollIndicator?: boolean
+  indicatorColor?: string
+  indicatorCount?: number
+}
+
+export default function CircularGallery({
+  items,
+  bend = 3,
+  textColor = '#eee',
+  borderRadius = 0.05,
+  font = 'bold 64px Poppins',
+  fontUrl,
+  scrollSpeed = 2,
+  scrollEase = 0.05,
+  onItemClick,
+  showScrollIndicator = true,
+  indicatorColor = '#d6d3d150',
+  indicatorCount = 14,
+}: CircularGalleryProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const indicatorRef = useRef<HTMLDivElement>(null)
+  const onItemClickRef = useRef(onItemClick)
+  const itemsRef = useRef(items)
+
+  const chevronRefs = useRef<Array<SVGSVGElement | null>>([])
+
+  // Parent carousel state changes must not recreate the WebGL renderer.
+  onItemClickRef.current = onItemClick
+  itemsRef.current = items
+
+  const itemsSignature = JSON.stringify(items ?? [])
+
+  const updateChevronIndicator = useCallback(
+    ({ current }: GalleryScrollState) => {
+      const indicator = indicatorRef.current
+
+      if (!indicator || !showScrollIndicator) return
+
+      const width = indicator.clientWidth
+
+      if (!width || indicatorCount < 1) return
+
+      const isMobile = width < 768
+      const chevronWidth = isMobile ? 84 : 125
+      const spacing = isMobile ? 108 : 158
+      const curveDepth = isMobile ? 25 : 44
+      const totalWidth = spacing * indicatorCount
+
+      /*
+       * The gallery cards move left as scroll.current increases.
+       * Negating current moves the right-facing chevrons to the right.
+       */
+      const movement = -current * (isMobile ? 34 : 48)
+
+      chevronRefs.current.forEach((chevron, index) => {
+        if (!chevron) return
+
+        const initialX = index * spacing - spacing
+
+        const wrappedX =
+          ((((initialX + movement + spacing) % totalWidth) + totalWidth) % totalWidth) - spacing
+
+        const centreX = wrappedX + chevronWidth / 2
+
+        const normalizedX = (centreX - width / 2) / (width / 2)
+
+        const clampedX = Math.max(-1.25, Math.min(1.25, normalizedX))
+
+        const y = Math.pow(Math.abs(clampedX), 1.7) * curveDepth
+
+        const rotation = clampedX * 5
+
+        const scale = 1 - Math.min(0.12, Math.abs(clampedX) * 0.08)
+
+        const opacity = 1 - Math.min(0.58, Math.abs(clampedX) * 0.38)
+
+        chevron.style.transform = [
+          `translate3d(${wrappedX}px, ${y}px, 0)`,
+          `rotate(${rotation}deg)`,
+          `scale(${scale})`,
+        ].join(' ')
+
+        chevron.style.opacity = String(opacity)
+      })
+    },
+    [indicatorCount, showScrollIndicator],
+  )
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    let app: App | undefined
+    let isMounted = true
+
+    resolveFont(font, fontUrl).then((resolvedFont) => {
+      if (!isMounted || !containerRef.current) {
+        return
+      }
+
+      app = new App(containerRef.current, {
+        items: itemsRef.current,
+        bend,
+        textColor,
+        borderRadius,
+        font: resolvedFont,
+        scrollSpeed,
+        scrollEase,
+        onItemClick: (index) => {
+          onItemClickRef.current?.(index)
+        },
+        onScrollChange: updateChevronIndicator,
+      })
+    })
+
+    return () => {
+      isMounted = false
+
+      if (app) {
+        app.destroy()
+      }
+    }
+  }, [
+    itemsSignature,
+    bend,
+    textColor,
+    borderRadius,
+    font,
+    fontUrl,
+    scrollSpeed,
+    scrollEase,
+    updateChevronIndicator,
+  ])
+
+  return (
+    <div className="circular-gallery-block relative h-full w-full overflow-hidden">
+      {showScrollIndicator && (
+        <div
+          ref={indicatorRef}
+          aria-hidden="true"
+          className="CircularGallery-showScrollIndicator pointer-events-none absolute inset-x-0 top-16 mb-32 z-0 h-32 overflow-hidden md:h-64"
+          style={{
+            maskImage:
+              'linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%)',
+            WebkitMaskImage:
+              'linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%)',
+          }}
+        >
+          {Array.from({
+            length: indicatorCount,
+          }).map((_, index) => (
+            <svg
+              key={index}
+              ref={(element) => {
+                chevronRefs.current[index] = element
+              }}
+              width={CHEVRON_VIEWBOX_WIDTH}
+              height={CHEVRON_VIEWBOX_HEIGHT}
+              viewBox={`0 0 ${CHEVRON_VIEWBOX_WIDTH} ${CHEVRON_VIEWBOX_HEIGHT}`}
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="absolute left-0 top-0 h-auto w-[84px] will-change-transform md:w-[125px]"
+              style={{
+                opacity: 0,
+                filter: 'drop-shadow(0 18px 14px rgb(0 0 0 / 0.08))',
+                transformOrigin: 'center',
+              }}
+            >
+              <path
+                d="M0 0H73.7638L124.139 64L73.7638 128H0L50.3753 64L0 0Z"
+                fill={indicatorColor}
+              />
+            </svg>
+          ))}
+        </div>
+      )}
+
+      <div
+        ref={containerRef}
+        className="circular-gallery h-full w-full scale-100 cursor-grab overflow-hidden active:cursor-grabbing"
+      />
+    </div>
+  )
+}