kmcom-nuxt-layers 2.2.0 → 2.2.1

package/layers/animations/app/components/Motion/CountUp.vue

@@ -1,35 +1,35 @@
 <script setup lang="ts">
-const {
-  to,
-  from = 0,
-  duration = 2,
-  ease = 'power2.out',
-  format = undefined,
-  once = true,
-  prefix = '',
-  suffix = '',
-  as = 'span',
-} = defineProps<{
-  to: number
-  from?: number
-  duration?: number
-  ease?: string
-  format?: (n: number) => string
-  once?: boolean
-  prefix?: string
-  suffix?: string
-  as?: string
-}>()
+  const {
+    to,
+    from = 0,
+    duration = 2,
+    ease = 'power2.out',
+    format = undefined,
+    once = true,
+    prefix = '',
+    suffix = '',
+    as = 'span',
+  } = defineProps<{
+    to: number
+    from?: number
+    duration?: number
+    ease?: string
+    format?: (n: number) => string
+    once?: boolean
+    prefix?: string
+    suffix?: string
+    as?: string
+  }>()
 
-const el = ref<HTMLElement | null>(null)
-const { displayValue, isComplete } = useCountUp(el, {
-  to,
-  from,
-  duration,
-  ease,
-  once,
-  ...(format !== undefined ? { format } : {}),
-})
+  const el = ref<HTMLElement | null>(null)
+  const { displayValue, isComplete } = useCountUp(el, {
+    to,
+    from,
+    duration,
+    ease,
+    once,
+    ...(format !== undefined ? { format } : {}),
+  })
 </script>
 
 <template>

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

@@ -1,22 +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 {
+    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 })
+  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" />
+    <slot :is-active />
   </div>
 </template>

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

@@ -1,56 +1,53 @@
 <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 {
+    speed = 50,
+    direction = 'left',
+    pauseOnHover = true,
+    gap = '2rem',
+    velocityBased = false,
+    velocitySensitivity = 0.5,
+    velocityDirection = false,
+    minSpeed = 0.2,
+    maxSpeed = 5,
+  } = 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
+  }>()
 
   const { gsap } = useGsap()
   const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
@@ -70,14 +67,14 @@
 
     // Set up the infinite scroll animation
     tweenRef.value = gsap.to(content, {
-      x: props.direction === 'left' ? -contentWidth / 2 : contentWidth / 2,
-      duration: contentWidth / props.speed,
+      x: direction === 'left' ? -contentWidth / 2 : contentWidth / 2,
+      duration: contentWidth / 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)
+          return direction === 'left' ? parseFloat(x) % mod : Math.abs(parseFloat(x) % mod)
         }),
       },
     })
@@ -87,21 +84,21 @@
   watch(
     [scrollVelocity, scrollDirection],
     ([vel, dir]) => {
-      if (!props.velocityBased || !tweenRef.value || isPaused.value) return
+      if (!velocityBased || !tweenRef.value || isPaused.value) return
 
       // Calculate velocity multiplier
       const absVelocity = Math.abs(vel)
-      const velocityEffect = absVelocity * props.velocitySensitivity * 0.02
+      const velocityEffect = absVelocity * 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))
+      multiplier = Math.max(minSpeed, Math.min(maxSpeed, multiplier))
 
       // Optionally reverse direction based on scroll direction
