kmcom-nuxt-layers 1.6.39 → 1.6.40

package/layers/motion/app/components/Motion/Marquee.vue

@@ -1,142 +1,142 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Base animation speed in pixels per second
-     */
-    speed?: number
-    /**
-     * Direction of scroll
-     */
-    direction?: 'left' | 'right'
-    /**
-     * Pause animation on hover
-     */
-    pauseOnHover?: boolean
-    /**
-     * Gap between repeated items
-     */
-    gap?: string
-    /**
-     * Enable velocity-based speed (scroll velocity affects marquee speed)
-     */
-    velocityBased?: boolean
-    /**
-     * How much scroll velocity affects speed (0-1)
-     * 0 = no effect, 1 = velocity fully controls speed
-     */
-    velocitySensitivity?: number
-    /**
-     * Reverse direction based on scroll direction
-     */
-    velocityDirection?: boolean
-    /**
-     * Minimum speed multiplier when using velocity
-     */
-    minSpeed?: number
-    /**
-     * Maximum speed multiplier when using velocity
-     */
-    maxSpeed?: number
-  }>(),
-  {
-    speed: 50,
-    direction: 'left',
-    pauseOnHover: true,
-    gap: '2rem',
-    velocityBased: false,
-    velocitySensitivity: 0.5,
-    velocityDirection: false,
-    minSpeed: 0.2,
-    maxSpeed: 5,
-  }
-)
-
-const { gsap } = useGsap()
-const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
-
-const containerRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const tweenRef = ref<gsap.core.Tween | null>(null)
-
-const isPaused = ref(false)
-const currentTimeScale = ref(1)
-
-onMounted(() => {
-  if (!containerRef.value || !contentRef.value) return
-
-  const content = contentRef.value
-  const contentWidth = content.offsetWidth
-
-  // Set up the infinite scroll animation
-  tweenRef.value = gsap.to(content, {
-    x: props.direction === 'left' ? -contentWidth / 2 : contentWidth / 2,
-    duration: contentWidth / props.speed,
-    ease: 'none',
-    repeat: -1,
-    modifiers: {
-      x: gsap.utils.unitize((x) => {
-        const mod = contentWidth / 2
-        return props.direction === 'left' ? parseFloat(x) % mod : Math.abs(parseFloat(x) % mod)
-      }),
-    },
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Base animation speed in pixels per second
+       */
+      speed?: number
+      /**
+       * Direction of scroll
+       */
+      direction?: 'left' | 'right'
+      /**
+       * Pause animation on hover
+       */
+      pauseOnHover?: boolean
+      /**
+       * Gap between repeated items
+       */
+      gap?: string
+      /**
+       * Enable velocity-based speed (scroll velocity affects marquee speed)
+       */
+      velocityBased?: boolean
+      /**
+       * How much scroll velocity affects speed (0-1)
+       * 0 = no effect, 1 = velocity fully controls speed
+       */
+      velocitySensitivity?: number
+      /**
+       * Reverse direction based on scroll direction
+       */
+      velocityDirection?: boolean
+      /**
+       * Minimum speed multiplier when using velocity
+       */
+      minSpeed?: number
+      /**
+       * Maximum speed multiplier when using velocity
+       */
+      maxSpeed?: number
+    }>(),
+    {
+      speed: 50,
+      direction: 'left',
+      pauseOnHover: true,
+      gap: '2rem',
+      velocityBased: false,
+      velocitySensitivity: 0.5,
+      velocityDirection: false,
+      minSpeed: 0.2,
+      maxSpeed: 5,
+    }
+  )
+
+  const { gsap } = useGsap()
+  const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
+
+  const containerRef = ref<HTMLElement | null>(null)
+  const contentRef = ref<HTMLElement | null>(null)
+  const tweenRef = ref<gsap.core.Tween | null>(null)
+
+  const isPaused = ref(false)
+  const currentTimeScale = ref(1)
+
+  onMounted(() => {
+    if (!containerRef.value || !contentRef.value) return
+
+    const content = contentRef.value
+    const contentWidth = content.offsetWidth
+
+    // Set up the infinite scroll animation
+    tweenRef.value = gsap.to(content, {
+      x: props.direction === 'left' ? -contentWidth / 2 : contentWidth / 2,
+      duration: contentWidth / props.speed,
+      ease: 'none',
+      repeat: -1,
+      modifiers: {
+        x: gsap.utils.unitize((x) => {
+          const mod = contentWidth / 2
+          return props.direction === 'left' ? parseFloat(x) % mod : Math.abs(parseFloat(x) % mod)
+        }),
+      },
+    })
   })
-})
-
-// Watch velocity changes for velocity-based animation
-watch(
-  [scrollVelocity, scrollDirection],
-  ([vel, dir]) => {
-    if (!props.velocityBased || !tweenRef.value || isPaused.value) return
-
-    // Calculate velocity multiplier
-    const absVelocity = Math.abs(vel)
-    const velocityEffect = absVelocity * props.velocitySensitivity * 0.02
 
-    // Base multiplier from velocity magnitude
-    let multiplier = 1 + velocityEffect
+  // Watch velocity changes for velocity-based animation
+  watch(
+    [scrollVelocity, scrollDirection],
+    ([vel, dir]) => {
+      if (!props.velocityBased || !tweenRef.value || isPaused.value) return
+
+      // Calculate velocity multiplier
+      const absVelocity = Math.abs(vel)
+      const velocityEffect = absVelocity * props.velocitySensitivity * 0.02
+
+      // Base multiplier from velocity magnitude
+      let multiplier = 1 + velocityEffect
+
+      // Clamp to min/max
+      multiplier = Math.max(props.minSpeed, Math.min(props.maxSpeed, multiplier))
+
+      // Optionally reverse direction based on scroll direction
+      if (props.velocityDirection && dir !== 0) {
+        const baseDirection = props.direction === 'left' ? 1 : -1
+        multiplier *= dir * baseDirection
+      }
+
+      // Smoothly interpolate to target
+      gsap.to(currentTimeScale, {
+        value: multiplier,
+        duration: 0.3,
+        ease: 'power2.out',
+        onUpdate: () => {
+          if (tweenRef.value) {
+            tweenRef.value.timeScale(currentTimeScale.value)
+          }
+        },
+      })
+    },
+    { immediate: false }
+  )
 
-    // Clamp to min/max
-    multiplier = Math.max(props.minSpeed, Math.min(props.maxSpeed, multiplier))
+  onUnmounted(() => {
+    tweenRef.value?.kill()
+  })
 
-    // Optionally reverse direction based on scroll direction
-    if (props.velocityDirection && dir !== 0) {
-      const baseDirection = props.direction === 'left' ? 1 : -1
-      multiplier *= dir * baseDirection
+  function handleMouseEnter() {
+    if (props.pauseOnHover && tweenRef.value) {
+      gsap.to(tweenRef.value, { timeScale: 0, duration: 0.5 })
+      isPaused.value = true
     }
-
-    // Smoothly interpolate to target
-    gsap.to(currentTimeScale, {
-      value: multiplier,
-      duration: 0.3,
-      ease: 'power2.out',
-      onUpdate: () => {
-        if (tweenRef.value) {
-          tweenRef.value.timeScale(currentTimeScale.value)
-        }
-      },
-    })
-  },
-  { immediate: false }
-)
-
-onUnmounted(() => {
-  tweenRef.value?.kill()
-})
-
-function handleMouseEnter() {
-  if (props.pauseOnHover && tweenRef.value) {
-    gsap.to(tweenRef.value, { timeScale: 0, duration: 0.5 })
-    isPaused.value = true
   }
-}
 
-function handleMouseLeave() {
-  if (props.pauseOnHover && tweenRef.value) {
-    gsap.to(tweenRef.value, { timeScale: currentTimeScale.value, duration: 0.5 })
-    isPaused.value = false
+  function handleMouseLeave() {
+    if (props.pauseOnHover && tweenRef.value) {
+      gsap.to(tweenRef.value, { timeScale: currentTimeScale.value, duration: 0.5 })
+      isPaused.value = false
+    }
   }
-}
 </script>
 
 <template>

package/layers/motion/app/components/Motion/MarqueeText.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+  import type { ScrollTrigger as GSAPScrollTrigger } from 'gsap/ScrollTrigger'
+
+  interface VelocityMapping {
+    input: [number, number]
+    output: [number, number]
+  }
+
+  const {
+    texts = [],
+    velocity = 100,
+    className = '',
+    damping = 50,
+    stiffness = 400,
+    velocityMapping = { input: [0, 1000] as [number, number], output: [0, 5] as [number, number] },
+    pauseOnHover = false,
+    parallaxClassName = '',
+    scrollerClassName = '',
+    parallaxStyle = {},
+    scrollerStyle = {},
+  } = defineProps<{
+    texts?: string[]
+    velocity?: number
+    className?: string
+    damping?: number
+    stiffness?: number
+    velocityMapping?: VelocityMapping
+    pauseOnHover?: boolean
+    parallaxClassName?: string
+    scrollerClassName?: string
+    parallaxStyle?: Record<string, string | number>
+    scrollerStyle?: Record<string, string | number>
+  }>()
+
+  const { gsap, ScrollTrigger } = useGsap()
+  const { velocityFactor } = useMarqueeVelocity({ damping, stiffness, velocityMapping })
+
+  const containerRef = ref<HTMLElement[]>([])
+  const copyRefs = ref<HTMLSpanElement[]>([])
+
+  const { copyWidths, calculatedCopies } = useMarqueeCopies(
+    containerRef,
+    copyRefs,
+    computed(() => texts.length)
+  )
+
+  const baseX = ref<number[]>([])
+  const directionFactors = ref<number[]>([])
+  const isPaused = ref(false)
+
+  let scrollTriggerInstance: GSAPScrollTrigger | null = null
+  let animLastTime = 0
+
+  const wrap = (min: number, max: number, v: number): number => {
+    const range = max - min
+    if (range === 0) return min
+    return ((((v - min) % range) + range) % range) + min
+  }
+
+  const scrollTransforms = computed(() =>
+    texts.map((_, index) => {
+      const singleWidth = copyWidths.value[index]
+      if (!singleWidth) return '0px'
+      return `${wrap(-singleWidth, 0, baseX.value[index] ?? 0)}px`
+    })
+  )
+
+  const setCopyRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+    if (el instanceof HTMLSpanElement) copyRefs.value[index] = el
+  }
+
+  function animate() {
+    if (isPaused.value) return
+
+    const now = performance.now()
+    const delta = animLastTime ? now - animLastTime : 16
+    animLastTime = now
+
+    texts.forEach((_, index) => {
+      const baseVelocity = index % 2 !== 0 ? -velocity : velocity
+      let moveBy = (directionFactors.value[index] ?? 1) * baseVelocity * (delta / 1000)
+
+      if (velocityFactor.value < 0) {
+        directionFactors.value[index] = -1
+      } else if (velocityFactor.value > 0) {
+        directionFactors.value[index] = 1
+      }
+
+      moveBy += (directionFactors.value[index] ?? 1) * moveBy * velocityFactor.value
+      baseX.value[index] = (baseX.value[index] ?? 0) + moveBy
+    })
+  }
+
+  onMounted(async () => {
+    await nextTick()
+
+    baseX.value = new Array(texts.length).fill(0)
+    directionFactors.value = new Array(texts.length).fill(1)
+    animLastTime = performance.now()
+
+    const firstContainer = containerRef.value[0]
+    if (firstContainer) {
+      scrollTriggerInstance = ScrollTrigger.create({
+        trigger: firstContainer,
+        start: 'top bottom',
+        end: 'bottom top',
+      })
+    }
+
+    gsap.ticker.add(animate)
+  })
+
+  onUnmounted(() => {
+    gsap.ticker.remove(animate)
+    scrollTriggerInstance?.kill()
+  })
+</script>
+
+<template>
+  <section
+    class="w-full overflow-x-hidden"
+    @mouseenter="isPaused = pauseOnHover"
+    @mouseleave="isPaused = false"
+  >
+    <div
+      v-for="(text, index) in texts"
+      :key="index"
+      ref="containerRef"
+      :class="`${parallaxClassName} relative w-full overflow-x-hidden overflow-y-visible`"
+      :style="parallaxStyle"
+    >
+      <div
+        :class="`${scrollerClassName} font-styles-logo flex py-2 text-center font-sans text-4xl font-medium tracking-[-0.02em] whitespace-nowrap text-neutral drop-shadow md:text-[5rem] md:leading-[5rem]`"
+        :style="{ transform: `translateX(${scrollTransforms[index] ?? '0px'})`, ...scrollerStyle }"
+      >
+        <span
+          v-for="spanIndex in calculatedCopies[index] ?? 15"
+          :key="spanIndex"
+          :ref="spanIndex === 1 ? (el) => setCopyRef(el, index) : undefined"
+          :class="`shrink-0 ${className} text-primary-500`"
+        >
+          {{ text }}&nbsp;
+        </span>
+      </div>
+    </div>
+  </section>
+</template>

package/layers/motion/app/composables/useMarqueeCopies.ts

@@ -0,0 +1,50 @@
+import type { MaybeRef } from 'vue'
+
+export function useMarqueeCopies(
+  containerRefs: Ref<HTMLElement[]>,
+  copyRefs: Ref<HTMLSpanElement[]>,
+  rowCount: MaybeRef<number>,
+) {
+  const copyWidths = ref<number[]>([])
+  const calculatedCopies = ref<number[]>([])
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function calculate() {
+    const n = unref(rowCount)
+    for (let i = 0; i < n; i++) {
+      const copy = copyRefs.value[i]
+      const container = containerRefs.value[i]
+      if (!copy || !container) continue
+      const singleWidth = copy.offsetWidth
+      if (singleWidth === 0) continue
+      const effectiveWidth = Math.max(container.offsetWidth, window.innerWidth)
+      const minCopies = Math.ceil((effectiveWidth * 2.5) / singleWidth)
+      copyWidths.value[i] = singleWidth
+      calculatedCopies.value[i] = Math.max(minCopies, 8)
+    }
+  }
+
+  function debouncedCalculate() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      calculate()
+      debounceTimer = null
+    }, 150)
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      calculate()
+      setTimeout(calculate, 100)
+    })
+    window.addEventListener('resize', debouncedCalculate, { passive: true })
+  })
+
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    window.removeEventListener('resize', debouncedCalculate)
+  })
+
+  return { copyWidths, calculatedCopies }
+}

