@canvas3/nuxt 0.0.1

package/dist/runtime/utils/canvas3/canvas3.js

@@ -0,0 +1,512 @@
+import * as THREE from "three";
+import { ref } from "vue";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { gsap } from "gsap";
+import {
+  generateBindingLogic,
+  getMSDFFontMeshScales,
+  heightPositionCoef,
+  loadTexture
+} from "./helpers.js";
+import Scroll from "#canvas3-nuxt/utils/canvas3/scroll";
+import { defaultCanvas3Options } from "#canvas3-nuxt/constants/default-canvas3-options";
+const canvasInitiated = ref(false);
+class Canvas3Class {
+  canvasInitiated = canvasInitiated;
+  animateImageMesh = false;
+  canvasContainer = null;
+  scrollableContent = null;
+  time = 0;
+  scene = new THREE.Scene();
+  MSDFTextGeometryAtlas;
+  MSDFTextGeometryFont;
+  materials = [];
+  imageStore = [];
+  textStore = [];
+  activateMeshUniformMap = /* @__PURE__ */ new Map();
+  scroll = null;
+  currentScroll = 0;
+  options = defaultCanvas3Options;
+  width = 0;
+  height = 0;
+  camera = null;
+  composer = null;
+  renderPass = null;
+  renderer;
+  myEffect;
+  customPass = null;
+  animations = /* @__PURE__ */ new Map();
+  mouse = { x: 0, y: 0, movementX: 0, movementY: 0, xPrev: 0, yPrev: 0 };
+  // triggerSectionPositions= {};
+  // constructor({ canvasOptions }) {
+  //   this.options = canvasOptions;
+  // }
+  async init(canvasElement, scrollableContent, canvas3Options) {
+    this.options = canvas3Options;
+    this.scene = new THREE.Scene();
+    this.canvasContainer = canvasElement;
+    this.scrollableContent = scrollableContent;
+    this.scroll = new Scroll({
+      dom: this.scrollableContent,
+      activateMeshCallback: this.activateMesh.bind(this)
+    });
+    this.setCanvasAndCamera();
+    this.setSize();
+    this.composerPass();
+    this.render();
+    window.addEventListener("mousemove", (event) => {
+      this.mouse.x = event.clientX / this.width;
+      this.mouse.y = event.clientY / this.height;
+      setTimeout(() => {
+        this.mouse.movementX = event.clientX / this.width;
+        this.mouse.movementY = event.clientY / this.height;
+      }, 70);
+      if (this.mouse.movementX === 0 && this.mouse.movementY === 0) {
+        this.mouse.movementX = this.mouse.x;
+        this.mouse.movementY = this.mouse.y;
+      }
+    });
+    this.canvasInitiated.value = true;
+  }
+  setCanvasAndCamera() {
+    this.width = this.canvasContainer?.offsetWidth ?? 0;
+    this.height = this.canvasContainer?.offsetHeight ?? 0;
+    this.camera = new THREE.PerspectiveCamera(
+      70,
+      this.width / this.height,
+      100,
+      2e3
+    );
+    this.camera.position.z = 600;
+    this.camera.fov = 2 * Math.atan(this.height / 2 / 600) * (180 / Math.PI);
+    this.renderer = new THREE.WebGLRenderer({
+      alpha: true
+    });
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+    this.canvasContainer?.appendChild(this.renderer.domElement);
+  }
+  // async loadFontMSDF() {
+  //   const loadFontAtlas = (path: string) => {
+  //     return new Promise((resolve) => {
+  //       const loader = new THREE.TextureLoader()
+  //       loader.load(path, resolve)
+  //     })
+  //   }
+  //   const loadFont = (path: string) => {
+  //     return new Promise((resolve) => {
+  //       const loader = new FontLoader()
+  //       loader.load(path, resolve)
+  //     })
+  //   }
+  //   await Promise.all([
+  //     loadFontAtlas(this.options.font.atlas),
+  //     loadFont(this.options.font.fnt),
+  //   ]).then(([atlas, font]) => {
+  //     if (atlas)
+  //       this.MSDFTextGeometryAtlas = atlas
+  //     if (font)
+  //       this.MSDFTextGeometryFont = font
+  //   })
+  // }
+  resizeOnChange() {
+    this.setSize();
+    this.resizeImageStore();
+    this.resizeTextStore();
+    this.scroll?.resizeMobileBreakEvents();
+    this.scroll?.setSize();
+  }
+  resizeImageStore() {
+    for (const item of this.imageStore) {
+      if (item) {
+        const bounds = item.htmlEl.getBoundingClientRect();
+        if (!bounds) return;
+        item.mesh.scale.set(bounds.width, bounds.height, 1);
+        item.mesh.material.uniforms.uMeshSize.value.set(
+          bounds.width ?? 0,
+          bounds.height ?? 0
+        );
+        item.width = bounds.width;
+        item.height = bounds.height;
+      }
+    }
+    this.setImageMeshPositions();
+  }
+  resizeTextStore() {
+    for (const item of this.textStore) {
+      const bounds = item.htmlEl.getBoundingClientRect();
+      const { scaleX, scaleY } = getMSDFFontMeshScales(
+        bounds.width,
+        item.mesh.geometry?._layout?._width
+      );
+      item.mesh.scale.set(scaleX, scaleY, 1);
+      item.width = bounds.width;
+      item.height = bounds.height * heightPositionCoef;
+    }
+    this.setTextMeshPositions();
+  }
+  setImageMeshPositions() {
+    if (this.imageStore.length === 0) return;
+    for (const item of this.imageStore) {
+      item.mesh.position.x = item.htmlEl.getBoundingClientRect().left - this.width / 2 + item.width / 2;
+      item.mesh.position.y = -item.htmlEl.getBoundingClientRect().top + this.height / 2 - item.height / 2;
+    }
+  }
+  setTextMeshPositions() {
+    if (this.textStore.length === 0) return;
+    for (const item of this.textStore) {
+      item.mesh.position.x = item.htmlEl.getBoundingClientRect().left - this.width / 2;
+      item.mesh.position.y = -item.htmlEl.getBoundingClientRect().top + this.height / 2 - item.height / 2;
+    }
+  }
+  meshUniformsUpdate(id, uniforms) {
+    const mesh = this.scene.getObjectByName(id);
+    if (!mesh) return;
+    for (const uniKey in uniforms) {
+      if (uniforms[uniKey]) {
+        if (!mesh.material.uniforms[uniKey])
+          mesh.material.uniforms[uniKey] = {
+            value: uniforms[uniKey].value,
+            duration: 0
+          };
+        gsap.to(mesh.material.uniforms[uniKey], {
+          duration: uniforms[uniKey].duration,
+          value: uniforms[uniKey].value,
+          ease: uniforms[uniKey].ease ?? "power1.inOut"
+        });
+      }
+    }
+  }
+  activateMesh(meshId, isActive) {
+    const mesh = this.scene.getObjectByName(meshId);
+    if (!mesh) {
+      console.error("no Mesh found with ID: " + meshId);
+      return;
+    }
+    if (mesh.material.uniforms.uAniInImage && this.options.activateMeshOptions.image.uAniInImage) {
+      gsap.to(mesh.material.uniforms.uAniInImage, {
+        duration: this.options.activateMeshOptions.image.uAniInImage.duration,
+        value: isActive ? 1 : 0,
+        ease: this.options.activateMeshOptions.image.uAniInImage.ease
+      });
+    }
+    if (mesh.material.uniforms.uAniInText && this.options.activateMeshOptions.text.uAniInText) {
+      gsap.to(mesh.material.uniforms.uAniInText, {
+        duration: this.options.activateMeshOptions.text.uAniInText.duration,
+        value: isActive ? 1 : 0,
+        ease: this.options.activateMeshOptions.text.uAniInText.ease
+      });
+    }
+    const activateMeshUniforms = this.activateMeshUniformMap.get(meshId) ?? null;
+    if (activateMeshUniforms) {
+      for (const [key, value] of Object.entries(activateMeshUniforms)) {
+        if (mesh.material.uniforms[key]) {
+          gsap.to(mesh.material.uniforms[key], {
+            duration: value.duration,
+            value: isActive ? 1 : 0,
+            ease: value.ease ?? "power1.inOut"
+          });
+        }
+      }
+    }
+  }
+  // setFixedScrollToElement(elNode, margin = 0) {
+  //   this.scroll.fixScrollTo = { htmlRef: elNode ?? null, margin: margin };
+  // }
+  addOnScrollActivateElement(binding) {
+    const newBinding = generateBindingLogic(binding);
+    this.scroll?.DOM.onScrollActivateElements.push(newBinding);
+  }
+  updateOnScrollActiveElement(updatedBinding) {
+    if (!this.scroll) return;
+    for (const [
+      index,
+      item
+    ] of this.scroll.DOM.onScrollActivateElements.entries()) {
+      if (item.elNode.dataset.scrollActivateId === updatedBinding.elNode.dataset.scrollActivateId) {
+        this.scroll.DOM.onScrollActivateElements[index] = generateBindingLogic(updatedBinding);
+      }
+    }
+  }
+  removeScrollActiveElement(elNode) {
+    if (!elNode || !this.scroll?.DOM.onScrollActivateElements || this.scroll?.DOM.onScrollActivateElements.length === 0)
+      return;
+    for (let i = 0; i < this.scroll?.DOM.onScrollActivateElements.length; i++) {
+      if (this.scroll.DOM.onScrollActivateElements[i]?.elNode.isEqualNode(elNode)) {
+        this.scroll.DOM.onScrollActivateElements.splice(i, 1);
+        break;
+      }
+    }
+  }
+  removeMesh(id) {
+    const toRemove = this.scene.getObjectByName(id);
+    if (!toRemove) return;
+    this.scene.remove(toRemove);
+    toRemove.geometry.dispose();
+    toRemove.material.dispose();
+    for (const [index, item] of this.imageStore.entries()) {
+      if (item.name === id) {
+        this.imageStore.splice(index, 1);
+        this.materials.splice(index, 1);
+        break;
+      }
+    }
+  }
+  addAnimationToRender(callBackName, callBackFunction) {
+    this.animations.set(callBackName, callBackFunction);
+  }
+  // addTextAsMSDF(shaderName: string, meshId: string, htmlEl: HTMLElement, textContent: string, theme: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform) {
+  //   this.activateMeshUniformMap.set(meshId, activateMeshUniforms)
+  //
+  //   let vertexShader = this.options.shaders.default.textVertex
+  //   let fragmentShader = this.options.shaders.default.textFragment
+  //   if (shaderName && this.options.shaders[shaderName]) {
+  //     vertexShader = this.options.shaders[shaderName].vertexShader
+  //     fragmentShader = this.options.shaders[shaderName].fragmentShader
+  //   }
+  //
+  //   const bounds = htmlEl.getBoundingClientRect()
+  //   const position = { top: bounds.top, left: bounds.left }
+  //   position.top += this.currentScroll
+  //
+  //   //* ****************************
+  //   // MSDF
+  //   //* ****************************
+  //
+  //   const geometry = new MSDFTextGeometry({
+  //     text: textContent.trim(),
+  //     font: this.MSDFTextGeometryFont.data,
+  //   })
+  //
+  //   const material = new THREE.ShaderMaterial({
+  //     side: THREE.DoubleSide,
+  //     transparent: true,
+  //     defines: {
+  //       IS_SMALL: false, // false,
+  //     },
+  //     uniforms: {
+  //       uDevicePixelRatio: { value: window.devicePixelRatio },
+  //       uColor: {
+  //         // TODO: colors dynamic from component
+  //         value: new THREE.Vector4(
+  //           theme === 'dark' ? 27 / 255 : 191 / 255, // R
+  //           theme === 'dark' ? 24 / 255 : 192 / 255, // G
+  //           theme === 'dark' ? 24 / 255 : 178 / 255, // B
+  //         ),
+  //       },
+  //       uViewport: {
+  //         value: new THREE.Vector2(this.width, this.height),
+  //       },
+  //       // Common
+  //       uMouse: { value: new THREE.Vector2(0, 0) },
+  //       uMouseMovement: { value: new THREE.Vector2(0, 0) },
+  //       uFooterGameBall: { value: new THREE.Vector2(0, 0) },
+  //       uMap: { value: null },
+  //       // Rendering
+  //       uThreshold: { value: 0.05 },
+  //       uAlphaTest: { value: 0.01 },
+  //       uStrokeOutsetWidth: { value: 0.0 },
+  //       uStrokeInsetWidth: { value: 0.3 }, // 0.3
+  //       // new generic
+  //       uTime: { value: 0 },
+  //       uMeshSize: { value: new THREE.Vector2(bounds.width, bounds.height) },
+  //       ...this.options.activateMeshOptions.text,
+  //       ...activateMeshUniforms,
+  //       ...meshUniforms,
+  //     },
+  //     vertexShader: vertexShader,
+  //     fragmentShader: fragmentShader,
+  //   })
+  //
+  //   if (material.uniforms.uMap)
+  //     material.uniforms.uMap.value = this.MSDFTextGeometryAtlas
+  //
+  //   this.materials.push(material)
+  //
+  //   const mesh = new THREE.Mesh(geometry, material)
+  //   mesh.name = meshId
+  //   mesh.renderOrder = 1
+  //
+  //   const { scaleX, scaleY } = getMSDFFontMeshScales(
+  //     bounds.width,
+  //     mesh.geometry?._layout?._width,
+  //   )
+  //
+  //   mesh.scale.set(scaleX, scaleY, 1)
+  //
+  //   this.scene.add(mesh)
+  //
+  //   const newMesh: MeshType = {
+  //     name: meshId,
+  //     htmlEl: htmlEl,
+  //     mesh: mesh,
+  //     top: position.top,
+  //     left: position.left,
+  //     width: bounds.width,
+  //     height: bounds.height * heightPositionCoef,
+  //   }
+  //
+  //   this.textStore.push(newMesh)
+  //
+  //   this.setTextMeshPositions()
+  //
+  //   if (htmlEl.dataset.activeScroll === 'true') {
+  //     this.activateMesh(meshId, true)
+  //   }
+  // }
+  async addImageAsMesh(imgHtmlEl, shaderName, meshId, meshUniforms, activateMeshUniforms) {
+    this.activateMeshUniformMap.set(meshId, activateMeshUniforms);
+    let vertexShader = this.options.shaders.default.vertexShader;
+    let fragmentShader = this.options.shaders.default.fragmentShader;
+    if (shaderName && this.options.shaders[shaderName]) {
+      vertexShader = this.options.shaders[shaderName].vertexShader;
+      fragmentShader = this.options.shaders[shaderName].fragmentShader;
+    }
+    const bounds = imgHtmlEl.getBoundingClientRect();
+    const position = { top: bounds.top, left: bounds.left };
+    position.top += this.currentScroll;
+    const geometry = new THREE.PlaneGeometry(1, 1);
+    const texture = await loadTexture(imgHtmlEl.src);
+    texture.needsUpdate = true;
+    const material = new THREE.ShaderMaterial({
+      uniforms: {
+        uDevicePixelRatio: { value: window.devicePixelRatio },
+        uTime: { value: 0 },
+        uImage: { value: texture },
+        vectorVNoise: { value: new THREE.Vector2(1.5, 1.5) },
+        // 1.5
+        uMouse: { value: new THREE.Vector2(0, 0) },
+        uMouseMovement: { value: new THREE.Vector2(0, 0) },
+        uMeshSize: { value: new THREE.Vector2(bounds.width, bounds.height) },
+        uTextureSize: {
+          value: new THREE.Vector2(
+            texture.image.naturalWidth,
+            texture.image.naturalHeight
+          )
+        },
+        uViewport: {
+          value: new THREE.Vector2(this.width, this.height)
+        },
+        ...this.options.activateMeshOptions.image,
+        ...activateMeshUniforms,
+        ...meshUniforms
+      },
+      fragmentShader,
+      vertexShader,
+      transparent: true,
+      name: meshId
+      // wireframe: true,
+    });
+    this.materials.push(material);
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.name = meshId;
+    const neutralZScale = 1;
+    mesh.scale.set(bounds.width, bounds.height, neutralZScale);
+    this.scene.add(mesh);
+    const newMesh = {
+      name: meshId,
+      htmlEl: imgHtmlEl,
+      mesh,
+      top: position.top,
+      left: position.left,
+      width: bounds.width,
+      height: bounds.height
+    };
+    this.imageStore.push(newMesh);
+    this.setImageMeshPositions();
+  }
+  composerPass() {
+    if (!this.options.shaders.scroll) return;
+    this.composer = new EffectComposer(this.renderer);
+    if (this.camera)
+      this.renderPass = new RenderPass(this.scene, this.camera);
+    if (this.renderPass)
+      this.composer.addPass(this.renderPass);
+    this.myEffect = {
+      uniforms: {
+        tDiffuse: { value: null },
+        scrollSpeed: { value: null }
+      },
+      vertexShader: this.options.shaders.scroll.vertexShader,
+      fragmentShader: this.options.shaders.scroll.fragmentShader
+    };
+    this.customPass = new ShaderPass(this.myEffect);
+    this.customPass.renderToScreen = true;
+    this.composer.addPass(this.customPass);
+  }
+  setSize() {
+    this.width = this.canvasContainer?.offsetWidth ?? 0;
+    this.height = this.canvasContainer?.offsetHeight ?? 0;
+    if (this.camera) {
+      this.camera.aspect = this.width / this.height;
+      this.camera.updateProjectionMatrix();
+    }
+    this.renderer.setSize(this.width, this.height);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.render(this.scene, this.camera);
+  }
+  scrollToTop(delay = 0) {
+    setTimeout(() => {
+      this.scroll?.render(0, false);
+    }, delay);
+  }
+  scrollTo(position, delay = 0) {
+    setTimeout(() => {
+      this.scroll?.render(position, true);
+    }, delay);
+  }
+  scrollToElBySelector(elQuerySelector, delay = 0) {
+    const element = document.querySelector(elQuerySelector);
+    if (!element) return;
+    const position = element.offsetTop;
+    setTimeout(() => {
+      this.scroll?.render(position, true);
+    }, delay * 1e3);
+  }
+  setMeshPositionsUpdate(state) {
+    this.animateImageMesh = state;
+  }
+  render() {
+    this.time += 0.05;
+    this.scroll?.render(null, null);
+    if (this.scroll?.scrollInProgress) {
+      if (this.customPass && this.customPass.uniforms.scrollSpeed)
+        this.customPass.uniforms.scrollSpeed.value = this.scroll?.speedTarget;
+      this.setImageMeshPositions();
+      this.setTextMeshPositions();
+    }
+    if (this.animateImageMesh) {
+      this.resizeImageStore();
+      this.resizeTextStore();
+    }
+    for (const material of this.materials) {
+      if (material.uniforms.uTime)
+        material.uniforms.uTime.value = this.time;
+      if (material.uniforms.uMouse)
+        material.uniforms.uMouse.value = new THREE.Vector2(
+          this.mouse.x,
+          this.mouse.y
+        );
+      if (material.uniforms.uMouseMovement)
+        material.uniforms.uMouseMovement.value = new THREE.Vector2(
+          this.mouse.movementX,
+          this.mouse.movementY
+        );
+    }
+    if (this.composer)
+      this.composer.render();
+    for (const [_key, callback] of this.animations.entries()) {
+      if (callback) {
+        callback();
+      }
+    }
+    try {
+      requestAnimationFrame(this.render.bind(this));
+    } catch (e) {
+      console.error(e);
+      setImmediate(this.render.bind(this));
+    }
+  }
+}
+export const Canvas3 = new Canvas3Class();

