kmcom-nuxt-layers 1.6.40 → 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/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 }
+}

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

@@ -0,0 +1,25 @@
+import type { MaybeRef } from 'vue'
+
+export function useCursorFollower(opts: { smoothing?: MaybeRef<number> } = {}) {
+  const { gsap } = useGsap()
+  const { x: mouseX, y: mouseY } = useMouse({ type: 'client' })
+
+  const x = ref(0)
+  const y = ref(0)
+
+  function tick() {
+    const factor = unref(opts.smoothing) ?? 0.15
+    x.value += (mouseX.value - x.value) * factor
+    y.value += (mouseY.value - y.value) * factor
+  }
+
+  onMounted(() => {
+    x.value = mouseX.value
+    y.value = mouseY.value
+    gsap.ticker.add(tick)
+  })
+
+  onUnmounted(() => gsap.ticker.remove(tick))
+
+  return { x, y }
+}

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

@@ -0,0 +1,56 @@
+export function useMagneticElement(
+  elementRef: Ref<HTMLElement | null>,
+  opts: {
+    strength?: number
+    radius?: number
+    damping?: number
+    stiffness?: number
+  } = {},
+) {
+  const { gsap } = useGsap()
+  const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(elementRef)
+
+  const currentX = ref(0)
+  const currentY = ref(0)
+  const isActive = ref(false)
+
+  function tick() {
+    const strength = opts.strength ?? 0.3
+    const radius = opts.radius ?? 100
+    const damping = (opts.damping ?? 30) / 1000
+    const stiffness = (opts.stiffness ?? 300) / 1000
+
+    const dx = elementX.value - elementWidth.value / 2
+    const dy = elementY.value - elementHeight.value / 2
+    const dist = Math.sqrt(dx * dx + dy * dy)
+
+    let targetX = 0
+    let targetY = 0
+
+    if (dist < radius) {
+      isActive.value = true
+      targetX = dx * strength
+      targetY = dy * strength
+    } else {
+      isActive.value = false
+    }
+
+    currentX.value += (targetX - currentX.value) * stiffness
+    currentX.value *= 1 - damping
+    currentY.value += (targetY - currentY.value) * stiffness
+    currentY.value *= 1 - damping
+
+    if (elementRef.value) {
+      gsap.set(elementRef.value, { x: currentX.value, y: currentY.value })
+    }
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+
+  onUnmounted(() => {
+    gsap.ticker.remove(tick)
+    if (elementRef.value) gsap.set(elementRef.value, { x: 0, y: 0 })
+  })
+
+  return { isActive }
+}

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

@@ -23,12 +23,19 @@ interface ScrollToOptions {
  */
 export function useSmoothScroll() {
   const nuxtApp = useNuxtApp()
+  const appConfig = useAppConfig()
 
   // Get the Locomotive Scroll instance from the reactive ref provided by the plugin
   const locomotiveScroll = computed<LocomotiveScroll | undefined>(
     () => (nuxtApp.$locomotiveScroll as Ref<LocomotiveScroll | null>)?.value ?? undefined
   )
 
+  // true if smooth scroll is configured to run (globally or per-route)
+  const isEnabled = computed(() => (appConfig.motion?.smoothScroll ?? true) !== false)
+
+  // true once the LocomotiveScroll instance is actually initialised on this route
+  const isReady = computed(() => locomotiveScroll.value != null)
+
   // Reactive scroll state from the plugin
   const scrollState = computed(
     () =>
@@ -110,6 +117,10 @@ export function useSmoothScroll() {
     // Locomotive Scroll instance
     locomotiveScroll,
 
+    // Scroll availability
+    isEnabled,
+    isReady,
+
     // Reactive scroll state
     scrollY,
     velocity,

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

@@ -0,0 +1,58 @@
+export function useTiltEffect(
+  elementRef: Ref<HTMLElement | null>,
+  opts: {
+    maxTilt?: number
+    perspective?: number
+    damping?: number
+    stiffness?: number
+  } = {},
+) {
+  const { gsap } = useGsap()
+  const { elementX, elementY, elementWidth, elementHeight, isOutside } =
+    useMouseInElement(elementRef)
+
+  const currentRotateX = ref(0)
+  const currentRotateY = ref(0)
+
+  function tick() {
+    const maxTilt = opts.maxTilt ?? 15
+    const perspective = opts.perspective ?? 800
+    const damping = (opts.damping ?? 40) / 1000
+    const stiffness = (opts.stiffness ?? 250) / 1000
+
+    const width = elementWidth.value || 1
+    const height = elementHeight.value || 1
+
+    let targetRotateX = 0
+    let targetRotateY = 0
+
+    if (!isOutside.value) {
+      const nx = (elementX.value / width) * 2 - 1
+      const ny = (elementY.value / height) * 2 - 1
+      targetRotateY = nx * maxTilt
+      targetRotateX = -ny * maxTilt
+    }
+
+    currentRotateX.value += (targetRotateX - currentRotateX.value) * stiffness
+    currentRotateX.value *= 1 - damping
+    currentRotateY.value += (targetRotateY - currentRotateY.value) * stiffness
+    currentRotateY.value *= 1 - damping
+
+    if (elementRef.value) {
+      gsap.set(elementRef.value, {
+        rotateX: currentRotateX.value,
+        rotateY: currentRotateY.value,
+        transformPerspective: perspective,
+      })
+    }
+  }
+
+  onMounted(() => gsap.ticker.add(tick))
+
+  onUnmounted(() => {
+    gsap.ticker.remove(tick)
+    if (elementRef.value) gsap.set(elementRef.value, { rotateX: 0, rotateY: 0 })
+  })
+
+  return { rotateX: currentRotateX, rotateY: currentRotateY }
+}

package/layers/motion/app/plugins/locomotive-scroll.client.ts

@@ -45,7 +45,7 @@ export default defineNuxtPlugin(() => {
   }
 
   const router = useRouter()
-  const appConfig = useAppConfig() as any
+  const appConfig = useAppConfig()
   const smoothScroll: boolean | string[] = appConfig.motion?.smoothScroll ?? true
 
   if (smoothScroll === true) {

package/layers/motion/app/types/app-config.d.ts

@@ -1,7 +1,16 @@
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    motionLayer?: {
-      name?: string
+    motion?: {
+      smoothScroll?: boolean | string[]
+      gsapScrollTrigger?: boolean
+      lenis?: {
+        duration?: number
+        orientation?: 'vertical' | 'horizontal'
+        gestureOrientation?: 'vertical' | 'horizontal'
+        smoothWheel?: boolean
+        smoothTouch?: boolean
+        touchMultiplier?: number
+      }
     }
   }
 }

package/layers/routing/app/middleware/02.governance.global.ts

@@ -1,27 +1,16 @@
 import { useFeatures } from '../composables/useFeatures'
+import { resolveRoute } from '../utils/resolveRoute'
 
 export default defineNuxtRouteMiddleware((to) => {
-  const { config, isStrictMode, isLayerDefaultDeny } = useRoutingConfig()
+  const { config } = useRoutingConfig()
   const { resolve } = useFeatures()
-  const meta = to.meta
 
-  if (config.debug) console.log('[routing] governance check', to.path, meta)
+  if (config.debug) console.log('[routing] governance check', to.path, to.meta)
 
-  // strict default-deny: every route must declare a feature
-  if (isStrictMode() && !meta.feature) {
-    throw createError({ statusCode: 404 })
-  }
+  const resolution = resolveRoute(to.meta, config, resolve)
 
-  // layer default-deny: layer routes must declare a feature
-  if (isLayerDefaultDeny() && meta.__fromLayer && !meta.feature) {
-    throw createError({ statusCode: 404 })
-  }
+  if (config.debug) console.log('[routing] resolution', resolution)
 
-  if (!meta.feature) return
-
-  const variant = resolve(meta.feature)
-  if (config.debug) console.log(`[routing] feature "${meta.feature}" resolved to "${variant}"`)
-
-  if (variant === 'disabled') throw createError({ statusCode: 404 })
-  if (variant === 'beta' || variant === 'coming-soon') return navigateTo('/coming-soon')
+  if (resolution.outcome === 'deny') throw createError({ statusCode: 404 })
+  if (resolution.outcome === 'redirect') return navigateTo(resolution.to)
 })

package/layers/routing/app/types/routing.ts

@@ -1,10 +1,16 @@
 export type FeatureValue = 'enabled' | 'disabled' | 'beta' | 'coming-soon'
 export type RoutingPreset = 'simple' | 'marketing' | 'product' | 'enterprise'
 
+export type RouteResolution =
+  | { outcome: 'allow' }
+  | { outcome: 'deny' }
+  | { outcome: 'redirect'; to: string }
+
 export interface RoutingLayerConfig {
   preset: RoutingPreset
   strictDefaultDeny: boolean
   layerDefaultDeny: boolean
+  betaRedirect: string
   runtimeFlags: boolean
   debug: boolean
   maintenance: { enabled: boolean; allowRoutes: string[] }
@@ -16,6 +22,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   simple: {
     strictDefaultDeny: false,
     layerDefaultDeny: false,
+    betaRedirect: '/coming-soon',
     runtimeFlags: false,
     debug: false,
     maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
@@ -24,6 +31,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   marketing: {
     strictDefaultDeny: false,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: false,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
@@ -32,6 +40,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   product: {
     strictDefaultDeny: false,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: true,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
@@ -40,6 +49,7 @@ export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'pr
   enterprise: {
     strictDefaultDeny: true,
     layerDefaultDeny: true,
+    betaRedirect: '/coming-soon',
     runtimeFlags: true,
     debug: false,
     maintenance: { enabled: true, allowRoutes: ['/maintenance'] },

package/layers/routing/app/utils/resolveRoute.ts

@@ -0,0 +1,31 @@
+import type { FeatureValue, RouteResolution, RoutingLayerConfig } from '../types/routing'
+
+interface RouteMeta {
+  feature?: string
+  __fromLayer?: boolean
+}
+
+export function resolveRoute(
+  meta: RouteMeta,
+  config: RoutingLayerConfig,
+  resolveFeature: (name: string) => FeatureValue,
+): RouteResolution {
+  if (config.strictDefaultDeny && !meta.feature) {
+    return { outcome: 'deny' }
+  }
+
+  if (config.layerDefaultDeny && meta.__fromLayer && !meta.feature) {
+    return { outcome: 'deny' }
+  }
+
+  if (!meta.feature) return { outcome: 'allow' }
+
+  const variant = resolveFeature(meta.feature)
+
+  if (variant === 'disabled') return { outcome: 'deny' }
+  if (variant === 'beta' || variant === 'coming-soon') {
+    return { outcome: 'redirect', to: config.betaRedirect }
+  }
+
+  return { outcome: 'allow' }
+}

package/layers/shader/package.json

@@ -15,6 +15,7 @@
     "three": "^0.182.0"
   },
   "devDependencies": {
-    "@types/three": "^0.182.0"
+    "@types/three": "^0.184.0",
+    "vite": "^7.0.0"
   }
 }

package/layers/theme/app/composables/useAccentColor.ts

@@ -1,11 +1,10 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage } from '@vueuse/core'
 import type { AccentColor } from '#layers/theme/app/types/theme'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()
 
-  const defaultAccent = ((appConfig as any).themeLayer?.defaultAccent ?? 'blue') as AccentColor
+  const defaultAccent = (appConfig.themeLayer?.defaultAccent ?? 'blue') as AccentColor
   const accent = useLocalStorage<AccentColor>('theme-colour', defaultAccent)
 
   const pageAccent = ref<AccentColor | null>(null)
@@ -19,16 +18,6 @@ export const useAccentColor = createSharedComposable(() => {
     pageAccent.value = color
   }
 
-  if (import.meta.client) {
-    watch(
-      activeAccent,
-      (color) => {
-        document.documentElement.setAttribute('data-theme-colour', color)
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     accent: readonly(accent),
     setAccent,

package/layers/theme/app/composables/useThemeContrast.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage, usePreferredContrast } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
@@ -16,16 +15,6 @@ export const useThemeContrast = createSharedComposable(() => {
     contrastOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveHighContrast,
-      (high) => {
-        document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     contrastOverride: readonly(contrastOverride),
     setContrastOverride,

package/layers/theme/app/composables/useThemeMotion.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { createSharedComposable, useLocalStorage, usePreferredReducedMotion } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
@@ -16,16 +15,6 @@ export const useThemeMotion = createSharedComposable(() => {
     motionOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveReducedMotion,
-      (reduced) => {
-        document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     motionOverride: readonly(motionOverride),
     setMotionOverride,

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   createSharedComposable,
   useLocalStorage,
@@ -20,19 +19,6 @@ export const useThemeTransparency = createSharedComposable(() => {
     transparencyOverride.value = value
   }
 
-  if (import.meta.client) {
-    watch(
-      effectiveReducedTransparency,
-      (reduced) => {
-        document.documentElement.setAttribute(
-          'data-theme-transparency',
-          reduced ? 'reduced' : 'full'
-        )
-      },
-      { immediate: true }
-    )
-  }
-
   return {
     transparencyOverride: readonly(transparencyOverride),
     setTransparencyOverride,