kmcom-nuxt-layers 1.7.8 → 2.1.6

package/layers/motion/app/app.config.ts

@@ -1,27 +0,0 @@
-export default {
-  motion: {
-    /**
-     * Enable smooth scroll globally (true), on specific routes (string[]), or disable (false).
-     * @default true
-     */
-    smoothScroll: true,
-
-    /**
-     * Enable GSAP ScrollTrigger integration with Lenis
-     * @default true
-     */
-    gsapScrollTrigger: true,
-
-    /**
-     * Lenis smooth scroll configuration
-     */
-    lenis: {
-      duration: 1.2,
-      orientation: 'vertical',
-      gestureOrientation: 'vertical',
-      smoothWheel: true,
-      smoothTouch: false,
-      touchMultiplier: 2,
-    },
-  },
-}

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

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-const { scrub = 1 } = defineProps<{
-  /**
-   * Scrub smoothness (1 = default, higher = smoother/slower)
-   */
-  scrub?: number
-}>()
-
-const emit = defineEmits<{
-  'panel-change': [index: number]
-}>()
-
-const { gsap } = useGsap()
-
-const sectionRef = ref<HTMLElement | null>(null)
-const trackRef = ref<HTMLElement | null>(null)
-
-let cleanup: (() => void) | null = null
-
-onMounted(() => {
-  if (!sectionRef.value || !trackRef.value) return
-
-  const track = trackRef.value
-  const trackWidth = track.scrollWidth - window.innerWidth
-
-  const tween = gsap.to(track, {
-    scrollTrigger: {
-      trigger: sectionRef.value,
-      start: 'top top',
-      end: `+=${trackWidth}`,
-      pin: true,
-      scrub,
-      anticipatePin: 1,
-      onUpdate: (self) => {
-        const panels = track.querySelectorAll(':scope > *')
-        if (panels.length > 0) {
-          const index = Math.round(self.progress * (panels.length - 1))
-          emit('panel-change', index)
-        }
-      },
-    },
-    x: -trackWidth,
-    ease: 'none',
-  })
-
-  cleanup = () => tween.kill()
-})
-
-onUnmounted(() => {
-  cleanup?.()
-  cleanup = null
-})
-</script>
-
-<template>
-  <section ref="sectionRef" class="motion-horizontal-scroll h-screen overflow-hidden">
-    <div ref="trackRef" class="h-full flex items-center will-change-transform">
-      <slot />
-    </div>
-  </section>
-</template>

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

@@ -1,75 +0,0 @@
-<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 } = 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/PinnedSection.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-const { duration = 200, scrub = 0.5 } = defineProps<{
-  /**
-   * Pin duration as a percentage of viewport height (200 = 2× viewport height)
-   */
-  duration?: number
-  /**
-   * Scrub smoothness for card reveals
-   */
-  scrub?: number
-}>()
-
-const { gsap, ScrollTrigger } = useGsap()
-
-const sectionRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-
-const cleanups: Array<() => void> = []
-
-onMounted(() => {
-  if (!sectionRef.value || !contentRef.value) return
-
-  const endOffset = (duration * window.innerHeight) / 100
-  const endValue = `+=${endOffset}`
-
-  // Pin the section
-  const pinSt = ScrollTrigger.create({
-    trigger: sectionRef.value,
-    start: 'top top',
-    end: endValue,
-    pin: true,
-    pinSpacing: true,
-  })
-  cleanups.push(() => pinSt.kill())
-
-  // Animate each direct child
-  const items = Array.from(contentRef.value.querySelectorAll(':scope > *'))
-  const total = items.length
-  if (total === 0) return
-
-  items.forEach((item, i) => {
-    gsap.set(item, { opacity: 0, y: 60, scale: 0.9 })
-
-    const startProgress = i / total
-    const endProgress = (i + 0.5) / total
-
-    const tween = gsap.to(item, {
-      scrollTrigger: {
-        trigger: sectionRef.value,
-        start: 'top top',
-        end: endValue,
-        scrub,
-      },
-      keyframes: [
-        { opacity: 0, y: 60, scale: 0.9, duration: startProgress },
-        { opacity: 1, y: 0, scale: 1, duration: endProgress - startProgress },
-        { opacity: 1, y: 0, scale: 1, duration: 1 - endProgress },
-      ],
-      ease: 'none',
-    })
-    cleanups.push(() => tween.kill())
-  })
-})
-
-onUnmounted(() => {
-  cleanups.forEach((fn) => fn())
-  cleanups.length = 0
-})
-</script>
-
-<template>
-  <section ref="sectionRef" class="motion-pinned-section h-screen relative">
-    <div ref="contentRef" class="h-full flex items-center justify-center">
-      <slot />
-    </div>
-  </section>
-</template>

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

