Merge pull request #437 from bichikim/cursor/bichi-scroll-component-separation-f509

Bichi scroll component separation

Author: bichikim

apps/bichi/src/components/scroll-stage/ScrollStage.tsx

@@ -1,44 +1,21 @@
-import * as THREE from 'three'
 import {onCleanup, onMount} from 'solid-js'
-import vertexShader from '../../shaders/vertex.glsl?raw'
-import fragmentShader from '../../shaders/fragment.glsl?raw'
-
-/** Clamp value between min and max (GSAP.utils.clamp equivalent). */
-function clamp(min: number, max: number, value: number): number {
-  return Math.min(max, Math.max(min, value))
-}
-
-/** Linear interpolation (GSAP.utils.interpolate equivalent). */
-function lerp(current: number, target: number, ease: number): number {
-  return current + (target - current) * ease
-}
+import {
+  applyScrollDomTransforms,
+  attachCanvasToBody,
+  getScrollStageElements,
+  initializeLineElement,
+  removeCanvasFromBody,
+} from './scroll-stage-dom'
+import {createScrollState, type Viewport} from './scroll-stage-scroll'
+import {createUniformAnimator} from './scroll-stage-uniforms'
+import {createWebglStage} from './scroll-stage-webgl'
+import {EASE, ROTATION_SPEED} from './scroll-stage-settings'
 
 export interface ScrollStageProps {
   /** Ref to the .content element that contains .scroll__content and .layout__line */
   contentRef: () => HTMLElement | undefined
 }
 