-      if (props.velocityDirection && dir !== 0) {
-        const baseDirection = props.direction === 'left' ? 1 : -1
+      if (velocityDirection && dir !== 0) {
+        const baseDirection = direction === 'left' ? 1 : -1
         multiplier *= dir * baseDirection
       }
 
@@ -125,14 +122,14 @@
   })
 
   function handleMouseEnter() {
-    if (props.pauseOnHover && tweenRef.value) {
+    if (pauseOnHover && tweenRef.value) {
       gsap.to(tweenRef.value, { timeScale: 0, duration: 0.5 })
       isPaused.value = true
     }
   }
 
   function handleMouseLeave() {
-    if (props.pauseOnHover && tweenRef.value) {
+    if (pauseOnHover && tweenRef.value) {
       gsap.to(tweenRef.value, { timeScale: currentTimeScale.value, duration: 0.5 })
       isPaused.value = false
     }

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

@@ -119,8 +119,8 @@
 <template>
   <section
     class="w-full overflow-x-hidden"
-    @mouseenter="isPaused = pauseOnHover"
-    @mouseleave="isPaused = false"
+    @mouseenter="() => (isPaused = pauseOnHover)"
+    @mouseleave="() => (isPaused = false)"
   >
     <div
       v-for="(text, index) in texts"

package/layers/animations/app/components/Motion/Staggered.vue

@@ -1,51 +1,47 @@
 <script setup lang="ts">
-// @ts-nocheck
-// Props
-const props = withDefaults(
-  defineProps<{
+  // Props
+  const {
+    staggerDelay = 100,
+    initialDelay = 0,
+    animation = 'fadeIn',
+  } = defineProps<{
     staggerDelay?: number
     initialDelay?: number
     animation?: string
-  }>(),
-  {
-    staggerDelay: 100,
-    initialDelay: 0,
-    animation: 'fadeIn',
-  }
-)
+  }>()
 
-// State
-const items = ref<HTMLElement[]>([])
-const animatedItems = ref<boolean[]>([])
+  // State
+  const items = ref<HTMLElement[]>([])
+  const animatedItems = ref<boolean[]>([])
 
-// Slots
-const slots = useSlots()
+  // Slots
+  const slots = useSlots()
 
-// Methods
-const setItemRef = (el: HTMLElement | null, index: number) => {
-  if (el) {
-    items.value[index] = el
-    animatedItems.value[index] = false
+  // Methods
+  const setItemRef = (el: HTMLElement | null, index: number) => {
+    if (el) {
+      items.value[index] = el
+      animatedItems.value[index] = false
+    }
   }
-}
 
-// Lifecycle
-onMounted(() => {
-  // Animate items with staggered delay
-  setTimeout(() => {
-    items.value.forEach((item, index) => {
-      if (item) {
-        setTimeout(
-          () => {
-            animatedItems.value[index] = true
-            item.classList.add(`animate-${props.animation}`, 'animated')
-          },
-          props.initialDelay + index * props.staggerDelay
-        )
-      }
-    })
-  }, 100)
-})
+  // Lifecycle
+  onMounted(() => {
+    // Animate items with staggered delay
+    setTimeout(() => {
+      items.value.forEach((item, index) => {
+        if (item) {
+          setTimeout(
+            () => {
+              animatedItems.value[index] = true
+              item.classList.add(`animate-${animation}`, 'animated')
+            },
+            initialDelay + index * staggerDelay
+          )
+        }
+      })
+    }, 100)
+  })
 </script>
 
 <template>
@@ -60,15 +56,15 @@ onMounted(() => {
 </template>
 
 <style scoped>
-/* stylelint-disable selector-pseudo-class-no-unknown */
-.motion-staggered :deep(.animated) {
-  transform: translateY(0);
-  opacity: 1;
-}
+  /* stylelint-disable selector-pseudo-class-no-unknown */
+  .motion-staggered :deep(.animated) {
+    transform: translateY(0);
+    opacity: 1;
+  }
 
-.motion-staggered :deep(*) {
-  transform: translateY(20px);
-  opacity: 0;
-  transition: all 0.3s ease-out;
-}
+  .motion-staggered :deep(*) {
+    transform: translateY(20px);
+    opacity: 0;
+    transition: all 0.3s ease-out;
+  }
 </style>

package/layers/animations/app/components/Motion/TextReveal.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
+  const {
+    type = 'chars',
+    stagger = 0.03,
+    duration = 0.8,
+    start = 'top 80%',
+  } = defineProps<{
     /**
      * Text to animate
      */
@@ -21,19 +25,17 @@ const props = withDefaults(
      * Start position for scroll trigger
      */
     start?: string
-  }>(),
-  { type: 'chars', stagger: 0.03, duration: 0.8, start: 'top 80%' }
-)
+  }>()
 
-const animBinding = computed(() => ({
-  y: 40,
-  opacity: 0,
-  rotateX: -90,
-  stagger: props.stagger,
-  duration: props.duration,
-  ease: 'power3.out',
-  start: props.start,
-}))
+  const animBinding = computed(() => ({
+    y: 40,
+    opacity: 0,
+    rotateX: -90,
+    stagger: stagger,
+    duration: duration,
+    ease: 'power3.out',
+    start: start,
+  }))
 </script>
 
 <template>
@@ -58,9 +60,9 @@ const animBinding = computed(() => ({
 </template>
 
 <style scoped>
-.motion-text-reveal {
-  display: inline-flex;
-  flex-wrap: wrap;
-  perspective: 1000px;
-}
+  .motion-text-reveal {
+    display: inline-flex;
+    flex-wrap: wrap;
+    perspective: 1000px;
+  }
 </style>

package/layers/animations/app/components/Motion/Tilt.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-const {
-  maxTilt = 15,
-  perspective = 800,
-  damping = 40,
-  stiffness = 250,
-} = defineProps<{
-  maxTilt?: number
-  perspective?: number
-  damping?: number
-  stiffness?: number
-}>()
+  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 })
+  const el = ref<HTMLElement | null>(null)
+  useTiltEffect(el, { maxTilt, perspective, damping, stiffness })
 </script>
 
 <template>

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

@@ -1,97 +1,97 @@
 <script setup lang="ts">
-type EffectType =
-  | 'skew'
-  | 'scale'
-  | 'blur'
-  | 'opacity'
-  | 'letterSpacing'
-  | 'rotate'
-  | 'translateY'
-  | 'hueRotate'
+  type EffectType =
+    | 'skew'
+    | 'scale'
+    | 'blur'
+    | 'opacity'
+    | 'letterSpacing'
+    | 'rotate'
+    | 'translateY'
+    | 'hueRotate'
 
-const {
-  effect,
-  intensity = undefined,
-  damping = 15,
-  stiffness = 150,
-  as = 'div',
-} = defineProps<{
-  effect: EffectType
-  intensity?: number
-  damping?: number
-  stiffness?: number
-  as?: string
-}>()
+  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()
+  const { gsap } = useGsap()
+  const { velocity } = useSmoothScroll()
 
-const smoothVelocity = ref(0)
-const smoothAbsVelocity = ref(0)
+  const smoothVelocity = ref(0)
+  const smoothAbsVelocity = ref(0)
 
-function tick() {
-  const d = damping / 1000
-  const s = stiffness / 1000
+  function tick() {
+    const d = damping / 1000
+    const s = stiffness / 1000
 
-  smoothVelocity.value += (velocity.value - smoothVelocity.value) * s
-  smoothVelocity.value *= 1 - d
+    smoothVelocity.value += (velocity.value - smoothVelocity.value) * s
+    smoothVelocity.value *= 1 - d
 
-  smoothAbsVelocity.value += (Math.abs(velocity.value) - smoothAbsVelocity.value) * s
-  smoothAbsVelocity.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
-}
+    if (Math.abs(smoothVelocity.value) < 0.01) smoothVelocity.value = 0
+    if (smoothAbsVelocity.value < 0.01) smoothAbsVelocity.value = 0
+  }
 
-onMounted(() => gsap.ticker.add(tick))
-onUnmounted(() => gsap.ticker.remove(tick))
+  onMounted(() => gsap.ticker.add(tick))
+  onUnmounted(() => gsap.ticker.remove(tick))
 
-const defaultIntensities: Record<EffectType, number> = {
-  skew: 3,
-  scale: 0.12,
-  blur: 1.5,
-  opacity: 0.25,
-  letterSpacing: 6,
-  rotate: 4,
-  translateY: 8,
-  hueRotate: 45,
-}
+  const defaultIntensities: Record<EffectType, number> = {
+    skew: 3,
+    scale: 0.12,
+    blur: 1.5,
+    opacity: 0.25,
+    letterSpacing: 6,
+    rotate: 4,
+    translateY: 8,
+    hueRotate: 45,
+  }
 
-const activeIntensity = computed(() => intensity ?? defaultIntensities[effect])
+  const activeIntensity = computed(() => intensity ?? defaultIntensities[effect])
 
-const effectStyle = computed(() => {
-  const vel = smoothVelocity.value
-  const absVel = smoothAbsVelocity.value
-  const int = activeIntensity.value
+  const effectStyle = computed(() => {
+    const vel = smoothVelocity.value
+    const absVel = smoothAbsVelocity.value
+    const int = activeIntensity.value
 
-  switch (effect) {
-    case 'skew':
-      return { transform: `skewX(${Math.max(-15, Math.min(15, vel * int))}deg)` }
-    case 'scale':
-      return { transform: `scale(${1 + absVel * int})` }
-    case 'blur':
-      return { filter: `blur(${absVel * int}px)` }
-    case 'opacity':
-      return { opacity: Math.max(0.3, 1 - absVel * int) }
-    case 'letterSpacing':
-      return { letterSpacing: `${absVel * int}px` }
-    case 'rotate':
-      return { transform: `rotate(${vel * int}deg)` }
-    case 'translateY':
-      return { transform: `translateY(${vel * -int}px)` }
-    case 'hueRotate':
-      return { filter: `hue-rotate(${absVel * int}deg)` }
-    default:
-      return {}
-  }
-})
+    switch (effect) {
+      case 'skew':
+        return { transform: `skewX(${Math.max(-15, Math.min(15, vel * int))}deg)` }
+      case 'scale':
+        return { transform: `scale(${1 + absVel * int})` }
+      case 'blur':
+        return { filter: `blur(${absVel * int}px)` }
+      case 'opacity':
+        return { opacity: Math.max(0.3, 1 - absVel * int) }
+      case 'letterSpacing':
+        return { letterSpacing: `${absVel * int}px` }
+      case 'rotate':
+        return { transform: `rotate(${vel * int}deg)` }
+      case 'translateY':
+        return { transform: `translateY(${vel * -int}px)` }
+      case 'hueRotate':
+        return { filter: `hue-rotate(${absVel * int}deg)` }
+      default:
+        return {}
+    }
+  })
 
-const effectClasses = computed(() => {
-  if (['skew', 'scale', 'rotate', 'translateY'].includes(effect)) {
-    return ['will-change-transform']
-  }
-  return []
-})
+  const effectClasses = computed(() => {
+    if (['skew', 'scale', 'rotate', 'translateY'].includes(effect)) {
+      return ['will-change-transform']
+    }
+    return []
+  })
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from 'vue'
 import type { ScrollTrigger as GSAPScrollTrigger } from 'gsap/ScrollTrigger'
 
-interface UseCountUpOptions {
+type UseCountUpOptions = {
   to: number
   from?: number
   duration?: number