kmcom-nuxt-layers 1.6.39 → 1.6.43

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const {
+  strength = 0.3,
+  radius = 100,
+  damping = 30,
+  stiffness = 300,
+} = defineProps<{
+  strength?: number
+  radius?: number
+  damping?: number
+  stiffness?: number
+}>()
+
+const el = ref<HTMLElement | null>(null)
+const { isActive } = useMagneticElement(el, { strength, radius, damping, stiffness })
+</script>
+
+<template>
+  <div ref="el" class="will-change-transform">
+    <slot :is-active="isActive" />
+  </div>
+</template>

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/components/Motion/Tilt.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const {
+  maxTilt = 15,
+  perspective = 800,
+  damping = 40,
+  stiffness = 250,
+} = defineProps<{
+  maxTilt?: number
+  perspective?: number
+  damping?: number
+  stiffness?: number
+}>()
+
+const el = ref<HTMLElement | null>(null)
+useTiltEffect(el, { maxTilt, perspective, damping, stiffness })
+</script>
+
+<template>
+  <div ref="el" class="will-change-transform" style="transform-style: preserve-3d">
+    <slot />
+  </div>
+</template>

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

@@ -9,78 +9,43 @@ type EffectType =
   | 'translateY'
   | 'hueRotate'
 
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Type of velocity effect to apply
-     */
-    effect: EffectType
-    /**
-     * Intensity multiplier (default varies by effect type)
-     */
-    intensity?: number
-    /**
-     * Whether to use smoothed velocity (recommended)
-     */
-    smooth?: boolean
-    /**
-     * Lerp factor for smoothing (0.1 = very smooth, 0.3 = responsive)
-     */
-    smoothFactor?: number
-    /**
-     * Tag to render as
-     */
-    as?: string
-  }>(),
-  {
-    smooth: true,
-    smoothFactor: 0.15,
-    as: 'div',
-  }
-)
-
+const {
+  effect,
+  intensity = undefined,
+  damping = 15,
+  stiffness = 150,
+  as = 'div',
+} = defineProps<{
+  effect: EffectType
+  intensity?: number
+  damping?: number
+  stiffness?: number
+  as?: string
+}>()
+
+const { gsap } = useGsap()
 const { velocity } = useSmoothScroll()
 
-// Smoothed velocity for stable animations
 const smoothVelocity = ref(0)
 const smoothAbsVelocity = ref(0)
-let animationFrame: number | null = null
 
-function lerp(start: number, end: number, factor: number): number {
-  return start + (end - start) * factor
-}
+function tick() {
+  const d = damping / 1000
+  const s = stiffness / 1000
 
-function updateSmoothedValues() {
-  smoothVelocity.value = lerp(smoothVelocity.value, velocity.value, props.smoothFactor)
-  smoothAbsVelocity.value = lerp(
-    smoothAbsVelocity.value,
-    Math.abs(velocity.value),
-    props.smoothFactor
-  )
+  smoothVelocity.value += (velocity.value - smoothVelocity.value) * s
+  smoothVelocity.value *= 1 - d
+
+  smoothAbsVelocity.value += (Math.abs(velocity.value) - smoothAbsVelocity.value) * s
+  smoothAbsVelocity.value *= 1 - d
 
   if (Math.abs(smoothVelocity.value) < 0.01) smoothVelocity.value = 0
   if (smoothAbsVelocity.value < 0.01) smoothAbsVelocity.value = 0
-
-  animationFrame = requestAnimationFrame(updateSmoothedValues)
 }
 
-onMounted(() => {
-  if (props.smooth) {
-    animationFrame = requestAnimationFrame(updateSmoothedValues)
-  }
-})
-
-onUnmounted(() => {
-  if (animationFrame) cancelAnimationFrame(animationFrame)
-})
-
-// Get the active velocity value
-const activeVelocity = computed(() => (props.smooth ? smoothVelocity.value : velocity.value))
-const activeAbsVelocity = computed(() =>
-  props.smooth ? smoothAbsVelocity.value : Math.abs(velocity.value)
-)
+onMounted(() => gsap.ticker.add(tick))
+onUnmounted(() => gsap.ticker.remove(tick))
 
-// Default intensities per effect type
 const defaultIntensities: Record<EffectType, number> = {
   skew: 3,
   scale: 0.12,
@@ -92,15 +57,14 @@ const defaultIntensities: Record<EffectType, number> = {
   hueRotate: 45,
 }
 
-const intensity = computed(() => props.intensity ?? defaultIntensities[props.effect])
+const activeIntensity = computed(() => intensity ?? defaultIntensities[effect])
 
-// Compute the style based on effect type
 const effectStyle = computed(() => {
-  const vel = activeVelocity.value
-  const absVel = activeAbsVelocity.value
-  const int = intensity.value
+  const vel = smoothVelocity.value
+  const absVel = smoothAbsVelocity.value
+  const int = activeIntensity.value
 
-  switch (props.effect) {
+  switch (effect) {
     case 'skew':
       return { transform: `skewX(${Math.max(-15, Math.min(15, vel * int))}deg)` }
     case 'scale':
@@ -122,13 +86,11 @@ const effectStyle = computed(() => {
   }
 })
 
-// Classes for performance optimization
 const effectClasses = computed(() => {
-  const classes = []
-  if (['skew', 'scale', 'rotate', 'translateY'].includes(props.effect)) {
-    classes.push('will-change-transform')
+  if (['skew', 'scale', 'rotate', 'translateY'].includes(effect)) {
+    return ['will-change-transform']
   }
-  return classes
+  return []
 })
 </script>
 

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

@@ -0,0 +1,61 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { ScrollTrigger as GSAPScrollTrigger } from 'gsap/ScrollTrigger'
+
+interface UseCountUpOptions {
+  to: number
+  from?: number
+  duration?: number
+  ease?: string
+  format?: (n: number) => string
+  once?: boolean
+}
+
+export function useCountUp(elementRef: MaybeRefOrGetter<HTMLElement | null>, opts: UseCountUpOptions) {
+  const { gsap, ScrollTrigger } = useGsap()
+
+  const displayValue = ref(String(opts.from ?? 0))
+  const isComplete = ref(false)
+
+  const format = opts.format ?? ((n: number) => n.toLocaleString())
+  const counter = { value: opts.from ?? 0 }
+
+  let scrollTriggerInstance: GSAPScrollTrigger | null = null
+  let tween: gsap.core.Tween | null = null
+
+  function startCount() {
+    tween = gsap.to(counter, {
+      value: opts.to,
+      duration: opts.duration ?? 2,
+      ease: opts.ease ?? 'power2.out',
+      onUpdate: () => {
+        displayValue.value = format(Math.round(counter.value))
+      },
+      onComplete: () => {
+        isComplete.value = true
+        displayValue.value = format(opts.to)
+      },
+    })
+  }
+
+  onMounted(async () => {
+    await nextTick()
+    displayValue.value = format(opts.from ?? 0)
+
+    const el = toValue(elementRef)
+    if (!el) return
+
+    scrollTriggerInstance = ScrollTrigger.create({
+      trigger: el,
+      start: 'top 80%',
+      once: opts.once ?? true,
+      onEnter: startCount,
+    })
+  })
+
+  onUnmounted(() => {
+    tween?.kill()
+    scrollTriggerInstance?.kill()
+  })
+
+  return { displayValue, isComplete }
+}