@@ -1,49 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
-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))
-</script>
-
-<template>
-  <!-- Linear Progress -->
-  <div v-if="type === 'linear'" class="motion-scroll-progress-linear" v-bind="$attrs">
-    <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 -->
-  <ProgressCircular
-    v-else
-    v-bind="$attrs"
-    :progress="progress"
-    :size
-    :stroke-width="strokeWidth"
-    :show-percentage="showPercentage"
-    :colors
-    :bg-color="bgColor"
-  />
-</template>

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

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import type { ScrollSceneContext } from '../../composables/useScrollSteps'
-import { SCROLL_SCENE_KEY } from '../../composables/useScrollSteps'
-
-const {
-  name,
-  start = 'top top',
-  end = '+=200%',
-  pin = true,
-  scrub = 1,
-  markers = false,
-} = defineProps<{
-  /**
-   * Unique name for this scene (for debugging)
-   */
-  name: string
-  /**
-   * ScrollTrigger start position
-   */
-  start?: string
-  /**
-   * ScrollTrigger end position (e.g. '+=200%' = 2 viewport heights past start)
-   */
-  end?: string
-  /**
-   * Pin the section while scroll advances
-   */
-  pin?: boolean
-  /**
-   * Scrub smoothness: true | number | false
-   */
-  scrub?: boolean | number
-  /**
-   * Show GSAP ScrollTrigger markers (debug)
-   */
-  markers?: boolean
-}>()
-
-const emit = defineEmits<{
-  enter: []
-  leave: []
-  progress: [value: number]
-}>()
-
-const { ScrollTrigger } = useGsap()
-
-const containerRef = ref<HTMLElement | null>(null)
-const progress = ref(0)
-const active = ref(false)
-
-// Step registration
-const registeredSteps = ref(new Set<number>())
-const stepCount = computed(() =>
-  registeredSteps.value.size > 0 ? Math.max(...registeredSteps.value) + 1 : 0
-)
-
-function registerStep(index: number) {
-  registeredSteps.value = new Set([...registeredSteps.value, index])
-}
-
-function unregisterStep(index: number) {
-  const next = new Set(registeredSteps.value)
-  next.delete(index)
-  registeredSteps.value = next
-}
-
-provide<ScrollSceneContext>(SCROLL_SCENE_KEY, {
-  progress,
-  active,
-  name,
-  stepCount,
-  registerStep,
-  unregisterStep,
-})
-
-let st: { kill: () => void } | null = null
-
-onMounted(() => {
-  if (!containerRef.value) return
-
-  st = ScrollTrigger.create({
-    trigger: containerRef.value,
-    start,
-    end,
-    pin,
-    scrub,
-    markers,
-    onUpdate: (self) => {
-      progress.value = self.progress
-      emit('progress', self.progress)
-    },
-    onEnter: () => {
-      active.value = true
-      emit('enter')
-    },
-    onLeave: () => {
-      active.value = false
-      emit('leave')
-    },
-    onEnterBack: () => {
-      active.value = true
-      emit('enter')
-    },
-    onLeaveBack: () => {
-      active.value = false
-      emit('leave')
-    },
-  })
-})
-
-onUnmounted(() => {
-  st?.kill()
-  st = null
-})
-</script>
-
-<template>
-  <div ref="containerRef" class="motion-scroll-scene">
-    <slot :progress="progress" :active="active" />
-  </div>
-</template>

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

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { ScrollSceneContext } from '../../composables/useScrollSteps'
-import { SCROLL_SCENE_KEY } from '../../composables/useScrollSteps'
-
-const { index } = defineProps<{
-  /**
-   * Zero-based step index within the parent MotionScrollScene
-   */
-  index: number
-}>()
-
-const emit = defineEmits<{
-  enter: []
-  leave: []
-}>()
-
-const scene = inject<ScrollSceneContext>(SCROLL_SCENE_KEY)
-
-onMounted(() => scene?.registerStep(index))
-onUnmounted(() => scene?.unregisterStep(index))
-
-const isActive = computed(() => {
-  if (!scene) return index === 0
-  const total = scene.stepCount.value
-  if (total === 0) return false
-  const stepSize = 1 / total
-  const start = index * stepSize
-  const end = (index + 1) * stepSize
-  // Last step stays active at progress === 1
-  return scene.progress.value >= start && (index === total - 1 || scene.progress.value < end)
-})
-
-const wasActive = ref(false)
-watch(isActive, (active) => {
-  if (active && !wasActive.value) emit('enter')
-  else if (!active && wasActive.value) emit('leave')
-  wasActive.value = active
-})
-</script>
-
-<template>
-  <div class="motion-scroll-step" :class="{ 'is-active': isActive }" :data-step="index">
-    <slot :is-active="isActive" />
-  </div>
-</template>

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

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-// Props
-const props = withDefaults(
-  defineProps<{
-    name?: string
-    mode?: 'in-out' | 'out-in' | 'default'
-    duration?: number
-    delay?: number
-    easing?: string
-  }>(),
-  {
-    name: 'fade',
-    mode: 'default',
-    duration: 300,
-    delay: 0,
-    easing: 'ease-out',
-  }
-)
-
-// State
-const isVisible = ref(false)
-const isMounted = ref(false)
-
-// Computed classes
-const transitionClass = computed(() => {
-  return `transition-${props.name}`
-})
-
-const style = computed(() => {
-  return {
-    transitionDuration: `${props.duration}ms`,
-    transitionDelay: `${props.delay}ms`,
-    transitionTimingFunction: props.easing,
-  }
-})
-
-// Lifecycle
-onMounted(() => {
-  isMounted.value = true
-  // Trigger initial animation
-  setTimeout(() => {
-    isVisible.value = true
-  }, 50)
-})
-
-
-</script>
-
-<template>
-  <div class="motion-transition" :class="[transitionClass, { 'is-visible': isVisible }]" :style>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.motion-transition {
-  opacity: 0;
-  transition-property: all;
-}
-
-.motion-transition.is-visible {
-  opacity: 1;
-}
-
-.transition-fade {
-  transition-property: opacity;
-}
-
-.transition-slide {
-  transition-property: transform, opacity;
-}
-
-.transition-scale {
-  transition-property: transform, opacity;
-}
-</style>