@thinkpixellab-public/px-vue 4.1.29 → 4.1.31

package/components/PxQrCode.vue

@@ -10,7 +10,7 @@
         <div
             class="px-qr-code"
             ref="qrCode"
-            :style="{ width: size + 'px', height: size + 'px' }"
+            :style="{ width: size + 'px', height: size + 'px', opacity: isRendered ? 1 : 0 }"
             role="img"
             :aria-label="label || content"
         ></div>
@@ -20,8 +20,6 @@
 <script>
 import QRCodeStyling from 'qr-code-styling';
 
-// test
-
 export default {
     name: 'px-qr-code',
     props: {
@@ -32,11 +30,54 @@ export default {
         qrCodeConfig: { type: Object, default: null },
     },
     data() {
-        return { size: 0 };
+        return { size: 0, isRendered: false, percentageMargin: 0 };
+    },
+    methods: {
+        setScale(retryCount = 0) {
+            if (!this.percentageMargin) {
+                this.isRendered = true;
+                return;
+            }
+
+            const MAX_RETRIES = 10;
+
+            const svg = this.$refs.qrCode?.querySelector('svg');
+            const rectEls = svg?.querySelectorAll(':scope > rect');
+            const imageEls = svg?.querySelectorAll(':scope > image');
+
+            const marginPx = (this.percentageMargin / 100) * svg.clientWidth;
+            const scale = (svg.clientWidth - marginPx * 2) / svg.clientWidth;
+
+            // the second rect is the qrcode
+            const qrRect = rectEls?.[1];
+            const qrImage = imageEls?.[0];
+
+            if (!qrRect || !qrImage) {
+                if (retryCount < MAX_RETRIES) {
+                    setTimeout(() => {
+                        this.setScale(retryCount + 1);
+                    }, 25);
+                } else {
+                    // Optionally, log a warning or handle the error
+                    // console.warn('QR rect or image not found after maximum retries.');
+                }
+                return;
+            }
+
+            this.isRendered = true;
+
+            qrRect.style.transform = `scale(${scale})`;
+            qrImage.style.transform = `scale(${scale})`;
+        },
     },
     mounted() {
         this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
 
+        const { margin, ...rest } = this.qrCodeConfig || {};
+
+        // margin is a percentage of the svg width
+        this.percentageMargin = margin ? Math.min(Math.max(0, margin), 100) : 0;
+
         const options = {
             width: this.size,
             height: this.size,
@@ -48,10 +89,14 @@ export default {
                 crossOrigin: 'anonymous',
             },
             data: this.content,
-            ...this.qrCodeConfig,
+            ...rest,
             type: 'svg',
         };
 
+        if (!this.percentageMargin) {
+            this.isRendered = true;
+        }
+
         this.qrCode = new QRCodeStyling(options);
 
         this.onSizeChange = () => {
@@ -78,6 +123,10 @@ export default {
             options.height = qrSize;
 
             this.qrCode.update(options);
+
+            this.$nextTick(() => {
+                this.setScale();
+            });
         };
 
         this.resizeObserver = new ResizeObserver(this.onSizeChange);
@@ -87,6 +136,15 @@ export default {
             this.qrCode.append(this.$refs.qrCode);
 
             this.onSizeChange();
+
+            if (this.percentageMargin) {
+                this.qrCode.getRawData('svg').then(() => {
+                    // QR code has been rendered
+                    this.$nextTick(() => {
+                        this.setScale();
+                    });
+                });
+            }
         });
     },
     beforeUnmount() {
@@ -100,6 +158,11 @@ export default {
     svg {
         width: 100%;
         height: 100%;
+
+        rect,
+        image {
+            transform-origin: center;
+        }
     }
 }
 </style>

package/composables/loadGsap.js

@@ -51,8 +51,12 @@ export const loadGsap = async () => {
 export const loadScrollTrigger = async () => {
     if (!scrollTriggerPromise) {
         scrollTriggerPromise = (async () => {
-            const [gsap, { ScrollTrigger }] = await Promise.all([loadGsap(), import('gsap/ScrollTrigger')]);
-            gsap.registerPlugin(ScrollTrigger);
+            const [gsap, { ScrollTrigger }, { CSSPlugin }] = await Promise.all([
+                loadGsap(), 
+                import('gsap/ScrollTrigger'),
+                import('gsap/CSSPlugin')
+            ]);
+            gsap.registerPlugin(ScrollTrigger, CSSPlugin);
             return { gsap, ScrollTrigger };
         })();
     }

package/composables/loadLenis.js

@@ -2,7 +2,7 @@
 
 /**
  * Lazy loading utilities for Lenis smooth scrolling
- * 
+ *
  * These functions provide race-condition-safe loading and initialization of Lenis.
  * The instance is shared across all components for consistent scroll behavior.
  */
@@ -12,13 +12,13 @@ let lenisInstancePromise = null;
 
 /**
  * Loads the Lenis class lazily
- * 
+ *
  * @returns {Promise} Promise that resolves to the Lenis constructor
- * 
+ *
  * @example
  * // Direct usage (not recommended - use useLenis composable instead)
  * import { loadLenis } from '@thinkpixellab-public/px-vue/composables/loadLenis';
- * 
+ *
  * const Lenis = await loadLenis();
  * const customLenis = new Lenis({
  *   duration: 2,
@@ -34,32 +34,32 @@ export const loadLenis = async () => {
 
 /**
  * Loads a shared Lenis instance with default configuration
- * 
+ *
  * Returns the same instance across all calls for consistent scroll behavior.
  * Starts with autoRaf enabled - useScrollAnimation will take over RAF control when needed.
- * 
+ *
  * @returns {Promise} Promise that resolves to the shared Lenis instance
- * 
+ *
  * @example
  * // Direct usage (not recommended - use useLenis composable instead)
  * import { loadLenisInstance } from '@thinkpixellab-public/px-vue/composables/loadLenis';
- * 
+ *
  * const lenis = await loadLenisInstance();
- * 
+ *
  * // smooth scroll to element
  * lenis.scrollTo('#section-2', { duration: 1.5 });
- * 
+ *
  * // listen to scroll events
  * lenis.on('scroll', (e) => {
  *   console.log('Scroll position:', e.scroll);
  * });
- * 
+ *
  * @example
  * // Configuration details
  * // The shared instance is created with:
  * // {
  * //   smoothWheel: false,     // disabled for better performance
- * //   smoothTouch: false,     // disabled for mobile compatibility  
+ * //   smoothTouch: false,     // disabled for mobile compatibility
  * //   autoRaf: true          // auto RAF until ScrollTrigger takes over
  * // }
  */

package/composables/useGsap.js

@@ -2,10 +2,10 @@
 import { loadGsap } from './loadGsap';
 
 /**
- * Ensures GSAP is loaded and available globally.
- * After calling this composable, you can use gsap directly as a global.
+ * Provides access to the GSAP library with lazy loading.
+ * Components should handle their own animation cleanup.
  *
- * @returns {Object} Object with ready promise that resolves when GSAP is loaded
+ * @returns {Object} Object with getGsap loader function
  *
  * @example
  * // Basic usage in a Vue component
@@ -13,12 +13,12 @@ import { loadGsap } from './loadGsap';
  *
  * export default {
  *   setup() {
- *     const { ready } = useGsap();
+ *     const { getGsap } = useGsap();
  *
  *     onMounted(async () => {
- *       await ready;
+ *       const gsap = await getGsap();
  *
- *       // gsap is now available globally
+ *       // animate an element
  *       gsap.to('.my-element', {
  *         duration: 1,
  *         x: 100,
@@ -35,12 +35,13 @@ import { loadGsap } from './loadGsap';
  *
  * export default {
  *   setup() {
- *     useGsap(); // ensures gsap loads
+ *     const { getGsap } = useGsap();
  *     const myElement = ref(null);
  *     let animation = null;
  *
- *     onMounted(() => {
- *       // gsap is available globally
+ *     onMounted(async () => {
+ *       const gsap = await getGsap();
+ *
  *       animation = gsap.to(myElement.value, {
  *         duration: 2,
  *         rotation: 360,
@@ -57,25 +58,11 @@ import { loadGsap } from './loadGsap';
  *     return { myElement };
  *   }
  * }
- *
- * @example  
- * // Immediate usage if you know GSAP is already loaded
- * import { useGsap } from '@thinkpixellab-public/px-vue/composables/useGsap';
- *
- * export default {
- *   setup() {
- *     useGsap(); // triggers load if needed
- *
- *     // can use gsap immediately in most cases
- *     const tl = gsap.timeline();
- *   }
- * }
  */
 export const useGsap = () => {
     if (process.server) {
-        return { ready: Promise.resolve() };
+        return { getGsap: () => null };
     }
 
-    const ready = loadGsap();
-    return { ready };
+    return { getGsap: loadGsap };
 };

package/composables/useLenis.js

@@ -3,74 +3,74 @@ import { loadLenisInstance } from './loadLenis';
 
 /**
  * Vue composable for using Lenis smooth scrolling
- * 
+ *
  * Provides access to a shared Lenis instance with autoRaf enabled.
  * Perfect for components that need smooth scrolling without ScrollTrigger integration.
- * 
+ *
  * @returns {Object} Object with getLenis loader function
- * 
+ *
  * @example
  * // Basic usage for smooth scrolling
  * import { useLenis } from '@thinkpixellab-public/px-vue/composables/useLenis';
- * 
+ *
  * export default {
  *   setup() {
  *     const { getLenis } = useLenis();
- *     
+ *
  *     onMounted(async () => {
  *       const lenis = await getLenis();
- *       
+ *
  *       // scroll to top smoothly
  *       lenis.scrollTo(0);
- *       
+ *
  *       // scroll to element
  *       lenis.scrollTo('#my-section');
- *       
+ *
  *       // scroll to specific position
  *       lenis.scrollTo(500, { duration: 2 });
  *     });
  *   }
  * }
- * 
+ *
  * @example
  * // Listen to scroll events for parallax
  * import { ref, onMounted } from 'vue';
  * import { useLenis } from '@thinkpixellab-public/px-vue/composables/useLenis';
- * 
+ *
  * export default {
  *   setup() {
  *     const { getLenis } = useLenis();
  *     const parallaxOffset = ref(0);
- *     
+ *
  *     onMounted(async () => {
  *       const lenis = await getLenis();
- *       
+ *
  *       lenis.on('scroll', (e) => {
  *         parallaxOffset.value = e.scroll * 0.5;
  *       });
  *     });
- *     
+ *
  *     return { parallaxOffset };
  *   }
  * }
- * 
+ *
  * @example
  * // Custom scroll behavior
  * import { useLenis } from '@thinkpixellab-public/px-vue/composables/useLenis';
- * 
+ *
  * export default {
  *   setup() {
  *     const { getLenis } = useLenis();
- *     
+ *
  *     const scrollToSection = async (selector) => {
  *       const lenis = await getLenis();
- *       
+ *
  *       lenis.scrollTo(selector, {
  *         duration: 1.5,
  *         easing: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  *       });
  *     };
- *     
+ *
  *     return { scrollToSection };
  *   }
  * }
@@ -80,7 +80,7 @@ export const useLenis = () => {
         return { getLenis: () => null };
     }
 
-    return { 
-        getLenis: loadLenisInstance
+    return {
+        getLenis: loadLenisInstance,
     };
-};
+};

package/composables/useScrollAnimations.js

@@ -5,107 +5,104 @@ import { loadLenisInstance } from './loadLenis';
 let scrollTriggerPromise = null;
 
 /**
- * Vue composable for scroll-triggered animations with GSAP ScrollTrigger and Lenis
- * 
- * Ensures GSAP, ScrollTrigger, and Lenis are loaded and configured for optimal scroll animations.
- * Automatically manages RAF control transfer from Lenis to GSAP for optimal performance.
- * After ready resolves, gsap and ScrollTrigger are available globally.
- * 
- * @returns {Object} Object with ready promise and getLenis function
- * 
- * @example
- * // Basic scroll-triggered animation
- * import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
- * 
- * export default {
- *   setup() {
- *     const { ready } = useScrollAnimation();
- *     
- *     onMounted(async () => {
- *       await ready;
- *       
- *       // gsap and ScrollTrigger are now available globally
- *       gsap.to('.fade-in', {
- *         opacity: 1,
- *         y: 0,
- *         scrollTrigger: {
- *           trigger: '.fade-in',
- *           start: 'top 80%',
- *           end: 'bottom 20%',
- *           scrub: true
- *         }
- *       });
- *     });
- *   }
- * }
- * 
- * @example
- * // Parallax scrolling with Lenis integration
- * import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
- * 
- * export default {
- *   setup() {
- *     const { ready, getLenis } = useScrollAnimation();
- *     
- *     onMounted(async () => {
- *       await ready;
- *       const lenis = await getLenis();
- *       
- *       // smooth scroll to section
- *       lenis.scrollTo('#section-2', { duration: 2 });
- *       
- *       // parallax background with global gsap
- *       gsap.to('.bg-parallax', {
- *         yPercent: -50,
- *         ease: 'none',
- *         scrollTrigger: {
- *           trigger: '.parallax-section',
- *           start: 'top bottom',
- *           end: 'bottom top',
- *           scrub: true
- *         }
- *       });
- *     });
- *   }
- * }
- * 
- * @example
- * // Complex timeline with ScrollTrigger
- * import { ref, onMounted } from 'vue';
- * import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
- * 
- * export default {
- *   setup() {
- *     const { ready } = useScrollAnimation();
- *     const container = ref(null);
- *     
- *     onMounted(async () => {
- *       await ready;
- *       
- *       // gsap is available globally
- *       const tl = gsap.timeline({
- *         scrollTrigger: {
- *           trigger: container.value,
- *           start: 'top center',
- *           end: 'bottom center',
- *           scrub: 1,
- *           pin: true
- *         }
- *       });
- *       
- *       tl.from('.item-1', { x: -100, opacity: 0 })
- *         .from('.item-2', { x: 100, opacity: 0 }, '-=0.5')
- *         .from('.item-3', { y: 100, opacity: 0 }, '-=0.3');
- *     });
- *     
- *     return { container };
- *   }
- * }
- */
+  Vue composable for scroll-triggered animations with GSAP ScrollTrigger and Lenis
+
+  Provides integrated GSAP, ScrollTrigger, and Lenis for complex scroll animations.
+  Automatically manages RAF control transfer from Lenis to GSAP for optimal performance.
+
+  @returns {Object} Object with getGsap, getScrollTrigger, and getLenis loader functions
+
+  @example
+  // Basic scroll-triggered animation
+  import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
+
+  export default {
+    setup() {
+      const { getGsap, getScrollTrigger } = useScrollAnimation();
+
+      onMounted(async () => {
+        const [gsap, ScrollTrigger] = await Promise.all([getGsap(), getScrollTrigger()]);
+
+        gsap.to('.fade-in', {
+          opacity: 1,
+          y: 0,
+          scrollTrigger: {
+            trigger: '.fade-in',
+            start: 'top 80%',
+            end: 'bottom 20%',
+            scrub: true
+          }
+        });
+      });
+    }
+  }
+
+  @example
+  // Parallax scrolling with Lenis integration
+  import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
+
+  export default {
+    setup() {
+      const { getGsap, getLenis } = useScrollAnimation();
+
+      onMounted(async () => {
+        const [gsap, lenis] = await Promise.all([getGsap(), getLenis()]);
+
+        // smooth scroll to section
+        lenis.scrollTo('#section-2', { duration: 2 });
+
+        // parallax background
+        gsap.to('.bg-parallax', {
+          yPercent: -50,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: '.parallax-section',
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: true
+          }
+        });
+      });
+    }
+  }
+
+  @example
+  // Complex timeline with ScrollTrigger
+  import { ref, onMounted } from 'vue';
+  import { useScrollAnimation } from '@thinkpixellab-public/px-vue/composables/useScrollAnimations';
+
+  export default {
+    setup() {
+      const { getGsap } = useScrollAnimation();
+      const container = ref(null);
+
+      onMounted(async () => {
+        const gsap = await getGsap();
+
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: container.value,
+            start: 'top center',
+            end: 'bottom center',
+            scrub: 1,
+            pin: true
+          }
+        });
+
+        tl.from('.item-1', { x: -100, opacity: 0 })
+          .from('.item-2', { x: 100, opacity: 0 }, '-=0.5')
+          .from('.item-3', { y: 100, opacity: 0 }, '-=0.3');
+      });
+
+      return { container };
+    }
+  }
+**/
 export const useScrollAnimation = () => {
     if (process.server) {
         return {
-            ready: Promise.resolve(),
+            getGsap: () => null,
+            getScrollTrigger: () => null,
             getLenis: () => null,
         };
     }
@@ -121,14 +118,21 @@ export const useScrollAnimation = () => {
                 // Take over RAF control from Lenis
                 lenis.stop();
 
+                // Disable autoRaf permanently - we'll drive it with GSAP
+                lenis.options.autoRaf = false;
+
                 lenis.on('scroll', ScrollTrigger.update);
+
                 gsap.ticker.add(time => {
                     lenis.raf(time * 1000);
                 });
+
                 gsap.ticker.lagSmoothing(0);
 
-                // ScrollTrigger is now available globally
-                return { lenis };
+                // Re-enable scroll processing (but without autoRaf)
+                lenis.start();
+
+                return { gsap, ScrollTrigger, lenis };
             })();
         }
 