package/layers/motion/app/composables/useMarqueeVelocity.ts

@@ -0,0 +1,44 @@
+import type { MaybeRef } from 'vue'
+
+interface VelocityMapping {
+  input: [number, number]
+  output: [number, number]
+}
+
+interface UseMarqueeVelocityOptions {
+  damping?: MaybeRef<number>
+  stiffness?: MaybeRef<number>
+  velocityMapping?: MaybeRef<VelocityMapping>
+}
+
+export function useMarqueeVelocity(opts: UseMarqueeVelocityOptions = {}) {
+  const { velocity: rawVelocity } = useSmoothScroll()
+  const { gsap } = useGsap()
+
+  const smoothVelocity = ref(0)
+  const velocityFactor = ref(0)
+
+  function tick() {
+    const damping = (unref(opts.damping) ?? 50) / 1000
+    const stiffness = (unref(opts.stiffness) ?? 400) / 1000
+    const mapping: VelocityMapping = unref(opts.velocityMapping) ?? {
+      input: [0, 1000],
+      output: [0, 5],
+    }
+
+    smoothVelocity.value += (rawVelocity.value - smoothVelocity.value) * stiffness
+    smoothVelocity.value *= 1 - damping
+
+    const inputRange = mapping.input[1] - mapping.input[0]
+    const outputRange = mapping.output[1] - mapping.output[0]
+    let t = (Math.abs(smoothVelocity.value) - mapping.input[0]) / inputRange
+    t = Math.max(0, Math.min(1, t))
+    velocityFactor.value = mapping.output[0] + t * outputRange
+    if (smoothVelocity.value < 0) velocityFactor.value *= -1
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+  onUnmounted(() => gsap.ticker.remove(tick))
+
+  return { velocityFactor }
+}

package/layers/motion/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../apps/playground/tsconfig.json",
+
   "compilerOptions": {
     "strict": true
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.39",
+  "version": "1.6.40",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",