package/dist/runtime/utils/canvas3/helpers.d.ts

@@ -0,0 +1,12 @@
+import type { ScrollActionBinding, ScrollActionType } from '#canvas3-nuxt/types/types';
+export declare function generateBindingLogic(newBindingData: ScrollActionBinding): ScrollActionType;
+export declare function findMeshIDs(elParent: HTMLElement): false | string[];
+export declare function loadTexture(src: string): Promise<unknown>;
+export declare const heightPositionCoef = 1.38;
+export declare function getMSDFFontMeshScales(boundsWidth: number, geometryWidth: number): {
+    scaleX: number;
+    scaleY: number;
+};
+export declare function setScrollActiveElements(elNode: HTMLElement, meshIds: string[], state: string): void;
+export declare function elementNearViewport(bounds: DOMRect, margin?: number): boolean;
+export declare const lerp: (a: number, b: number, n: number) => number;

package/dist/runtime/utils/canvas3/helpers.js

@@ -0,0 +1,96 @@
+import * as THREE from "three";
+import { gsap } from "gsap";
+export function generateBindingLogic(newBindingData) {
+  const binding = newBindingData;
+  binding.elNode.dataset.activeScroll = newBindingData?.elNode?.dataset?.activeScroll ?? "false";
+  binding.containedMeshIds = [];
+  binding.bounds = binding.elNode.getBoundingClientRect();
+  if (!binding.options.trackOnly) {
+    const foundMeshIds = findMeshIDs(binding.elNode);
+    if (foundMeshIds)
+      binding.containedMeshIds = foundMeshIds;
+    binding.elNode.classList.add("show-on-scroll");
+  }
+  if (binding.options.fixToParent) {
+    binding.containerId = binding.options.fixToParent.containerId;
+    binding.fixPosition = 0;
+    if (binding.options.fixToParent && binding.options.fixToParent.fixPosition) {
+      binding.fixPosition = binding.options.fixToParent.fixPosition;
+    }
+    binding.options.scrollSpeed = { value: 1 };
+    const containerEl = document.getElementById(binding.containerId ?? "");
+    if (containerEl)
+      binding.containerEl = containerEl;
+    if (binding.elNode.children[0]) {
+      binding.childEl = binding.elNode.children[0];
+      binding.childElBounds = binding.childEl?.getBoundingClientRect();
+    }
+    if (binding.containerEl)
+      binding.containerBottom = binding.containerEl.getBoundingClientRect().bottom;
+    binding.margin = 0;
+  }
+  if (newBindingData.options.scrollSpeedSetTo?.value) {
+    const dataSetScrollSpeed = Number(binding.elNode.dataset.scrollSpeed);
+    binding.options.scrollSpeed = {
+      value: dataSetScrollSpeed
+    };
+    gsap.to(binding.options.scrollSpeed, {
+      duration: newBindingData.options.scrollSpeedSetTo.duration,
+      value: newBindingData.options.scrollSpeedSetTo.value,
+      onComplete: () => {
+        binding.elNode.dataset.scrollSpeed = newBindingData.options.scrollSpeedSetTo.value;
+      }
+    });
+  }
+  return binding;
+}
+export function findMeshIDs(elParent) {
+  const meshIds = [];
+  if (elParent.dataset.meshId) {
+    meshIds.push(elParent.dataset.meshId);
+    return meshIds;
+  }
+  const elementsWithMesh = elParent.querySelectorAll("[data-mesh-id]");
+  if (!elementsWithMesh || elementsWithMesh.length === 0) return false;
+  for (const el of elementsWithMesh) {
+    if (el instanceof HTMLElement && el.dataset.meshId) {
+      meshIds.push(el.dataset.meshId);
+    }
+  }
+  return meshIds;
+}
+export function loadTexture(src) {
+  return new Promise((resolve, reject) => {
+    const loader = new THREE.TextureLoader();
+    loader.load(
+      src,
+      (texture) => resolve(texture),
+      // On success
+      void 0,
+      // On progress (optional)
+      (err) => reject(err)
+      // On error
+    );
+  });
+}
+const heightSizeCoef = 1;
+export const heightPositionCoef = 1.38;
+export function getMSDFFontMeshScales(boundsWidth, geometryWidth) {
+  const scaleX = boundsWidth / geometryWidth * heightSizeCoef;
+  const scaleY = -1 * scaleX * heightSizeCoef;
+  return { scaleX, scaleY };
+}
+export function setScrollActiveElements(elNode, meshIds, state) {
+  if (!meshIds || meshIds.length === 0) return;
+  for (const id of meshIds) {
+    const el = elNode.querySelector(`[data-mesh-id="${id}"]`);
+    if (el instanceof HTMLElement) {
+      el.dataset.activeScroll = state;
+    }
+  }
+}
+export function elementNearViewport(bounds, margin = 200) {
+  const windowHeight = window.innerHeight;
+  return bounds.top >= -margin && bounds.top <= windowHeight || bounds.bottom >= -margin && bounds.bottom <= windowHeight || bounds.top <= -margin && bounds.bottom >= windowHeight;
+}
+export const lerp = (a, b, n) => (1 - n) * a + n * b;