-const EASE = 0.05
-const SOFT_THRESHOLD = 0.01
-const CAMERA_FOV = 75
-const CAMERA_NEAR = 0.1
-const CAMERA_FAR = 10
-const CAMERA_Z = 2.5
-const ICOSAHEDRON_DETAIL = 64
-const ROTATION_SPEED = 0.05
-const MOBILE_SCALE = 0.75
-const PIXEL_RATIO_MAX = 1.5
-const EASE_MULTIPLIER = 2
-
-const SETTINGS = {
-  uAmplitude: {end: 4, start: 4},
-  uDeepPurple: {end: 0, start: 1},
-  uDensity: {end: 1, start: 1},
-  uFrequency: {end: 4, start: 0},
-  uOpacity: {end: 0.66, start: 0.1},
-  uStrength: {end: 1.1, start: 0},
-} as const
-
 export function ScrollStage(props: ScrollStageProps) {
   onMount(() => {
     const contentElement = props.contentRef()
@@ -47,140 +24,55 @@ export function ScrollStage(props: ScrollStageProps) {
       return
     }
 
-    const scrollContent = contentElement.querySelector<HTMLElement>('.scroll__content')
-    const lineElement_ = contentElement.querySelector<HTMLElement>('.layout__line')
+    const elements = getScrollStageElements(contentElement)
 
-    if (!scrollContent || !lineElement_) {
+    if (!elements) {
       return
     }
-    const scrollContentElement = scrollContent
-    const lineElement = lineElement_
-
-    let viewport = {height: window.innerHeight, width: window.innerWidth}
-
-    const scroll = {
-      hard: 0,
-      height: 0,
-      limit: 0,
-      normalized: 0,
-      running: false,
-      soft: 0,
-    }
-
-    const currentUniforms: Record<string, number> = {
-      uAmplitude: SETTINGS.uAmplitude.start,
-      uDeepPurple: SETTINGS.uDeepPurple.start,
-      uDensity: SETTINGS.uDensity.start,
-      uFrequency: SETTINGS.uFrequency.start,
-      uOpacity: SETTINGS.uOpacity.start,
-      uStrength: SETTINGS.uStrength.start,
-    }
 
-    function setSizes() {
-      scroll.height = scrollContentElement.getBoundingClientRect().height
-      scroll.limit = scrollContentElement.clientHeight - viewport.height
-      document.body.style.height = `${scroll.height}px`
-    }
-
-    const scene = new THREE.Scene()
-
-    scene.background = new THREE.Color(0x00_00_00)
-    const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true})
-    const canvas = renderer.domElement
-
-    canvas.classList.add('webgl')
-    canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none'
-    document.body.insertBefore(canvas, document.body.firstChild)
-
-    const camera = new THREE.PerspectiveCamera(CAMERA_FOV, viewport.width / viewport.height, CAMERA_NEAR, CAMERA_FAR)
-
-    camera.position.set(0, 0, CAMERA_Z)
-    scene.add(camera)
-
-    const geometry = new THREE.IcosahedronGeometry(1, ICOSAHEDRON_DETAIL)
-
-    const material = new THREE.ShaderMaterial({
-      blending: THREE.AdditiveBlending,
-      fragmentShader,
-      transparent: true,
-      uniforms: {
-        uAmplitude: {value: SETTINGS.uAmplitude.start},
-        uDeepPurple: {value: SETTINGS.uDeepPurple.start},
-        uDensity: {value: SETTINGS.uDensity.start},
-        uFrequency: {value: SETTINGS.uFrequency.start},
-        uOpacity: {value: SETTINGS.uOpacity.start},
-        uStrength: {value: SETTINGS.uStrength.start},
-      },
-      vertexShader,
-      wireframe: true,
-    })
-    const mesh = new THREE.Mesh(geometry, material)
-
-    scene.add(mesh)
+    initializeLineElement(elements.lineElement)
 
-    const clock = new THREE.Clock()
-    let rafId: number
+    let viewport: Viewport = {height: window.innerHeight, width: window.innerWidth}
+    const scrollState = createScrollState(elements.scrollContentElement, {ease: EASE})
 
-    function updateScrollValues() {
-      scroll.hard = clamp(0, scroll.limit, window.scrollY)
-      scroll.soft = lerp(scroll.soft, scroll.hard, EASE)
+    scrollState.setViewport(viewport)
 
-      if (scroll.soft < SOFT_THRESHOLD) {
-        scroll.soft = 0
-      }
+    const stage = createWebglStage(viewport)
 
-      scroll.normalized = scroll.limit > 0 ? scroll.soft / scroll.limit : 0
-      scrollContentElement.style.transform = `translateY(${-scroll.soft}px)`
-      mesh.rotation.x = scroll.normalized * Math.PI
-      lineElement.style.transform = `scaleX(${scroll.normalized})`
-      lineElement.style.transformOrigin = 'left'
+    attachCanvasToBody(stage.canvas)
 
-      for (const key of Object.keys(SETTINGS) as (keyof typeof SETTINGS)[]) {
-        const setting = SETTINGS[key]
+    const uniformAnimator = createUniformAnimator(stage.material, EASE)
+    let rafId: number
 
-        const target = setting.start + scroll.normalized * (setting.end - setting.start)
+    const updateScrollValues = () => {
+      scrollState.updatePosition(window.scrollY)
+      const {metrics} = scrollState.state
 
-        currentUniforms[key] = lerp(currentUniforms[key], target, EASE * EASE_MULTIPLIER)
-        ;(material.uniforms[key] as THREE.IUniform<number>).value = currentUniforms[key]
-      }
+      applyScrollDomTransforms(elements, metrics.soft, metrics.normalized)
+      stage.mesh.rotation.x = metrics.normalized * Math.PI
+      uniformAnimator.update(metrics.normalized)
     }
 
-    function update() {
-      const elapsed = clock.getElapsedTime()
+    const update = () => {
+      const elapsed = stage.clock.getElapsedTime()
 
-      mesh.rotation.y = elapsed * ROTATION_SPEED
+      stage.mesh.rotation.y = elapsed * ROTATION_SPEED
       updateScrollValues()
-      renderer.render(scene, camera)
+      stage.render()
       rafId = requestAnimationFrame(update)
     }
 
-    function onResize() {
+    const onResize = () => {
       viewport = {height: window.innerHeight, width: window.innerWidth}
-      setSizes()
-
-      if (viewport.width < viewport.height) {
-        mesh.scale.set(MOBILE_SCALE, MOBILE_SCALE, MOBILE_SCALE)
-      } else {
-        mesh.scale.set(1, 1, 1)
-      }
-
-      camera.aspect = viewport.width / viewport.height
-      camera.updateProjectionMatrix()
-      renderer.setSize(viewport.width, viewport.height)
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio, PIXEL_RATIO_MAX))
+      scrollState.setViewport(viewport)
+      scrollState.updateSizes()
+      stage.updateScale(viewport)
+      stage.resize(viewport)
     }
 
-    function onScroll() {
-      if (!scroll.running) {
-        scroll.running = true
-
-        requestAnimationFrame(() => {
-          scroll.running = false
-        })
-      }
-    }
+    const {onScroll} = scrollState
 
-    setSizes()
+    scrollState.updateSizes()
     onResize()
     window.addEventListener('scroll', onScroll)
     window.addEventListener('resize', onResize)
@@ -190,14 +82,8 @@ export function ScrollStage(props: ScrollStageProps) {
       cancelAnimationFrame(rafId)
       window.removeEventListener('scroll', onScroll)
       window.removeEventListener('resize', onResize)
-      geometry.dispose()
-      material.dispose()
-      renderer.forceContextLoss()
-      renderer.dispose()
-
-      if (canvas.parentNode) {
-        canvas.remove()
-      }
+      stage.dispose()
+      removeCanvasFromBody(stage.canvas)
     })
   })
 

