@canvas3/nuxt 0.0.1

package/README.md

@@ -0,0 +1,70 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# Canvas3 Nuxt Module
+
+Nuxt module for ThreeJS integration and additional features
+
+[//]: # (- [✨ &nbsp;Release Notes]&#40;/CHANGELOG.md&#41;)
+
+[//]: # ( - [🏀 Online playground]&#40;https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue&#41;)
+
+[//]: # ( - [📖 &nbsp;Documentation]&#40;https://example.com&#41;)
+
+## Features
+
+[✨ &nbsp;Example use cases](https://canvas3.vercel.app/)
+
+<!-- Highlight some of the features your module provide here -->
+
+[//]: # (- ⛰ &nbsp;Foo)
+
+[//]: # (- 🚠 &nbsp;Bar)
+
+[//]: # (- 🌲 &nbsp;Baz)
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add canvas3-nuxt
+```
+That's it! You can now use Canvas3 module in your Nuxt app ✨
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "canvas-nuxt-layout",
+  "configKey": "canvas3Layout",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,32 @@
+import { defineNuxtModule, createResolver, addTemplate, addLayout, addComponent, addPlugin, addImports } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "canvas-nuxt-layout",
+    configKey: "canvas3Layout"
+  },
+  setup(_, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const canvas3Layout = addTemplate({
+      src: resolve("./runtime/layouts/canvas3-layout.vue"),
+      filename: "layout.vue",
+      write: true
+    });
+    addLayout(canvas3Layout, "canvas3");
+    addComponent({
+      name: "Canvas3Image",
+      filePath: resolve("./runtime/components/canvas3-image.vue"),
+      global: true
+    });
+    addPlugin(resolve("./runtime/plugins/directives"));
+    addImports([
+      {
+        name: "Canvas3",
+        from: resolve("./runtime/utils/exports")
+      }
+    ]);
+    nuxt.options.alias["#canvas3-nuxt"] = resolve("./runtime");
+  }
+});
+
+export { module as default };

package/dist/runtime/components/canvas3-image.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="webgl-img-wrapper">
+    <img
+      ref="image"
+      class="webgl-img"
+      :class="{ 'reduced-motion': reducedMotion ?? null }"
+      :alt="props.options.alt"
+      :src="props.options.src"
+      :loading="props.options.loadStrategy"
+      @load="addImageToCanvas"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
+import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({
+      alt: "",
+      src: "",
+      loadStrategy: "lazy",
+      shaderName: void 0,
+      uniforms: {},
+      activateMeshUniforms: {}
+    })
+  }
+});
+const reducedMotion = computed(() => Canvas3.options?.disabled ?? null);
+const image = ref(null);
+const generatedMeshId = "image_" + crypto.randomUUID();
+const imgAddedToCanvas = ref(false);
+const addImageToCanvas = async () => {
+  await nextTick();
+  if (!image.value || Canvas3.canvasInitiated.value === false || Canvas3.options?.disabled || imgAddedToCanvas.value) return;
+  if (image.value.naturalWidth === 0) return;
+  image.value.dataset.meshId = generatedMeshId;
+  Canvas3.addImageAsMesh(
+    image.value,
+    props.options.shaderName,
+    generatedMeshId,
+    props.options.uniforms,
+    props.options.activateMeshUniforms
+  );
+  imgAddedToCanvas.value = true;
+};
+watch(() => Canvas3.canvasInitiated.value, (ready) => {
+  if (ready) addImageToCanvas();
+});
+watch(() => props.options.uniforms, (u) => {
+  Canvas3.meshUniformsUpdate(generatedMeshId, u);
+}, { deep: true });
+watch(() => props.options.src, () => {
+  imgAddedToCanvas.value = false;
+  nextTick(() => {
+    if (image.value?.complete) addImageToCanvas();
+  });
+});
+onMounted(() => {
+  if (image.value?.complete) addImageToCanvas();
+});
+onBeforeUnmount(() => {
+  Canvas3.removeMesh(generatedMeshId);
+});
+</script>
+
+<style scoped>
+.webgl-img{max-height:100%;max-width:100%;opacity:0}.webgl-img.reduced-motion{height:100%;-o-object-fit:cover;object-fit:cover;opacity:1;width:100%}
+</style>

package/dist/runtime/components/canvas3-image.vue.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    options: Record<string, any>;
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/canvas3-text.vue

@@ -0,0 +1,95 @@
+<template>
+  <span
+    ref="htmlEl"
+    class="text-wrapper"
+    :class="{ 'reduced-motion': reducedMotion }"
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, defineProps, computed } from "vue";
+import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
+const props = defineProps({
+  options: {
+    type: {
+      shaderName: {
+        type: String,
+        default: null
+      },
+      theme: {
+        type: String,
+        default: "dark"
+      },
+      uniforms: {
+        type: Object,
+        default: () => {
+        }
+      },
+      activateMeshUniforms: {
+        type: Object,
+        default: () => {
+        }
+      }
+    },
+    default: () => ({
+      uniforms: {},
+      activateMeshUniforms: {}
+    })
+  }
+});
+const reducedMotion = computed(() => {
+  return Canvas3.options?.disabled ?? null;
+});
+const htmlEl = ref("htmlEl");
+const meshId = "text" + crypto.randomUUID();
+const getTrimmedText = () => {
+  let innerHTML = htmlEl.value.innerHTML;
+  if (innerHTML.includes("<!--]-->")) {
+    const start = innerHTML.indexOf("<!--[-->") + 8;
+    const end = innerHTML.indexOf("<!--]-->");
+    innerHTML = innerHTML.slice(start, end);
+  }
+  return innerHTML;
+};
+watch(
+  () => props.options.uniforms,
+  (uniforms) => {
+    if (Canvas3.options?.disabled)
+      return;
+    setTimeout(() => {
+      Canvas3.meshUniformsUpdate(meshId, uniforms);
+    }, 0);
+  },
+  { deep: true }
+);
+onMounted(() => {
+  htmlEl.value.dataset.meshId = meshId;
+});
+onBeforeUnmount(() => {
+  Canvas3.removeMesh(meshId);
+});
+watch(
+  () => Canvas3.canvasInitiated.value,
+  (newVal) => {
+    if (Canvas3.options?.disabled || !newVal)
+      return;
+    setTimeout(() => {
+      Canvas3.addTextAsMSDF(
+        props.options.shaderName,
+        meshId,
+        htmlEl.value,
+        getTrimmedText(),
+        props.options.theme,
+        props.options.uniforms,
+        props.options.activateMeshUniforms
+      );
+    }, 0);
+  }
+);
+</script>
+
+<style scoped>
+.text-wrapper{display:inline-block;opacity:0}.text-wrapper.reduced-motion{opacity:1}
+</style>

package/dist/runtime/components/canvas3-text.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/constants/default-canvas3-options.d.ts

@@ -0,0 +1,40 @@
+export declare const defaultCanvas3Options: {
+    font: {
+        fnt: string;
+        atlas: string;
+    };
+    shaders: {
+        scroll: {
+            fragmentShader: any;
+            vertexShader: any;
+        };
+        default: {
+            fragmentShader: any;
+            vertexShader: any;
+            textFragment: any;
+            textVertex: any;
+        };
+    };
+    activateMeshOptions: {
+        image: {
+            uAniInImage: {
+                value: number;
+                duration: number;
+                ease: string;
+            };
+        };
+        text: {
+            uAniInText: {
+                value: number;
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    canvasElement: {
+        zIndex: number;
+    };
+    prefersReducedMotion: boolean;
+    isMobile: boolean;
+    disabled: boolean;
+};

package/dist/runtime/constants/default-canvas3-options.js

@@ -0,0 +1,40 @@
+import scrollFragment from "./shaders/scrollFragment.glsl";
+import scrollVertex from "./shaders/scrollVertex.glsl";
+import projectBlurFragment from "./shaders/projectBlurFragment.glsl";
+import projectBlurVertex from "./shaders/projectBlurVertex.glsl";
+import TextBlurFragment from "./shaders/TextBlurFragment.glsl";
+import TextBlurVertex from "./shaders/TextBlurVertex.glsl";
+export const defaultCanvas3Options = {
+  font: {
+    fnt: "./font/PPFormula-CondensedBlack.fnt",
+    atlas: "./font/PPFormula-CondensedBlack.png"
+    // fnt: '',
+    // atlas: '',
+  },
+  shaders: {
+    scroll: {
+      fragmentShader: scrollFragment,
+      vertexShader: scrollVertex
+    },
+    default: {
+      fragmentShader: projectBlurFragment,
+      vertexShader: projectBlurVertex,
+      textFragment: TextBlurFragment,
+      textVertex: TextBlurVertex
+    }
+  },
+  activateMeshOptions: {
+    image: {
+      uAniInImage: { value: 0, duration: 1, ease: "power1.inOut" }
+    },
+    text: {
+      uAniInText: { value: 0, duration: 1.5, ease: "power2.out" }
+    }
+  },
+  canvasElement: {
+    zIndex: -1
+  },
+  prefersReducedMotion: false,
+  isMobile: false,
+  disabled: false
+};

package/dist/runtime/constants/shaders/TextBlurFragment.glsl

@@ -0,0 +1,126 @@
+// Varyings
+varying vec2 vUv;
+
+// Uniforms: Common
+uniform float uThreshold;
+uniform float uAlphaTest;
+uniform vec3 uColor;
+uniform sampler2D uMap;
+
+varying float vNoise;
+
+// Generic uniforms
+uniform float uTime;
+uniform float uAniInText;
+uniform float uDevicePixelRatio;
+uniform vec2 uViewport;
+uniform vec2 uMouse;
+uniform vec2 uMouseMovement;
+uniform vec2 uFooterGameBall;
+uniform vec2 uMeshSize;
+uniform float devicePixelRatio;
+
+uniform sampler2D gradientMap;
+
+float DISTANCE_COEF = 0.5;
+float uBlurStrength;
+
+float median(float r, float g, float b) {
+  return max(min(r, g), min(max(r, g), b));
+}
+
+float createCircleTrail(float radius, vec2 mousePoint) {
+  vec2 viewportUv = gl_FragCoord.xy / uViewport / uDevicePixelRatio;
+  float viewportAspect = uViewport.x / uViewport.y;
+
+  vec2 shapeUvTrail = viewportUv - mousePoint;
+  shapeUvTrail /= vec2(1.0, viewportAspect);
+  shapeUvTrail += mousePoint;
+  float distTail = distance(shapeUvTrail, mousePoint);
+
+  float circleRadius = max(0.0, radius / uViewport.x);
+  float dist = smoothstep(circleRadius, circleRadius + 0.05, distTail);
+  return dist;
+}
+
+float createDraggedTrail(
+  vec2 mousePoint,
+  vec2 mousePointPrev,
+  float radiusStart,
+  float radiusEnd
+) {
+  vec2 viewportUv = gl_FragCoord.xy / uViewport / uDevicePixelRatio;
+  float viewportAspect = uViewport.x / uViewport.y;
+
+  // Adjust UV coordinates for aspect ratio
+  vec2 adjustedUv = viewportUv;
+  adjustedUv.y /= viewportAspect;
+  vec2 adjustedMousePoint = vec2(mousePoint.x, mousePoint.y / viewportAspect);
+  vec2 adjustedMousePointPrev = vec2(
+    mousePointPrev.x,
+    mousePointPrev.y / viewportAspect
+  );
+
+  // Compute distances to current and previous mouse points
+  float distToCurrent = distance(adjustedUv, adjustedMousePoint);
+  float distToPrev = distance(adjustedUv, adjustedMousePointPrev);
+
+  // Interpolate radius based on proximity to current or previous point
+  float interpFactor = distToCurrent / (distToCurrent + distToPrev + 0.0001);
+  float circleRadius = mix(radiusStart, radiusEnd, interpFactor) / uViewport.x;
+
+  // Compute minimum distance to the line segment between points
+  vec2 lineDir = adjustedMousePointPrev - adjustedMousePoint;
+  float lineLength = length(lineDir);
+  vec2 lineDirNorm = lineDir / (lineLength + 0.0001);
+  float proj = clamp(
+    dot(adjustedUv - adjustedMousePoint, lineDirNorm),
+    0.0,
+    lineLength
+  );
+  vec2 closestPoint = adjustedMousePoint + lineDirNorm * proj;
+  float distToLine = distance(adjustedUv, closestPoint);
+
+  // Smoothly fade out the trail based on distance
+  float trail = smoothstep(circleRadius, circleRadius + 0.02, distToLine);
+  return trail;
+}
+
+float createOverlay(float activeOverlay) {
+  vec2 viewportUv =
+    gl_FragCoord.xy / uViewport * uDevicePixelRatio * (1.0 - activeOverlay);
+  float progress = smoothstep(
+    activeOverlay,
+    activeOverlay - 1.0,
+    viewportUv.x - vUv.x
+  );
+  return progress;
+}
+
+void main() {
+  vec2 mousePoint = vec2(uMouse.x, 1.0 - uMouse.y);
+  vec2 mousePointPrev = vec2(uMouseMovement.x, 1.0 - uMouseMovement.y);
+  vec2 ballPoint = vec2(uFooterGameBall.x, 1.0 - uFooterGameBall.y);
+
+  float circleTrail = createDraggedTrail(mousePoint, mousePointPrev, 35.0, 1.0);
+
+  float ballTrail = createCircleTrail(10.0, ballPoint);
+
+  float overlayOpacity = createOverlay(uAniInText);
+  vec2 newUv = vUv;
+
+  vec3 mySample = texture2D(uMap, newUv).rgb;
+  vec3 mySampleRGB = mySample.rgb;
+
+  float aniInDistance = mix(0.5, 1.0, uAniInText * overlayOpacity);
+
+  float sigDist =
+    median(mySampleRGB.r, mySampleRGB.g, mySampleRGB.b) -
+    DISTANCE_COEF / aniInDistance / ballTrail / circleTrail;
+  float fill = clamp(sigDist / fwidth(sigDist) + DISTANCE_COEF, 0.0, 1.0);
+
+  float finalAlpha = fill * overlayOpacity * ballTrail * circleTrail;
+
+  gl_FragColor = vec4(uColor, finalAlpha);
+  if (finalAlpha < uAlphaTest) discard;
+}

package/dist/runtime/constants/shaders/TextBlurVertex.glsl

@@ -0,0 +1,10 @@
+// Varyings
+varying vec2 vUv;
+uniform vec2 hover;
+
+//generic unifiorms
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}

package/dist/runtime/constants/shaders/projectBlurFragment.glsl

@@ -0,0 +1,143 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uImage;
+
+uniform float uHover;
+uniform vec2 uMouse;
+uniform float uAniInImage;
+
+uniform vec2 uMeshSize; // The size of the mesh (width, height)
+uniform vec2 uTextureSize; // The size of the texture (width, height)
+uniform vec2 uViewport;
+uniform float uDevicePixelRatio;
+
+vec3 draw(sampler2D image, vec2 uv) {
+  return texture2D(image, vec2(uv.x, uv.y)).rgb;
+}
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec3 blur(vec2 uv, sampler2D image, float blurAmount, float blurStrength) {
+  vec3 blurredImage = vec3(0.0);
+  float gradient =
+    smoothstep(0.8, 0.0, 3.4 - gl_FragCoord.y / uViewport.y / uViewport.y) *
+      blurStrength +
+    smoothstep(0.8, 0.0, gl_FragCoord.y / uViewport.y / uViewport.y) *
+      blurStrength;
+  #define repeats (40.0)
+  for (float i = 0.0; i < repeats; i++) {
+    vec2 q =
+      vec2(
+        cos(degrees(i / repeats * 360.0)),
+        sin(degrees(i / repeats * 360.0))
+      ) *
+      (rand(vec2(i, uv.x + uv.y)) + blurAmount);
+    vec2 uv2 = uv + q * blurAmount * gradient;
+    blurredImage += draw(image, uv2) / 2.0;
+    q =
+      vec2(
+        cos(degrees(i / repeats * 360.0)),
+        sin(degrees(i / repeats * 360.0))
+      ) *
+      (rand(vec2(i + 2.0, uv.x + uv.y + 24.0)) + blurAmount);
+    uv2 = uv + q * blurAmount * gradient;
+    blurredImage += draw(image, uv2) / 2.0;
+  }
+  return blurredImage / repeats;
+}
+
+float DISTANCE_COEF = 0.5;
+
+float createCircle(float radius) {
+  vec2 viewportUv = gl_FragCoord.xy / uViewport / uDevicePixelRatio;
+  float viewportAspect = uViewport.x / uViewport.y;
+
+  vec2 mousePoint = vec2(uMouse.x, 1.0 - uMouse.y);
+
+  vec2 shapeUv = viewportUv - mousePoint;
+  shapeUv /= vec2(1.0, viewportAspect);
+  shapeUv += mousePoint;
+  float dist = distance(shapeUv, mousePoint);
+
+  float circleRadius = max(0.0, radius / uViewport.x);
+
+  dist = smoothstep(circleRadius, circleRadius + 0.05, dist);
+  return dist;
+}
+
+float createOverlayBlur(float activeOverlay) {
+  vec2 viewportUv = gl_FragCoord.xy / uViewport / uDevicePixelRatio;
+  float progress = smoothstep(
+    activeOverlay - 1.0, // -1 0
+    activeOverlay, // 0 1
+    viewportUv.y - vUv.y
+  );
+  return progress;
+}
+
+float createOverlayOpacity(float activeOverlay) {
+  vec2 viewportUv =
+    uMeshSize.y / uViewport * uDevicePixelRatio * (1.0 - activeOverlay);
+  float progress = smoothstep(
+    activeOverlay,
+    activeOverlay - 1.0,
+    viewportUv.y - vUv.y
+  );
+  return progress;
+}
+
+// Function to apply a sepia tone to a given RGB color
+vec3 applySepia(vec3 color) {
+  float r = color.r;
+  float g = color.g;
+  float b = color.b;
+
+  vec3 sepiaColor = vec3(
+    clamp(r * 0.358 + g * 0.704 + b * 0.138, 0.0, 1.0),
+    clamp(r * 0.357 + g * 0.705 + b * 0.141, 0.0, 1.0),
+    clamp(r * 0.3 + g * 0.497 + b * 0.203, 0.0, 1.0)
+  );
+  return mix(sepiaColor, vec3(0.5), 0.5);
+}
+
+void main() {
+  float overlayBlur = createOverlayBlur(uHover);
+  float circle = createCircle(105.0);
+
+  // Calculate the aspect ratios
+  float meshAspect = uMeshSize.x / uMeshSize.y;
+  float textureAspect = uTextureSize.x / uTextureSize.y;
+
+  // Adjust UV coordinates to maintain aspect ratio
+  vec2 uv = vUv;
+  if (meshAspect > textureAspect) {
+    // Mesh is wider than the texture
+    float scale = textureAspect / meshAspect;
+    uv.y = uv.y * scale + (1.0 - scale) / 2.0; // Center the texture vertically
+  } else {
+    // Mesh is taller than the texture
+    float scale = meshAspect / textureAspect;
+    uv.x = uv.x * scale + (1.0 - scale) / 2.0; // Center the texture horizontally
+  }
+
+
+  float overlayOpacity = createOverlayOpacity(uAniInImage);
+
+  // Apply sepia to the texture color
+  float blurStrength = 1.0 * circle * overlayBlur;
+  float blurAmount = 0.025;
+
+  vec3 originalColor = blur(uv, uImage, blurAmount, blurStrength);
+  vec3 sepiaColor = mix(
+    originalColor,
+    applySepia(originalColor),
+    circle
+  );
+
+  vec4 final = vec4(sepiaColor, overlayOpacity);
+
+  gl_FragColor = final;
+
+}

package/dist/runtime/constants/shaders/projectBlurVertex.glsl

@@ -0,0 +1,11 @@
+uniform float uTime;
+uniform float uHover;
+varying float vNoise;
+varying vec2 vUv;
+
+void main() {
+  vec3 newposition = position;
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(newposition, 1.0);
+}
+

package/dist/runtime/constants/shaders/scrollFragment.glsl

@@ -0,0 +1,7 @@
+uniform sampler2D tDiffuse;
+varying vec2 vUv;
+uniform float scrollSpeed;
+void main() {
+  vec2 newUV = vUv;
+  gl_FragColor = texture2D(tDiffuse, newUV);
+}

package/dist/runtime/constants/shaders/scrollVertex.glsl

@@ -0,0 +1,8 @@
+varying vec2 vUv;
+uniform float scrollSpeed;
+
+void main() {
+  vec3 newposition = position;
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(newposition, 1.0);
+}