src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts

@@ -0,0 +1,32 @@
+import Lenis from 'lenis';
+import {
+    getContext,
+    setContext,
+} from 'svelte';
+
+const LENIS_KEY = Symbol('lenis');
+
+export function createLenisContext() {
+    let lenis = $state<Lenis | null>(null);
+
+    return {
+        get lenis() {
+            return lenis;
+        },
+        setLenis(instance: Lenis) {
+            lenis = instance;
+        },
+        destroyLenis() {
+            lenis?.destroy();
+            lenis = null;
+        },
+    };
+}
+
+export function setLenisContext(context: ReturnType<typeof createLenisContext>) {
+    setContext(LENIS_KEY, context);
+}
+
+export function getLenisContext() {
+    return getContext<ReturnType<typeof createLenisContext>>(LENIS_KEY);
+}

src/shared/lib/helpers/index.ts

@@ -42,3 +42,9 @@ export {
     type ResponsiveManager,
     responsiveManager,
 } from './createResponsiveManager/createResponsiveManager.svelte';
+
+export {
+    createLenisContext,
+    getLenisContext,
+    setLenisContext,
+} from './createScrollContext/createScrollContext.svelte';

src/shared/ui/SmoothScroll/SmoothScroll.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+import {
+    createLenisContext,
+    setLenisContext,
+} from '$shared/lib';
+import Lenis from 'lenis';
+import type { LenisOptions } from 'lenis';
+import { onMount } from 'svelte';
+
+interface Props {
+    children?: import('svelte').Snippet;
+    // Lenis options - all optional with sensible defaults
+    duration?: number;
+    easing?: (t: number) => number;
+    smoothWheel?: boolean;
+    wheelMultiplier?: number;
+    touchMultiplier?: number;
+    infinite?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    gestureOrientation?: 'vertical' | 'horizontal' | 'both';
+}
+
+let {
+    children,
+    duration = 1.2,
+    easing = t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+    smoothWheel = true,
+    wheelMultiplier = 1,
+    touchMultiplier = 2,
+    infinite = false,
+    orientation = 'vertical',
+    gestureOrientation = 'vertical',
+}: Props = $props();
+
+const lenisContext = createLenisContext();
+setLenisContext(lenisContext);
+
+onMount(() => {
+    const lenisOptions: LenisOptions = {
+        duration,
+        easing,
+        smoothWheel,
+        wheelMultiplier,
+        touchMultiplier,
+        infinite,
+        orientation,
+        gestureOrientation,
+        // Prevent jitter with virtual scroll
+        prevent: (node: HTMLElement) => {
+            // Don't smooth scroll inside elements with data-lenis-prevent
+            return node.hasAttribute('data-lenis-prevent');
+        },
+    };
+
+    const lenis = new Lenis(lenisOptions);
+
+    lenisContext.setLenis(lenis);
+
+    // RAF loop
+    function raf(time: number) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    // Expose to window for debugging (only in dev)
+    if (import.meta.env?.DEV) {
+        (window as any).lenis = lenis;
+    }
+
+    return () => {
+        lenisContext.destroyLenis();
+    };
+});
+</script>
+
+{@render children?.()}