@@ -136,7 +140,8 @@ export const useScrollAnimation = () => {
     };
 
     return {
-        ready: init().then(() => {}), // resolves when ScrollTrigger is ready
+        getGsap: async () => (await init()).gsap,
+        getScrollTrigger: async () => (await init()).ScrollTrigger,
         getLenis: async () => (await init()).lenis,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.29",
+    "version": "4.1.31",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"

package/utils/noiseGenerator.js

@@ -0,0 +1,98 @@
+/**
+ * Generate a Base64 PNG noise texture (transparent background).
+ *
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} [opts]
+ * @param {number} [opts.seed=Date.now()]   - RNG seed
+ * @param {number} [opts.coverage=0.35]     - 0..1 overall density of speckles
+ * @param {number} [opts.darkAmount=0.5]    - relative weight of dark specks
+ * @param {number} [opts.lightAmount=0.5]   - relative weight of light specks
+ * @param {Array}  [opts.darkColor=[0,0,0]] - [r,g,b] for dark specks (0–255)
+ * @param {Array}  [opts.lightColor=[255,255,255]] - [r,g,b] for light specks
+ * @param {number} [opts.darkAlpha=0.22]    - 0..1 alpha for dark specks
+ * @param {number} [opts.lightAlpha=0.18]   - 0..1 alpha for light specks
+ * @param {number} [opts.jitter=0.08]       - alpha variation per pixel
+ * @param {function} [opts.weightFn]        - (x, y, r) => 0..1 density modulator
+ * @returns {string} data URL: "data:image/png;base64,..."
+ */
+function createNoiseBase64(width, height, opts = {}) {
+    // Seeded RNG
+    function mulberry32(a) {
+        return function () {
+            let t = (a += 0x6d2b79f5);
+            t = Math.imul(t ^ (t >>> 15), t | 1);
+            t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+    }
+
+    const clamp255 = v => Math.max(0, Math.min(255, v | 0));
+
+    const {
+        seed = Date.now(),
+        coverage = 0.35,
+        darkAmount = 0.5,
+        lightAmount = 0.5,
+        darkColor = [0, 0, 0],
+        lightColor = [255, 255, 255],
+        darkAlpha = 0.22,
+        lightAlpha = 0.18,
+        jitter = 0.08,
+        weightFn,
+    } = opts;
+
+    const rng = mulberry32(seed >>> 0 || 1);
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+    const img = ctx.createImageData(width, height);
+    const data = img.data;
+
+    // Transparent background (already zeroed out by default, but explicit for clarity)
+    for (let i = 0; i < data.length; i += 4) {
+        data[i + 0] = 0;
+        data[i + 1] = 0;
+        data[i + 2] = 0;
+        data[i + 3] = 0;
+    }
+
+    // Draw speckles
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const idx = (y * width + x) * 4;
+            const r = rng();
+            const weight =
+                typeof weightFn === 'function' ? Math.max(0, Math.min(1, weightFn(x, y, r))) : 1;
+
+            // Should this pixel be noise at all?
+            if (r >= coverage * weight) continue;
+
+            // Decide dark vs light by relative weights
+            const total = Math.max(1e-6, darkAmount + lightAmount);
+            const darkShare = darkAmount / total;
+            const draw = rng() < darkShare ? 1 : 2;
+
+            const jitterSign = rng() < 0.5 ? -1 : 1;
+            const baseAlpha = draw === 1 ? darkAlpha : lightAlpha;
+            const alpha = Math.max(0, Math.min(1, baseAlpha + jitterSign * jitter * rng()));
+
+            const [srcR, srcG, srcB] = draw === 1 ? darkColor : lightColor;
+            const srcA = alpha;
+
+            // Direct write (since background is transparent)
+            data[idx + 0] = clamp255(srcR);
+            data[idx + 1] = clamp255(srcG);
+            data[idx + 2] = clamp255(srcB);
+            data[idx + 3] = clamp255(srcA * 255);
+        }
+    }
+
+    ctx.putImageData(img, 0, 0);
+    return canvas.toDataURL('image/png');
+}
+
+export { createNoiseBase64 };