legacy motion

package.json

@@ -74,7 +74,8 @@
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",
         "melt": "^0.29.2",
-        "motion": "^10.18.0",
+        "motion": "^12.7.3",
+        "motion-legacy": "npm:motion@^10.18.0",
         "node-appwrite": "^15.0.1",
         "node-fetch": "^3.3.2",
         "node-html-parser": "^6.1.13",

src/lib/actions/animate-in-view.ts

@@ -1,4 +1,4 @@
-import { inView, type InViewOptions } from 'motion';
+import { inView, type InViewOptions } from 'motion-legacy';
 import { writable } from 'svelte/store';
 
 export const useAnimateInView = ({ options }: { options?: InViewOptions }) => {

src/lib/actions/mouse-position.ts

@@ -1,4 +1,4 @@
-import { inView } from 'motion';
+import { inView } from 'motion-legacy';
 import { type Writable, writable } from 'svelte/store';
 
 export const useMousePosition = () => {

src/lib/animations/OpenSource.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { toScale, type Scale } from '$lib/utils/toScale';
-    import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
+    import { spring, type AnimationListOptions, type SpringOptions } from 'motion-legacy';
     import { animation, createScrollHandler, scroll, type Animation } from '.';
     import { SOCIAL_STATS } from '$lib/constants';
 

src/lib/animations/Products/post/index.ts

@@ -1,6 +1,6 @@
 import { safeAnimate } from '$lib/animations';
 import { createResettable } from '$lib/utils/resettable';
-import { animate } from 'motion';
+import { animate } from 'motion-legacy';
 import { getElSelector } from '../Products.svelte';
 
 const requests = createResettable(0);

src/lib/animations/Products/realtime/index.ts

@@ -3,7 +3,7 @@ import Phone from './phone.svelte';
 import { safeAnimate, sleep } from '$lib/animations';
 import { createResettable } from '$lib/utils/resettable';
 import { getElSelector } from '../Products.svelte';
-import { animate } from 'motion';
+import { animate } from 'motion-legacy';
 
 type Task = {
     title: string;

src/lib/animations/index.ts

@@ -5,7 +5,7 @@ import {
     type MotionKeyframesDefinition,
     type AnimationOptionsWithOverrides,
     animate
-} from 'motion';
+} from 'motion-legacy';
 
 export function animation(
     elementOrSelector: ElementOrSelector,

src/lib/experiments.ts

@@ -1,34 +0,0 @@
-import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
-import { PostHog } from 'posthog-node';
-
-export const posthogServerClient = PUBLIC_POSTHOG_API_KEY
-    ? new PostHog(PUBLIC_POSTHOG_API_KEY, {
-          host: 'https://eu.i.posthog.com',
-          persistence: 'memory'
-      })
-    : null;
-
-export const experiments = {
-    'sticky-navigation_ab-test': ['control', 'sticky-nav'],
-    'cta-copy_ab-test': ['control', 'start-for-free_variant', 'start-building_variant']
-} as const;
-
-type Key = keyof typeof experiments;
-
-export const isFlagEqualTo = <K extends Key>(
-    variant: (typeof experiments)[K][number],
-    currentVariant?: string | boolean
-) => {
-    return currentVariant === variant;
-};
-
-export const getFeatureFlag = async <K extends Key>(
-    key: Key,
-    variant: (typeof experiments)[K][number],
-    distinctId: string
-) => {
-    /* experiments won't work on previews or on local if api key is not available */
-    const flagData = (await posthogServerClient?.getFeatureFlag(key, distinctId)) ?? false;
-
-    return isFlagEqualTo(variant, flagData);
-};

src/routes/(experiments)/new-homepage/(components)/scale.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { classNames } from '$lib/utils/classnames';
     import NumberFlow from '@number-flow/svelte';
-    import { inView } from 'motion';
+    import { inView } from 'motion-legacy';
     import { onDestroy } from 'svelte';
 
     const animationDuration = 3;

src/routes/(init)/init/(components)/lockup.svelte

@@ -5,13 +5,13 @@
         class?: string;
     }
 
-    let { class: classes = '' }: Props = $props();
+    const { class: className = '' }: Props = $props();
 </script>
 
 <svg
     viewBox="0 0 750 420"
     fill="none"
-    class={classNames('lockup mx-auto w-full overflow-hidden', classes)}
+    class={classNames('lockup mx-auto w-full overflow-hidden', className)}
 >
     <g class="background-layer">
         <path
@@ -19,6 +19,7 @@
             fill="#000"
             stroke="url(#e)"
             stroke-dasharray="4 4"
+            class="bg"
         />
     </g>
     <g class="bottom-layer" filter="url(#k)">
@@ -542,18 +543,9 @@
         --duration: 0.75s;
         --delay: 1s;
 
-        @keyframes background-layer {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-
         .background-layer {
             opacity: 0;
-            animation: background-layer var(--duration) ease-in-out forwards 2.75s;
+            animation: fade-in var(--duration) ease-in-out forwards 2.75s;
         }
 
         @keyframes grid-lines {

src/routes/+layout.server.ts

@@ -1,42 +0,0 @@
-import crypto from 'node:crypto';
-import { dev as isDevEnv } from '$app/environment';
-
-import { posthogServerClient } from '$lib/experiments';
-import { getAllChangelogEntries } from './changelog/utils';
-
-export const trailingSlash = 'never';
-
-const generateDistinctId = (fingerprintData: Record<string, string>) => {
-    return crypto.createHash('sha256').update(JSON.stringify(fingerprintData)).digest('hex');
-};
-
-export const load = async ({ request, getClientAddress }) => {
-    // use dummy IP in dev to avoid warnings — its harmless.
-    const clientAddress = isDevEnv ? '127.0.0.1' : getClientAddress();
-
-    const headers = Object.fromEntries(request.headers);
-    const fingerprintData = {
-        ip: clientAddress,
-        userAgent: headers['user-agent'],
-        acceptLanguage: headers['accept-language'],
-        platform: headers['sec-ch-ua-platform'],
-        mobile: headers['sec-ch-ua-mobile'],
-        browserBrand: headers['sec-ch-ua']
-    };
-
-    const distinctId = generateDistinctId(fingerprintData);
-    const ctaVariant = await posthogServerClient?.getFeatureFlag('cta-copy_ab-test', distinctId);
-
-    const ctaCopy =
-        ctaVariant === 'start-building_variant'
-            ? 'Start building'
-            : ctaVariant === 'start-for-free_variant'
-              ? 'Start for free'
-              : 'Get started';
-
-    return {
-        ctaCopy,
-        distinctId,
-        changelogEntries: (await getAllChangelogEntries()).length
-    };
-};

src/routes/+layout.ts

@@ -1,17 +1,10 @@
-import { browser } from '$app/environment';
-import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
-import posthog from 'posthog-js';
 
-export const load = async ({ data }) => {
+import { getAllChangelogEntries } from './changelog/utils';
-    if (browser && PUBLIC_POSTHOG_API_KEY) {
-        posthog.init(PUBLIC_POSTHOG_API_KEY, {
-            api_host: 'https://eu.i.posthog.com',
-            persistence: 'memory',
-            bootstrap: {
-                distinctID: data.distinctId
-            }
-        });
-    }
 
-    return data;
+export const trailingSlash = 'never';
+
+export const load = async () => {
+    return {
+        changelogEntries: (await getAllChangelogEntries()).length
+    };
 };

src/routes/+page.ts

@@ -1,5 +0,0 @@
-import type { Load } from '@sveltejs/kit';
-
-export const load: Load = async ({ data }) => {
-    return data;
-};

src/routes/partners/(components)/partners.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { classNames } from '$lib/utils/classnames';
-    import { inView } from 'motion';
+    import { inView } from 'motion-legacy';
 
     import Platinum from '../(assets)/icons/platinum.png';
     import Gold from '../(assets)/icons/gold.png';

src/routes/partners/(components)/why.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import GradientBorderCard from '$lib/components/shared/gradient-border-card.svelte';
-    import { inView } from 'motion';
+    import { inView } from 'motion-legacy';
     import NumberFlow from '@number-flow/svelte';
 
     let items: Array<{ number: number; label: string; suffix?: string }> = [

src/routes/products/messaging/(components)/Draft.svelte

@@ -2,7 +2,7 @@
     import Step from './Step.svelte';
     import Marker from '../(assets)/marker.svg';
     import MarkerActive from '../(assets)/marker-active.svg';
-    import { inView } from 'motion';
+    import { inView } from 'motion-legacy';
     import { onMount } from 'svelte';
     import { sleep, write } from '$lib/animations';
 

src/routes/products/messaging/(components)/Target.svelte

@@ -8,7 +8,7 @@
     import { dequal } from 'dequal/lite';
     import Step from './Step.svelte';
     import { onMount } from 'svelte';
-    import { inView } from 'motion';
+    import { inView } from 'motion-legacy';
     import { sleep } from '$lib/animations';
     import { Button } from '$lib/components/ui';