apps/bichi/src/components/scroll-stage/__tests__/scroll-stage-dom.spec.ts

@@ -0,0 +1,75 @@
+import {beforeEach, describe, expect, it} from 'vitest'
+import {
+  applyScrollDomTransforms,
+  attachCanvasToBody,
+  getScrollStageElements,
+  initializeLineElement,
+  removeCanvasFromBody,
+  setBodyHeight,
+} from '../scroll-stage-dom'
+
+describe('scroll-stage-dom', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    document.body.style.height = ''
+  })
+
+  it('finds scroll stage elements', () => {
+    const content = document.createElement('div')
+    const scrollContent = document.createElement('div')
+
+    scrollContent.className = 'scroll__content'
+    const lineElement = document.createElement('div')
+
+    lineElement.className = 'layout__line'
+    content.append(scrollContent, lineElement)
+
+    const elements = getScrollStageElements(content)
+
+    expect(elements).not.toBeNull()
+    expect(elements?.scrollContentElement).toBe(scrollContent)
+    expect(elements?.lineElement).toBe(lineElement)
+  })
+
+  it('returns null when required elements are missing', () => {
+    const content = document.createElement('div')
+    const scrollContent = document.createElement('div')
+
+    scrollContent.className = 'scroll__content'
+    content.append(scrollContent)
+
+    const elements = getScrollStageElements(content)
+
+    expect(elements).toBeNull()
+  })
+
+  it('initializes line element transform origin', () => {
+    const lineElement = document.createElement('div')
+
+    initializeLineElement(lineElement)
+    expect(lineElement.style.transformOrigin).toBe('left')
+  })
+
+  it('applies scroll transforms to DOM elements', () => {
+    const scrollContentElement = document.createElement('div')
+    const lineElement = document.createElement('div')
+
+    applyScrollDomTransforms({lineElement, scrollContentElement}, 120, 0.4)
+    expect(scrollContentElement.style.transform).toBe('translateY(-120px)')
+    expect(lineElement.style.transform).toBe('scaleX(0.4)')
+  })
+
+  it('sets the document body height', () => {
+    setBodyHeight(256)
+    expect(document.body.style.height).toBe('256px')
+  })
+
+  it('attaches and removes canvas from the body', () => {
+    const canvas = document.createElement('canvas')
+
+    attachCanvasToBody(canvas)
+    expect(document.body.firstChild).toBe(canvas)
+    removeCanvasFromBody(canvas)
+    expect(document.body.contains(canvas)).toBe(false)
+  })
+})

apps/bichi/src/components/scroll-stage/__tests__/scroll-stage-math.spec.ts

@@ -0,0 +1,15 @@
+import {describe, expect, it} from 'vitest'
+import {clamp, lerp} from '../scroll-stage-math'
+
+describe('scroll-stage-math', () => {
+  it('clamps values within bounds', () => {
+    expect(clamp(0, 10, -5)).toBe(0)
+    expect(clamp(0, 10, 5)).toBe(5)
+    expect(clamp(0, 10, 15)).toBe(10)
+  })
+
+  it('lerps between current and target', () => {
+    expect(lerp(0, 10, 0.5)).toBe(5)
+    expect(lerp(10, 10, 0.5)).toBe(10)
+  })
+})