kmcom-nuxt-layers 1.7.8 → 2.1.6

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

@@ -0,0 +1,76 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<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 = useTemplateRef<HTMLElement | null>('containerRef')
+  const contentRef = useTemplateRef<HTMLElement | null>('contentRef')
+
+  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/scroll/app/components/Motion/PinnedSection.vue

@@ -0,0 +1,77 @@
+<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 = useTemplateRef<HTMLElement | null>(null)
+  const contentRef = useTemplateRef<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/scroll/app/components/Motion/ScrollLink.vue

@@ -0,0 +1,50 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<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/scroll/app/components/Motion/ScrollProgress.vue

@@ -0,0 +1,85 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<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
+    :size
+    :stroke-width
+    :show-percentage
+    :colors
+    :bg-color
+  />
+</template>

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

@@ -0,0 +1,121 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<script setup lang="ts">
+  import { SCROLL_SCENE_KEY, type ScrollSceneContext } 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 = useTemplateRef<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 :active />
+  </div>
+</template>

package/layers/{motion → scroll}/app/components/Motion/ScrollStats.vue

@@ -1,55 +1,56 @@
+<!-- eslint-disable vue/define-props-destructuring -->
 <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 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 { velocity, progress, direction, scrollY } = useSmoothScroll()
 
-const isScrolling = computed(() => Math.abs(velocity.value) > 0.01)
+  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 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'
-})
+  const directionLabel = computed(() => {
+    if (direction.value > 0) return 'DOWN'
+    if (direction.value < 0) return 'UP'
+    return 'IDLE'
+  })
 </script>
 
 <template>
@@ -96,7 +97,7 @@ const directionLabel = computed(() => {
 </template>
 
 <style scoped>
-.tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
 </style>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { SCROLL_SCENE_KEY, type ScrollSceneContext } 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 />
+  </div>
+</template>

package/layers/{motion → scroll}/app/composables/useGsap.ts

@@ -7,12 +7,6 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
  *
  * @example
  * const { gsap, ScrollTrigger } = useGsap()
- *
- * gsap.to('.element', {
- *   scrollTrigger: { trigger: '.element', start: 'top center' },
- *   opacity: 1,
- *   y: 0,
- * })
  */
 export function useGsap() {
   return { gsap, ScrollTrigger }

package/layers/{motion → scroll}/app/composables/useScrollSteps.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, Ref } from 'vue'
 
 export const SCROLL_SCENE_KEY = Symbol('motionScrollScene')
 
-export interface ScrollSceneContext {
+export type ScrollSceneContext = {
   progress: Ref<number>
   active: Ref<boolean>
   name: string
@@ -16,16 +16,13 @@ export interface ScrollSceneContext {
  *
  * @example
  * const { currentStep, isActive, stepProgress } = useScrollSteps(3)
- * // currentStep: 0 | 1 | 2 based on scene progress
  */
 export function useScrollSteps(total: number) {
   const scene = inject<ScrollSceneContext>(SCROLL_SCENE_KEY)
 
   const sceneProgress = computed(() => scene?.progress.value ?? 0)
 
-  const currentStep = computed(() =>
-    Math.min(Math.floor(sceneProgress.value * total), total - 1)
-  )
+  const currentStep = computed(() => Math.min(Math.floor(sceneProgress.value * total), total - 1))
 
   function isActive(index: number): boolean {
     return currentStep.value === index

package/layers/{motion → scroll}/app/composables/useSectionProgress.ts

@@ -1,6 +1,6 @@
 import type { MaybeRef } from 'vue'
 
-interface SectionProgressOptions {
+type SectionProgressOptions = {
   start?: string
   end?: string
   markers?: boolean
@@ -10,8 +10,7 @@ interface SectionProgressOptions {
  * Section-local scroll progress (0–1) scoped to a given element.
  *
  * @example
- * const sectionRef = ref<HTMLElement | null>(null)
- * const { progress, active, entering, leaving } = useSectionProgress(sectionRef, {
+ * const { progress, active } = useSectionProgress(sectionRef, {
  *   start: 'top top',
  *   end: '+=200%',
  * })
@@ -42,10 +41,18 @@ export function useSectionProgress(
       onUpdate: (self) => {
         progress.value = self.progress
       },
-      onEnter: () => { active.value = true },
-      onLeave: () => { active.value = false },
-      onEnterBack: () => { active.value = true },
-      onLeaveBack: () => { active.value = false },
+      onEnter: () => {
+        active.value = true
+      },
+      onLeave: () => {
+        active.value = false
+      },
+      onEnterBack: () => {
+        active.value = true
+      },
+      onLeaveBack: () => {
+        active.value = false
+      },
     })
   })