kmcom-nuxt-layers 1.0.1

package/layers/motion/app/assets/css/main.css

@@ -0,0 +1,111 @@
+/* Motion Layer CSS */
+.motion-layer {
+  /* Base styles for motion layer */
+}
+
+/* Transition classes */
+.transition-default {
+  transition-duration: 300ms;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-fade {
+  transition-duration: 300ms;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+}
+
+.transition-slide {
+  transition-duration: 300ms;
+  transition-property: transform, opacity;
+  transition-timing-function: ease-out;
+}
+
+/* Animation classes */
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 0.3s ease-out forwards;
+}
+
+.animate-slide-in-up {
+  animation: slideInUp 0.3s ease-out forwards;
+}
+
+.animate-slide-in-down {
+  animation: slideInDown 0.3s ease-out forwards;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.3s ease-out forwards;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s ease-out forwards;
+}
+
+/* Keyframes */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,171 @@
+<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)
+      }),
+    },
+  })
+})
+
+// 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 }
+)
+
+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
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="motion-marquee"
+    :class="{ 'is-paused': isPaused }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div ref="contentRef" class="motion-marquee__content" :style="{ gap }">
+      <slot />
+      <!-- Duplicate for seamless loop -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.motion-marquee {
+  width: 100%;
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.motion-marquee__content {
+  display: flex;
+  will-change: transform;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  width: max-content;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Parallax speed (-1 to 1, negative = slower than scroll)
+     */
+    speed?: number
+    /**
+     * Direction of parallax movement
+     */
+    direction?: 'vertical' | 'horizontal'
+    /**
+     * Enable rotation during parallax
+     */
+    rotate?: number
+    /**
+     * Enable scale during parallax
+     */
+    scale?: number
+    /**
+     * Scrub smoothness (0.1 = very smooth, 1 = instant)
+     */
+    scrub?: number
+    /**
+     * Tag to render as
+     */
+    as?: string
+  }>(),
+  {
+    speed: 0.5,
+    direction: 'vertical',
+    rotate: 0,
+    scale: 0,
+    scrub: 0.5,
+    as: 'div',
+  }
+)
+
+const { gsap, ScrollTrigger } = useGsap()
+
+const containerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  if (!containerRef.value || !contentRef.value) return
+
+  const yAmount = props.direction === 'vertical' ? props.speed * -200 : 0
+  const xAmount = props.direction === 'horizontal' ? props.speed * 200 : 0
+
+  const animationProps: gsap.TweenVars = {
+    scrollTrigger: {
+      trigger: containerRef.value,
+      start: 'top bottom',
+      end: 'bottom top',
+      scrub: props.scrub,
+    },
+    ease: 'none',
+  }
+
+  if (yAmount !== 0) animationProps.y = yAmount
+  if (xAmount !== 0) animationProps.x = xAmount
+  if (props.rotate !== 0) animationProps.rotation = props.rotate
+  if (props.scale !== 0) animationProps.scale = 1 + props.scale
+
+  gsap.to(contentRef.value, animationProps)
+})
+</script>
+
+<template>
+  <component :is="as" ref="containerRef" class="motion-parallax">
+    <div ref="contentRef" class="motion-parallax-content will-change-transform">
+      <slot />
+    </div>
+  </component>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Target to scroll to (selector, element, or pixel position)
+     */
+    to: string | number
+    /**
+     * Scroll duration in seconds
+     */
+    duration?: number
+    /**
+     * Offset from target (negative = above target)
+     */
+    offset?: number
+    /**
+     * Tag to render as
+     */
+    as?: string
+  }>(),
+  {
+    duration: 1.5,
+    offset: 0,
+    as: 'button',
+  }
+)
+
+const emit = defineEmits<{
+  scrollStart: []
+  scrollComplete: []
+}>()
+
+const { scrollTo } = useSmoothScroll()
+
+function handleClick() {
+  emit('scrollStart')
+  scrollTo(props.to, {
+    duration: props.duration,
+    offset: props.offset,
+    onComplete: () => emit('scrollComplete'),
+  })
+}
+</script>
+
+<template>
+  <component :is="as" class="motion-scroll-link" @click="handleClick">
+    <slot />
+  </component>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Display type: linear bar or circular
+     */
+    type?: 'linear' | 'circular'
+    /**
+     * Size for circular progress (px)
+     */
+    size?: number
+    /**
+     * Stroke width for circular progress
+     */
+    strokeWidth?: number
+    /**
+     * Show percentage text
+     */
+    showPercentage?: boolean
+    /**
+     * Gradient colors (start, middle, end)
+     */
+    colors?: [string, string, string]
+    /**
+     * Background color
+     */
+    bgColor?: string
+    /**
+     * Height for linear progress bar (px)
+     */
+    height?: number
+  }>(),
+  {
+    type: 'linear',
+    size: 120,
+    strokeWidth: 8,
+    showPercentage: true,
+    colors: () => ['var(--color-primary-500)', 'rgb(168, 85, 247)', 'rgb(236, 72, 153)'],
+    bgColor: 'rgb(31, 41, 55)',
+    height: 4,
+  }
+)
+
+const { progress } = useSmoothScroll()
+
+const percentage = computed(() => Math.round(progress.value * 100))
+
+// For circular progress
+const radius = computed(() => (props.size - props.strokeWidth) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const strokeDasharray = computed(
+  () => `${progress.value * circumference.value} ${circumference.value}`
+)
+
+// Generate gradient ID
+const gradientId = `scroll-progress-gradient-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <!-- Linear Progress -->
+  <div v-if="type === 'linear'" class="motion-scroll-progress-linear">
+    <div
+      class="w-full rounded-full overflow-hidden"
+      :style="{ height: `${height}px`, backgroundColor: bgColor }"
+    >
+      <div
+        class="h-full rounded-full transition-[width] duration-100"
+        :style="{
+          width: `${percentage}%`,
+          background: `linear-gradient(to right, ${colors[0]}, ${colors[1]}, ${colors[2]})`,
+        }"
+      />
+    </div>
+    <span v-if="showPercentage" class="text-sm font-medium tabular-nums mt-2 block text-center">
+      {{ percentage }}%
+    </span>
+  </div>
+
+  <!-- Circular Progress -->
+  <div
+    v-else
+    class="motion-scroll-progress-circular relative inline-flex items-center justify-center"
+  >
+    <svg :width="size" :height="size" class="-rotate-90" :viewBox="`0 0 ${size} ${size}`">
+      <!-- Background circle -->
+      <circle
+        :cx="size / 2"
+        :cy="size / 2"
+        :r="radius"
+        fill="none"
+        :stroke="bgColor"
+        :stroke-width
+      />
+      <!-- Progress circle -->
+      <circle
+        :cx="size / 2"
+        :cy="size / 2"
+        :r="radius"
+        fill="none"
+        :stroke="`url(#${gradientId})`"
+        :stroke-width
+        stroke-linecap="round"
+        :stroke-dasharray
+        class="transition-[stroke-dasharray] duration-100"
+      />
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" :style="`stop-color: ${colors[0]}`" />
+          <stop offset="50%" :style="`stop-color: ${colors[1]}`" />
+          <stop offset="100%" :style="`stop-color: ${colors[2]}`" />
+        </linearGradient>
+      </defs>
+    </svg>
+    <span
+      v-if="showPercentage"
+      class="absolute inset-0 flex items-center justify-center text-2xl font-bold tabular-nums"
+    >
+      {{ percentage }}%
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+</style>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Which stats to show
+     */
+    show?: ('velocity' | 'progress' | 'direction' | 'scrollY')[]
+    /**
+     * Position on screen
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+    /**
+     * Use compact layout
+     */
+    compact?: boolean
+  }>(),
+  {
+    show: () => ['velocity', 'progress', 'direction'],
+    position: 'bottom-right',
+    compact: false,
+  }
+)
+
+const { velocity, progress, direction, scrollY } = useSmoothScroll()
+
+const isScrolling = computed(() => Math.abs(velocity.value) > 0.01)
+
+const positionClasses = computed(() => {
+  const classes = ['fixed', 'z-50']
+  switch (props.position) {
+    case 'top-left':
+      classes.push('top-4', 'left-4')
+      break
+    case 'top-right':
+      classes.push('top-4', 'right-4')
+      break
+    case 'bottom-left':
+      classes.push('bottom-4', 'left-4')
+      break
+    case 'bottom-right':
+    default:
+      classes.push('bottom-4', 'right-4')
+      break
+  }
+  return classes
+})
+
+const directionLabel = computed(() => {
+  if (direction.value > 0) return 'DOWN'
+  if (direction.value < 0) return 'UP'
+  return 'IDLE'
+})
+</script>
+
+<template>
+  <div
+    class="bg-black/80 backdrop-blur-sm text-white rounded-xl transition-opacity duration-300"
+    :class="[
+      ...positionClasses,
+      isScrolling ? 'opacity-100' : 'opacity-60',
+      compact ? 'px-3 py-2' : 'px-4 py-3',
+    ]"
+  >
+    <div class="flex items-center" :class="[compact ? 'gap-4 text-xs' : 'gap-6 text-sm']">
+      <!-- Scrolling indicator -->
+      <div
+        class="w-2 h-2 rounded-full transition-colors duration-100"
+        :class="isScrolling ? 'bg-green-500' : 'bg-gray-600'"
+      />
+
+      <!-- Velocity -->
+      <div v-if="show.includes('velocity')" class="text-center">
+        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">VEL</div>
+        <div class="font-medium tabular-nums">{{ velocity.toFixed(2) }}</div>
+      </div>
+
+      <!-- Progress -->
+      <div v-if="show.includes('progress')" class="text-center">
+        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">PROG</div>
+        <div class="font-medium tabular-nums">{{ (progress * 100).toFixed(0) }}%</div>
+      </div>
+
+      <!-- Direction -->
+      <div v-if="show.includes('direction')" class="text-center">
+        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">DIR</div>
+        <div class="font-medium">{{ directionLabel }}</div>
+      </div>
+
+      <!-- Scroll Y -->
+      <div v-if="show.includes('scrollY')" class="text-center">
+        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">Y</div>
+        <div class="font-medium tabular-nums">{{ Math.round(scrollY) }}px</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Props
+const props = withDefaults(
+  defineProps<{
+    staggerDelay?: number
+    initialDelay?: number
+    animation?: string
+  }>(),
+  {
+    staggerDelay: 100,
+    initialDelay: 0,
+    animation: 'fadeIn',
+  }
+)
+
+// State
+const items = ref<HTMLElement[]>([])
+const animatedItems = ref<boolean[]>([])
+
+// Slots
+const slots = useSlots()
+
+// 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)
+})
+</script>
+
+<template>
+  <div class="motion-staggered">
+    <slot
+      v-for="(item, index) in slots.default?.()"
+      :key="index"
+      :ref="(el: HTMLElement | null) => setItemRef(el, index)"
+      :class="{ animated: animatedItems[index] }"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* 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;
+}
+</style>