package/dist/runtime/utils/canvas3/scroll.d.ts

@@ -0,0 +1,37 @@
+import type { ScrollActionType } from '#canvas3-nuxt/types/types';
+export default class Scroll {
+    activateMeshCallback: (meshId: string, isActive: boolean) => void;
+    fixScrollTo: {
+        htmlRef: null | HTMLElement;
+        margin: number;
+    };
+    scrollToRender: number;
+    scrollRendered: number;
+    current: number;
+    scrollInProgress: boolean;
+    ease: number;
+    speed: number;
+    speedTarget: number;
+    scrollSpeedBottomMargin: number;
+    DOM: {
+        scrollable: HTMLElement;
+        onScrollActivateElements: ScrollActionType[];
+    };
+    constructor(options: {
+        dom: HTMLElement;
+        activateMeshCallback: (meshId: string, isActive: boolean) => void;
+    });
+    init(): void;
+    getScroll(): void;
+    resizeMobileBreakEvents(): void;
+    initEvents(): void;
+    setSize(): void;
+    setElementActive(item: ScrollActionType, isActive: boolean): void;
+    setElementsScrollPositions(): void;
+    setScrollPosition(): void;
+    scrollRenderToFluid(scrollTo: number): void;
+    scrollRenderTo(scrollTo: number): void;
+    calculateScrollSpeed(): void;
+    move(): void;
+    render(scrollTo: number | null, fluid: boolean | null): void;
+}