Homepage 2025

package.json

@@ -24,9 +24,8 @@
         "optimize": "node ./scripts/optimize-assets.js",
         "optimize:all": "node ./scripts/optimize-all.js"
     },
-    "packageManager": "pnpm@10.8.1",
+    "packageManager": "pnpm@10.9.0",
     "dependencies": {
-        "@number-flow/svelte": "^0.3.3",
         "h3": "^1.14.0",
         "posthog-js": "^1.210.2",
         "sharp": "^0.33.5"
@@ -42,17 +41,20 @@
         "@internationalized/date": "3.5.0",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.5",
+        "@number-flow/svelte": "^0.3.7",
         "@playwright/test": "^1.50.0",
         "@sveltejs/adapter-node": "^5.2.12",
         "@sveltejs/enhanced-img": "^0.4.4",
         "@sveltejs/kit": "^2.20.2",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/postcss": "^4.1.2",
+        "@tailwindcss/postcss": "^4.1.4",
+        "@turf/boolean-point-in-polygon": "^7.2.0",
         "@types/compression": "^1.7.5",
         "@types/glob": "^8.1.0",
         "@types/jsdom": "^21.1.7",
         "@types/markdown-it": "^13.0.9",
         "@types/morgan": "^1.9.9",
+        "@types/proj4": "^2.5.6",
         "analytics": "^0.8.16",
         "appwrite": "^17.0.1",
         "bits-ui": "^1.3.19",
@@ -74,9 +76,8 @@
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",
         "melt": "^0.29.2",
-        "motion": "^12.7.3",
-        "motion-legacy": "npm:motion@^10.18.0",
-        "node-appwrite": "^15.0.1",
+        "motion": "^12.7.4",
+        "node-appwrite": "^16.0.0",
         "node-fetch": "^3.3.2",
         "node-html-parser": "^6.1.13",
         "openapi-types": "^12.1.3",
@@ -88,16 +89,18 @@
         "prettier": "^3.4.2",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
+        "proj4": "^2.17.0",
         "remeda": "^2.20.0",
         "reodotdev": "^1.0.0",
         "sass": "^1.83.4",
         "svelte": "^5.25.6",
         "svelte-check": "^4.0.0",
         "svelte-markdoc-preprocess": "3.0.0",
         "svelte-markdown": "^0.4.1",
+        "svg-dotted-map": "^2.0.1",
         "svgtofont": "^4.2.3",
         "tailwind-merge": "^3.0.2",
-        "tailwindcss": "^4.1.2",
+        "tailwindcss": "^4.1.4",
         "tslib": "^2.8.1",
         "typescript": "^5.8.2",
         "typescript-eslint": "^8.21.0",

src/app.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 @import './styles/typography.css';
-@variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
     /* Colors */
@@ -38,33 +38,33 @@
 
     /* mint */
     --color-mint-200: hsl(var(--color-mint-hue) 56% 88%);
-    --color-mint-500: hsl(calc(var(--color-mint-hue) + 1), 54%, 69%);
-    --color-mint-700: hsl(calc(var(--color-mint-hue) + 2), 24%, 41%);
+    --color-mint-500: hsl(calc(var(--color-mint-hue) + 1) 54% 69%);
+    --color-mint-700: hsl(calc(var(--color-mint-hue) + 2) 24% 41%);
 
     /* purple */
     --color-purple-200: hsl(var(--color-purple-hue) 100% 88%);
-    --color-purple-500: hsl(calc(var(--color-purple-hue) - 1), 99%, 70%);
-    --color-purple-700: hsl(calc(var(--color-purple-hue) - 1), 42%, 42%);
+    --color-purple-500: hsl(calc(var(--color-purple-hue) - 1) 99% 70%);
+    --color-purple-700: hsl(calc(var(--color-purple-hue) - 1) 42% 42%);
 
     /* yellow */
     --color-yellow-200: hsl(var(--color-yellow-hue) 100% 88%);
     --color-yellow-500: hsl(var(--color-yellow-hue) 99% 70%);
-    --color-yellow-700: hsl(calc(var(--color-yellow-hue) + 1), 42%, 42%);
+    --color-yellow-700: hsl(calc(var(--color-yellow-hue) + 1) 42% 42%);
 
     /* blue */
     --color-blue-200: hsl(var(--color-blue-hue) 100% 88%);
-    --color-blue-500: hsl(calc(var(--color-blue-hue) - 1), 99%, 70%);
-    --color-blue-700: hsl(calc(var(--color-blue-hue) - 1), 42%, 42%);
+    --color-blue-500: hsl(calc(var(--color-blue-hue) - 1) 99% 70%);
+    --color-blue-700: hsl(calc(var(--color-blue-hue) - 1) 42% 42%);
 
     /* green */
     --color-green-700: #0a714f;
 
     /* secondary */
     --color-secondary-100: hsl(var(--color-secondary-hue) 99% 66%);
-    --color-accent-200: hsl(var(--color-secondary-hue), 78%, 60%, 0.32);
+    --color-accent-200: hsl(var(--color-secondary-hue) 78% 60% / 0.32);
 
     /* greyscale */
-    --color-offset: hsl(var(--color-greyscale-hue) 2%, 11%, 0.94);
+    --color-offset: hsl(var(--color-greyscale-hue) 2% 11% / 0.94);
     --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
     --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
     --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
@@ -86,6 +86,7 @@
 
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-scale-out: scale-out 200ms ease-out forwards;
     --animate-caret-blink: caret-blink 1s ease-in-out infinite;
     --animate-enter:
         fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both;
@@ -94,18 +95,31 @@
     --animate-scroll-y: scroll-y 60s linear infinite forwards;
 
     --animate-fade-in: fade-in 0.5s ease-in-out both;
-    --animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards);
+    --animate-fade-out: fade-out 0.5s ease-in-out both;
     --animate-lighting: lighting 1.25s ease-out forwards;
     --animate-menu-in: menu-in 0.25s ease-out forwards;
     --animate-menu-out: menu-out 0.25s ease-out forwards;
+    --animate-enter-from-left: enter-from-left 0.2s ease;
+    --animate-enter-from-right: enter-from-right 0.2s ease;
+    --animate-exit-to-left: exit-to-left 0.2s ease;
+    --animate-exit-to-right: exit-to-right 0.2s ease;
 
     /* Keyframes */
     @keyframes scale-in {
         0% {
-            transform: scale(0);
+            transform: rotateX(-10deg) scale(0.9);
         }
         100% {
-            transform: scale(1);
+            transform: rotateX(0) scale(1);
+        }
+    }
+
+    @keyframes scale-out {
+        0% {
+            transform: rotateX(0) scale(1);
+        }
+        100% {
+            transform: rotateX(-10deg) scale(0.9);
         }
     }
 
@@ -132,7 +146,7 @@
 
     @keyframes up {
         0% {
-            transform: translateY(8px);
+            transform: translateY(36px);
         }
         100% {
             transform: translateY(0px);
@@ -148,7 +162,16 @@
         }
     }
 
-    @keyframes scroll {
+    @keyframes fade-out {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+
+    @keyframes scroll-deprecate {
         0% {
             transform: translateX(0);
         }
@@ -157,9 +180,15 @@
         }
     }
 
-    @keyframes marquee {
+    @keyframes scroll-x {
+        to {
+            transform: translateX(-100%);
+        }
+    }
+
+    @keyframes scroll-y {
         to {
-            transform: translateX(-50%);
+            transform: translateY(-50%);
         }
     }
 
@@ -202,15 +231,47 @@
         }
     }
 
-    @keyframes scroll-x {
+    @keyframes enter-from-right {
+        from {
+            opacity: 0;
+            transform: translateX(200px);
+        }
         to {
-            transform: translateX(-100%);
+            opacity: 1;
+            transform: translateX(0);
         }
     }
 
-    @keyframes scroll-y {
+    @keyframes enter-from-left {
+        from {
+            opacity: 0;
+            transform: translateX(-200px);
+        }
         to {
-            transform: translateY(-50%);
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes exit-to-right {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(200px);
+        }
+    }
+
+    @keyframes exit-to-left {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(-200px);
         }
     }
 
@@ -224,10 +285,10 @@
     /* Font sizes */
     --text-x-micro: 0.625rem;
     --text-x-micro--line-height: 0.875rem;
-    --text-x-micro--letter-spacing: var(--tracking-loose);
+    --text-x-micro--letter-spacing: var(--tracking-tighter);
     --text-micro: 0.75rem;
     --text-micro--line-height: 1rem;
-    --text-micro--letter-spacing: var(--tracking-loose);
+    --text-micro--letter-spacing: var(--tracking-tighter);
     --text-caption: 0.875rem;
     --text-caption--line-height: 1.375rem;
     --text-caption--letter-spacing: var(--tracking-tight);
@@ -251,9 +312,15 @@
     --text-title: clamp(2rem, 5vw, 2.5rem);
     --text-title--line-height: clamp(2.125rem, 5.5vw, 2.75rem);
     --text-title--letter-spacing: var(--tracking-squeezed);
+    --text-title-lg: clamp(3rem, 5vw, 3.25rem);
+    --text-title-lg--line-height: clamp(2.75rem, 5.5vw, 3.5rem);
+    --text-title-lg--letter-spacing: var(--tracking-squeezed);
     --text-display: clamp(3rem, 7vw, 4rem);
     --text-display--line-height: clamp(3.125rem, 7.5vw, 4.25rem);
     --text-display--letter-spacing: var(--tracking-compressed);
+    --text-hero: clamp(3.2rem, 7vw, 4.5rem);
+    --text-hero--line-height: clamp(3.125rem, 7.5vw, 4.25rem);
+    --text-hero--letter-spacing: var(--tracking-compressed);
     --text-headline: clamp(3.5rem, 8vw, 5.5rem);
     --text-headline--line-height: clamp(3.5rem, 8.5vw, 5.75rem);
     --text-headline--letter-spacing: var(--tracking-compressed);
@@ -276,12 +343,12 @@
 
 @utility border-gradient {
     --border-gradient-before: linear-gradient(
-        180deg,
+        var(--to, 180deg),
         rgba(255, 255, 255, 0.16) 0%,
         rgba(255, 255, 255, 0) 100%
     );
     --border-gradient-after: linear-gradient(
-        180deg,
+        var(--to, 180deg),
         rgba(255, 255, 255, 0.12) 0%,
         rgba(255, 255, 255, 0) 125.11%
     );
@@ -310,16 +377,6 @@
     }
 }
 
-@utility mask {
-    mask-image: linear-gradient(
-        to var(--mask-direction, top),
-        transparent,
-        black var(--mask-height, 32px),
-        black calc(100% - var(--mask-height, 32px)),
-        black
-    );
-}
-
 :root,
 .light {
     /* pink polyfills */
@@ -340,14 +397,14 @@
     /* base */
     --color-primary: var(--color-greyscale-900);
     --color-secondary: var(--color-greyscale-700);
-    --color-accent: var(--color-pink-600);
+    --color-accent: var(--color-pink-500);
     --carousel-gradient: transparent;
     --color-badge-bg: var(--color-badge-bg-light);
     --color-badge-border: var(--color-badge-border-light);
-    --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
+    --color-smooth: hsl(var(--color-greyscale-hue) 6% 10% / 0.04);
     --color-card: var(--color-greyscale-850);
     --color-tertiary: hsl(var(--color-greyscale-600));
-    --color-offset: hsl(var(--color-greyscale-hue) 2%, 11%, 0.94);
+    --color-offset: hsl(var(--color-greyscale-hue) 2% 11% / 0.94);
     --color-subtle: var(--color-greyscale-850);
 }
 
@@ -356,7 +413,7 @@
     --color-secondary: var(--color-greyscale-300);
     --carousel-gradient: 23, 23, 26;
     --color-primary-bg: var(--color-greyscale-900);
-    --color-smooth: hsl(0 0%, 100%, 0.06);
+    --color-smooth: hsl(0 0% 100% / 0.06);
     --color-tertiary: hsl(var(--color-greyscale-600));
     --color-offset: hsl(0 0% 100% / 0.1);
 }

src/hooks.server.ts

@@ -37,7 +37,7 @@ const securityheaders: Handle = async ({ event, resolve }) => {
     });
 
     // `true` if deployed via Coolify.
-    const isPreview = !!process.env.COOLIFY_FQDN;
+    const isPreview = !!process.env.COOLIFY_FQDN || process.env.NODE_ENV === 'development';
     // COOLIFY_FQDN already includes `http`.
     const previewDomain = isPreview ? `${process.env.COOLIFY_FQDN}` : null;
     const join = (arr: string[]) => arr.join(' ');
@@ -122,13 +122,6 @@ const securityheaders: Handle = async ({ event, resolve }) => {
     return response;
 };
 
-// const bannerRewriter: Handle = async ({ event, resolve }) => {
-//     const response = await resolve(event, {
-//         transformPageChunk: ({ html }) => html.replace('%aw_banner_key%', BANNER_KEY)
-//     });
-//     return response;
-// };
-
 const initSession: Handle = async ({ event, resolve }) => {
     const session = await createInitSessionClient(event.cookies);
 

src/icons/output/_variables.scss

@@ -15,43 +15,49 @@ $web-icon-chevron-up: "\ea0e";
 $web-icon-close: "\ea0f";
 $web-icon-command: "\ea10";
 $web-icon-copy: "\ea11";
-$web-icon-daily-dev: "\ea12";
-$web-icon-dark: "\ea13";
-$web-icon-discord: "\ea14";
-$web-icon-divider-vertical: "\ea15";
-$web-icon-download: "\ea16";
-$web-icon-ext-link: "\ea17";
-$web-icon-firebase: "\ea18";
-$web-icon-github: "\ea19";
-$web-icon-google: "\ea1a";
-$web-icon-hamburger-menu: "\ea1b";
-$web-icon-instagram: "\ea1c";
-$web-icon-light: "\ea1d";
-$web-icon-linkedin: "\ea1e";
-$web-icon-location: "\ea1f";
-$web-icon-logout-left: "\ea20";
-$web-icon-logout-right: "\ea21";
-$web-icon-mailgun: "\ea22";
-$web-icon-mcp: "\ea23";
-$web-icon-message: "\ea24";
-$web-icon-microsoft: "\ea25";
-$web-icon-minus: "\ea26";
-$web-icon-nuxt: "\ea27";
-$web-icon-platform: "\ea28";
-$web-icon-play: "\ea29";
-$web-icon-plus: "\ea2a";
-$web-icon-product-hunt: "\ea2b";
-$web-icon-refine: "\ea2c";
-$web-icon-remix: "\ea2d";
-$web-icon-rest: "\ea2e";
-$web-icon-search: "\ea2f";
-$web-icon-sendgrid: "\ea30";
-$web-icon-star: "\ea31";
-$web-icon-system: "\ea32";
-$web-icon-textmagic: "\ea33";
-$web-icon-tiktok: "\ea34";
-$web-icon-twitter: "\ea35";
-$web-icon-vue: "\ea36";
-$web-icon-x: "\ea37";
-$web-icon-ycombinator: "\ea38";
-$web-icon-youtube: "\ea39";
+$web-icon-customize: "\ea12";
+$web-icon-daily-dev: "\ea13";
+$web-icon-dark: "\ea14";
+$web-icon-discord: "\ea15";
+$web-icon-divider-vertical: "\ea16";
+$web-icon-download: "\ea17";
+$web-icon-edge: "\ea18";
+$web-icon-ext-link: "\ea19";
+$web-icon-firebase: "\ea1a";
+$web-icon-github: "\ea1b";
+$web-icon-google: "\ea1c";
+$web-icon-hamburger-menu: "\ea1d";
+$web-icon-instagram: "\ea1e";
+$web-icon-light: "\ea1f";
+$web-icon-linkedin: "\ea20";
+$web-icon-location: "\ea21";
+$web-icon-logout-left: "\ea22";
+$web-icon-logout-right: "\ea23";
+$web-icon-mailgun: "\ea24";
+$web-icon-mcp: "\ea25";
+$web-icon-message: "\ea26";
+$web-icon-microsoft: "\ea27";
+$web-icon-minus: "\ea28";
+$web-icon-nuxt: "\ea29";
+$web-icon-platform: "\ea2a";
+$web-icon-play: "\ea2b";
+$web-icon-plus: "\ea2c";
+$web-icon-pop-locations: "\ea2d";
+$web-icon-product-hunt: "\ea2e";
+$web-icon-refine: "\ea2f";
+$web-icon-regions: "\ea30";
+$web-icon-remix: "\ea31";
+$web-icon-rest: "\ea32";
+$web-icon-search: "\ea33";
+$web-icon-sendgrid: "\ea34";
+$web-icon-sparkle: "\ea35";
+$web-icon-star: "\ea36";
+$web-icon-system: "\ea37";
+$web-icon-textmagic: "\ea38";
+$web-icon-ticket: "\ea39";
+$web-icon-tiktok: "\ea3a";
+$web-icon-twitter: "\ea3b";
+$web-icon-vue: "\ea3c";
+$web-icon-x: "\ea3d";
+$web-icon-ycombinator: "\ea3e";
+$web-icon-youtube: "\ea3f";

src/icons/output/info.json

@@ -101,244 +101,280 @@
         "className": "web-icon-copy",
         "unicode": ""
     },
-    "daily-dev": {
+    "customize": {
         "encodedCode": "\\ea12",
         "prefix": "web-icon",
-        "className": "web-icon-daily-dev",
+        "className": "web-icon-customize",
         "unicode": ""
     },
-    "dark": {
+    "daily-dev": {
         "encodedCode": "\\ea13",
         "prefix": "web-icon",
-        "className": "web-icon-dark",
+        "className": "web-icon-daily-dev",
         "unicode": ""
     },
-    "discord": {
+    "dark": {
         "encodedCode": "\\ea14",
         "prefix": "web-icon",
-        "className": "web-icon-discord",
+        "className": "web-icon-dark",
         "unicode": ""
     },
-    "divider-vertical": {
+    "discord": {
         "encodedCode": "\\ea15",
         "prefix": "web-icon",
-        "className": "web-icon-divider-vertical",
+        "className": "web-icon-discord",
         "unicode": ""
     },
-    "download": {
+    "divider-vertical": {
         "encodedCode": "\\ea16",
         "prefix": "web-icon",
-        "className": "web-icon-download",
+        "className": "web-icon-divider-vertical",
         "unicode": ""
     },
-    "ext-link": {
+    "download": {
         "encodedCode": "\\ea17",
         "prefix": "web-icon",
-        "className": "web-icon-ext-link",
+        "className": "web-icon-download",
         "unicode": ""
     },
-    "firebase": {
+    "edge": {
         "encodedCode": "\\ea18",
         "prefix": "web-icon",
-        "className": "web-icon-firebase",
+        "className": "web-icon-edge",
         "unicode": ""
     },
-    "github": {
+    "ext-link": {
         "encodedCode": "\\ea19",
         "prefix": "web-icon",
-        "className": "web-icon-github",
+        "className": "web-icon-ext-link",
         "unicode": ""
     },
-    "google": {
+    "firebase": {
         "encodedCode": "\\ea1a",
         "prefix": "web-icon",
-        "className": "web-icon-google",
+        "className": "web-icon-firebase",
         "unicode": ""
     },
-    "hamburger-menu": {
+    "github": {
         "encodedCode": "\\ea1b",
         "prefix": "web-icon",
-        "className": "web-icon-hamburger-menu",
+        "className": "web-icon-github",
         "unicode": ""
     },
-    "instagram": {
+    "google": {
         "encodedCode": "\\ea1c",
         "prefix": "web-icon",
-        "className": "web-icon-instagram",
+        "className": "web-icon-google",
         "unicode": ""
     },
-    "light": {
+    "hamburger-menu": {
         "encodedCode": "\\ea1d",
         "prefix": "web-icon",
-        "className": "web-icon-light",
+        "className": "web-icon-hamburger-menu",
         "unicode": ""
     },
-    "linkedin": {
+    "instagram": {
         "encodedCode": "\\ea1e",
         "prefix": "web-icon",
-        "className": "web-icon-linkedin",
+        "className": "web-icon-instagram",
         "unicode": ""
     },
-    "location": {
+    "light": {
         "encodedCode": "\\ea1f",
         "prefix": "web-icon",
-        "className": "web-icon-location",
+        "className": "web-icon-light",
         "unicode": ""
     },
-    "logout-left": {
+    "linkedin": {
         "encodedCode": "\\ea20",
         "prefix": "web-icon",
-        "className": "web-icon-logout-left",
+        "className": "web-icon-linkedin",
         "unicode": ""
     },
-    "logout-right": {
+    "location": {
         "encodedCode": "\\ea21",
         "prefix": "web-icon",
-        "className": "web-icon-logout-right",
+        "className": "web-icon-location",
         "unicode": ""
     },
-    "mailgun": {
+    "logout-left": {
         "encodedCode": "\\ea22",
         "prefix": "web-icon",
-        "className": "web-icon-mailgun",
+        "className": "web-icon-logout-left",
         "unicode": ""
     },
-    "mcp": {
+    "logout-right": {
         "encodedCode": "\\ea23",
         "prefix": "web-icon",
-        "className": "web-icon-mcp",
+        "className": "web-icon-logout-right",
         "unicode": ""
     },
-    "message": {
+    "mailgun": {
         "encodedCode": "\\ea24",
         "prefix": "web-icon",
-        "className": "web-icon-message",
+        "className": "web-icon-mailgun",
         "unicode": ""
     },
-    "microsoft": {
+    "mcp": {
         "encodedCode": "\\ea25",
         "prefix": "web-icon",
-        "className": "web-icon-microsoft",
+        "className": "web-icon-mcp",
         "unicode": ""
     },
-    "minus": {
+    "message": {
         "encodedCode": "\\ea26",
         "prefix": "web-icon",
-        "className": "web-icon-minus",
+        "className": "web-icon-message",
         "unicode": ""
     },
-    "nuxt": {
+    "microsoft": {
         "encodedCode": "\\ea27",
         "prefix": "web-icon",
-        "className": "web-icon-nuxt",
+        "className": "web-icon-microsoft",
         "unicode": ""
     },
-    "platform": {
+    "minus": {
         "encodedCode": "\\ea28",
         "prefix": "web-icon",
-        "className": "web-icon-platform",
+        "className": "web-icon-minus",
         "unicode": ""
     },
-    "play": {
+    "nuxt": {
         "encodedCode": "\\ea29",
         "prefix": "web-icon",
-        "className": "web-icon-play",
+        "className": "web-icon-nuxt",
         "unicode": ""
     },
-    "plus": {
+    "platform": {
         "encodedCode": "\\ea2a",
         "prefix": "web-icon",
-        "className": "web-icon-plus",
+        "className": "web-icon-platform",
         "unicode": ""
     },
-    "product-hunt": {
+    "play": {
         "encodedCode": "\\ea2b",
         "prefix": "web-icon",
-        "className": "web-icon-product-hunt",
+        "className": "web-icon-play",
         "unicode": ""
     },
-    "refine": {
+    "plus": {
         "encodedCode": "\\ea2c",
         "prefix": "web-icon",
-        "className": "web-icon-refine",
+        "className": "web-icon-plus",
         "unicode": ""
     },
-    "remix": {
+    "pop-locations": {
         "encodedCode": "\\ea2d",
         "prefix": "web-icon",
-        "className": "web-icon-remix",
+        "className": "web-icon-pop-locations",
         "unicode": ""
     },
-    "rest": {
+    "product-hunt": {
         "encodedCode": "\\ea2e",
         "prefix": "web-icon",
-        "className": "web-icon-rest",
+        "className": "web-icon-product-hunt",
         "unicode": ""
     },
-    "search": {
+    "refine": {
         "encodedCode": "\\ea2f",
         "prefix": "web-icon",
-        "className": "web-icon-search",
+        "className": "web-icon-refine",
         "unicode": ""
     },
-    "sendgrid": {
+    "regions": {
         "encodedCode": "\\ea30",
         "prefix": "web-icon",
-        "className": "web-icon-sendgrid",
+        "className": "web-icon-regions",
         "unicode": ""
     },
-    "star": {
+    "remix": {
         "encodedCode": "\\ea31",
         "prefix": "web-icon",
-        "className": "web-icon-star",
+        "className": "web-icon-remix",
         "unicode": ""
     },
-    "system": {
+    "rest": {
         "encodedCode": "\\ea32",
         "prefix": "web-icon",
-        "className": "web-icon-system",
+        "className": "web-icon-rest",
         "unicode": ""
     },
-    "textmagic": {
+    "search": {
         "encodedCode": "\\ea33",
         "prefix": "web-icon",
-        "className": "web-icon-textmagic",
+        "className": "web-icon-search",
         "unicode": ""
     },
-    "tiktok": {
+    "sendgrid": {
         "encodedCode": "\\ea34",
         "prefix": "web-icon",
-        "className": "web-icon-tiktok",
+        "className": "web-icon-sendgrid",
         "unicode": ""
     },
-    "twitter": {
+    "sparkle": {
         "encodedCode": "\\ea35",
         "prefix": "web-icon",
-        "className": "web-icon-twitter",
+        "className": "web-icon-sparkle",
         "unicode": ""
     },
-    "vue": {
+    "star": {
         "encodedCode": "\\ea36",
         "prefix": "web-icon",
-        "className": "web-icon-vue",
+        "className": "web-icon-star",
         "unicode": ""
     },
-    "x": {
+    "system": {
         "encodedCode": "\\ea37",
         "prefix": "web-icon",
-        "className": "web-icon-x",
+        "className": "web-icon-system",
         "unicode": ""
     },
-    "ycombinator": {
+    "textmagic": {
         "encodedCode": "\\ea38",
         "prefix": "web-icon",
-        "className": "web-icon-ycombinator",
+        "className": "web-icon-textmagic",
         "unicode": ""
     },
-    "youtube": {
+    "ticket": {
         "encodedCode": "\\ea39",
         "prefix": "web-icon",
-        "className": "web-icon-youtube",
+        "className": "web-icon-ticket",
         "unicode": ""
+    },
+    "tiktok": {
+        "encodedCode": "\\ea3a",
+        "prefix": "web-icon",
+        "className": "web-icon-tiktok",
+        "unicode": ""
+    },
+    "twitter": {
+        "encodedCode": "\\ea3b",
+        "prefix": "web-icon",
+        "className": "web-icon-twitter",
+        "unicode": ""
+    },
+    "vue": {
+        "encodedCode": "\\ea3c",
+        "prefix": "web-icon",
+        "className": "web-icon-vue",
+        "unicode": ""
+    },
+    "x": {
+        "encodedCode": "\\ea3d",
+        "prefix": "web-icon",
+        "className": "web-icon-x",
+        "unicode": ""
+    },
+    "ycombinator": {
+        "encodedCode": "\\ea3e",
+        "prefix": "web-icon",
+        "className": "web-icon-ycombinator",
+        "unicode": ""
+    },
+    "youtube": {
+        "encodedCode": "\\ea3f",
+        "prefix": "web-icon",
+        "className": "web-icon-youtube",
+        "unicode": ""
     }
 }

src/icons/output/web-icon.css

@@ -71,123 +71,141 @@
 .web-icon-copy:before {
     content: '\ea11';
 }
-.web-icon-daily-dev:before {
+.web-icon-customize:before {
     content: '\ea12';
 }
-.web-icon-dark:before {
+.web-icon-daily-dev:before {
     content: '\ea13';
 }
-.web-icon-discord:before {
+.web-icon-dark:before {
     content: '\ea14';
 }
-.web-icon-divider-vertical:before {
+.web-icon-discord:before {
     content: '\ea15';
 }
-.web-icon-download:before {
+.web-icon-divider-vertical:before {
     content: '\ea16';
 }
-.web-icon-ext-link:before {
+.web-icon-download:before {
     content: '\ea17';
 }
-.web-icon-firebase:before {
+.web-icon-edge:before {
     content: '\ea18';
 }
-.web-icon-github:before {
+.web-icon-ext-link:before {
     content: '\ea19';
 }
-.web-icon-google:before {
+.web-icon-firebase:before {
     content: '\ea1a';
 }
-.web-icon-hamburger-menu:before {
+.web-icon-github:before {
     content: '\ea1b';
 }
-.web-icon-instagram:before {
+.web-icon-google:before {
     content: '\ea1c';
 }
-.web-icon-light:before {
+.web-icon-hamburger-menu:before {
     content: '\ea1d';
 }
-.web-icon-linkedin:before {
+.web-icon-instagram:before {
     content: '\ea1e';
 }
-.web-icon-location:before {
+.web-icon-light:before {
     content: '\ea1f';
 }
-.web-icon-logout-left:before {
+.web-icon-linkedin:before {
     content: '\ea20';
 }
-.web-icon-logout-right:before {
+.web-icon-location:before {
     content: '\ea21';
 }
-.web-icon-mailgun:before {
+.web-icon-logout-left:before {
     content: '\ea22';
 }
-.web-icon-mcp:before {
+.web-icon-logout-right:before {
     content: '\ea23';
 }
-.web-icon-message:before {
+.web-icon-mailgun:before {
     content: '\ea24';
 }
-.web-icon-microsoft:before {
+.web-icon-mcp:before {
     content: '\ea25';
 }
-.web-icon-minus:before {
+.web-icon-message:before {
     content: '\ea26';
 }
-.web-icon-nuxt:before {
+.web-icon-microsoft:before {
     content: '\ea27';
 }
-.web-icon-platform:before {
+.web-icon-minus:before {
     content: '\ea28';
 }
-.web-icon-play:before {
+.web-icon-nuxt:before {
     content: '\ea29';
 }
-.web-icon-plus:before {
+.web-icon-platform:before {
     content: '\ea2a';
 }
-.web-icon-product-hunt:before {
+.web-icon-play:before {
     content: '\ea2b';
 }
-.web-icon-refine:before {
+.web-icon-plus:before {
     content: '\ea2c';
 }
-.web-icon-remix:before {
+.web-icon-pop-locations:before {
     content: '\ea2d';
 }
-.web-icon-rest:before {
+.web-icon-product-hunt:before {
     content: '\ea2e';
 }
-.web-icon-search:before {
+.web-icon-refine:before {
     content: '\ea2f';
 }
-.web-icon-sendgrid:before {
+.web-icon-regions:before {
     content: '\ea30';
 }
-.web-icon-star:before {
+.web-icon-remix:before {
     content: '\ea31';
 }
-.web-icon-system:before {
+.web-icon-rest:before {
     content: '\ea32';
 }
-.web-icon-textmagic:before {
+.web-icon-search:before {
     content: '\ea33';
 }
-.web-icon-tiktok:before {
+.web-icon-sendgrid:before {
     content: '\ea34';
 }
-.web-icon-twitter:before {
+.web-icon-sparkle:before {
     content: '\ea35';
 }
-.web-icon-vue:before {
+.web-icon-star:before {
     content: '\ea36';
 }
-.web-icon-x:before {
+.web-icon-system:before {
     content: '\ea37';
 }
-.web-icon-ycombinator:before {
+.web-icon-textmagic:before {
     content: '\ea38';
 }
-.web-icon-youtube:before {
+.web-icon-ticket:before {
     content: '\ea39';
 }
+.web-icon-tiktok:before {
+    content: '\ea3a';
+}
+.web-icon-twitter:before {
+    content: '\ea3b';
+}
+.web-icon-vue:before {
+    content: '\ea3c';
+}
+.web-icon-x:before {
+    content: '\ea3d';
+}
+.web-icon-ycombinator:before {
+    content: '\ea3e';
+}
+.web-icon-youtube:before {
+    content: '\ea3f';
+}

src/icons/output/web-icon.scss

@@ -33,46 +33,52 @@
 .web-icon-close:before { content: "\ea0f"; }
 .web-icon-command:before { content: "\ea10"; }
 .web-icon-copy:before { content: "\ea11"; }
-.web-icon-daily-dev:before { content: "\ea12"; }
-.web-icon-dark:before { content: "\ea13"; }
-.web-icon-discord:before { content: "\ea14"; }
-.web-icon-divider-vertical:before { content: "\ea15"; }
-.web-icon-download:before { content: "\ea16"; }
-.web-icon-ext-link:before { content: "\ea17"; }
-.web-icon-firebase:before { content: "\ea18"; }
-.web-icon-github:before { content: "\ea19"; }
-.web-icon-google:before { content: "\ea1a"; }
-.web-icon-hamburger-menu:before { content: "\ea1b"; }
-.web-icon-instagram:before { content: "\ea1c"; }
-.web-icon-light:before { content: "\ea1d"; }
-.web-icon-linkedin:before { content: "\ea1e"; }
-.web-icon-location:before { content: "\ea1f"; }
-.web-icon-logout-left:before { content: "\ea20"; }
-.web-icon-logout-right:before { content: "\ea21"; }
-.web-icon-mailgun:before { content: "\ea22"; }
-.web-icon-mcp:before { content: "\ea23"; }
-.web-icon-message:before { content: "\ea24"; }
-.web-icon-microsoft:before { content: "\ea25"; }
-.web-icon-minus:before { content: "\ea26"; }
-.web-icon-nuxt:before { content: "\ea27"; }
-.web-icon-platform:before { content: "\ea28"; }
-.web-icon-play:before { content: "\ea29"; }
-.web-icon-plus:before { content: "\ea2a"; }
-.web-icon-product-hunt:before { content: "\ea2b"; }
-.web-icon-refine:before { content: "\ea2c"; }
-.web-icon-remix:before { content: "\ea2d"; }
-.web-icon-rest:before { content: "\ea2e"; }
-.web-icon-search:before { content: "\ea2f"; }
-.web-icon-sendgrid:before { content: "\ea30"; }
-.web-icon-star:before { content: "\ea31"; }
-.web-icon-system:before { content: "\ea32"; }
-.web-icon-textmagic:before { content: "\ea33"; }
-.web-icon-tiktok:before { content: "\ea34"; }
-.web-icon-twitter:before { content: "\ea35"; }
-.web-icon-vue:before { content: "\ea36"; }
-.web-icon-x:before { content: "\ea37"; }
-.web-icon-ycombinator:before { content: "\ea38"; }
-.web-icon-youtube:before { content: "\ea39"; }
+.web-icon-customize:before { content: "\ea12"; }
+.web-icon-daily-dev:before { content: "\ea13"; }
+.web-icon-dark:before { content: "\ea14"; }
+.web-icon-discord:before { content: "\ea15"; }
+.web-icon-divider-vertical:before { content: "\ea16"; }
+.web-icon-download:before { content: "\ea17"; }
+.web-icon-edge:before { content: "\ea18"; }
+.web-icon-ext-link:before { content: "\ea19"; }
+.web-icon-firebase:before { content: "\ea1a"; }
+.web-icon-github:before { content: "\ea1b"; }
+.web-icon-google:before { content: "\ea1c"; }
+.web-icon-hamburger-menu:before { content: "\ea1d"; }
+.web-icon-instagram:before { content: "\ea1e"; }
+.web-icon-light:before { content: "\ea1f"; }
+.web-icon-linkedin:before { content: "\ea20"; }
+.web-icon-location:before { content: "\ea21"; }
+.web-icon-logout-left:before { content: "\ea22"; }
+.web-icon-logout-right:before { content: "\ea23"; }
+.web-icon-mailgun:before { content: "\ea24"; }
+.web-icon-mcp:before { content: "\ea25"; }
+.web-icon-message:before { content: "\ea26"; }
+.web-icon-microsoft:before { content: "\ea27"; }
+.web-icon-minus:before { content: "\ea28"; }
+.web-icon-nuxt:before { content: "\ea29"; }
+.web-icon-platform:before { content: "\ea2a"; }
+.web-icon-play:before { content: "\ea2b"; }
+.web-icon-plus:before { content: "\ea2c"; }
+.web-icon-pop-locations:before { content: "\ea2d"; }
+.web-icon-product-hunt:before { content: "\ea2e"; }
+.web-icon-refine:before { content: "\ea2f"; }
+.web-icon-regions:before { content: "\ea30"; }
+.web-icon-remix:before { content: "\ea31"; }
+.web-icon-rest:before { content: "\ea32"; }
+.web-icon-search:before { content: "\ea33"; }
+.web-icon-sendgrid:before { content: "\ea34"; }
+.web-icon-sparkle:before { content: "\ea35"; }
+.web-icon-star:before { content: "\ea36"; }
+.web-icon-system:before { content: "\ea37"; }
+.web-icon-textmagic:before { content: "\ea38"; }
+.web-icon-ticket:before { content: "\ea39"; }
+.web-icon-tiktok:before { content: "\ea3a"; }
+.web-icon-twitter:before { content: "\ea3b"; }
+.web-icon-vue:before { content: "\ea3c"; }
+.web-icon-x:before { content: "\ea3d"; }
+.web-icon-ycombinator:before { content: "\ea3e"; }
+.web-icon-youtube:before { content: "\ea3f"; }
 
 $web-icon-apple: "\ea01";
 $web-icon-appwrite: "\ea02";
@@ -91,43 +97,49 @@ $web-icon-chevron-up: "\ea0e";
 $web-icon-close: "\ea0f";
 $web-icon-command: "\ea10";
 $web-icon-copy: "\ea11";
-$web-icon-daily-dev: "\ea12";
-$web-icon-dark: "\ea13";
-$web-icon-discord: "\ea14";
-$web-icon-divider-vertical: "\ea15";
-$web-icon-download: "\ea16";
-$web-icon-ext-link: "\ea17";
-$web-icon-firebase: "\ea18";
-$web-icon-github: "\ea19";
-$web-icon-google: "\ea1a";
-$web-icon-hamburger-menu: "\ea1b";
-$web-icon-instagram: "\ea1c";
-$web-icon-light: "\ea1d";
-$web-icon-linkedin: "\ea1e";
-$web-icon-location: "\ea1f";
-$web-icon-logout-left: "\ea20";
-$web-icon-logout-right: "\ea21";
-$web-icon-mailgun: "\ea22";
-$web-icon-mcp: "\ea23";
-$web-icon-message: "\ea24";
-$web-icon-microsoft: "\ea25";
-$web-icon-minus: "\ea26";
-$web-icon-nuxt: "\ea27";
-$web-icon-platform: "\ea28";
-$web-icon-play: "\ea29";
-$web-icon-plus: "\ea2a";
-$web-icon-product-hunt: "\ea2b";
-$web-icon-refine: "\ea2c";
-$web-icon-remix: "\ea2d";
-$web-icon-rest: "\ea2e";
-$web-icon-search: "\ea2f";
-$web-icon-sendgrid: "\ea30";
-$web-icon-star: "\ea31";
-$web-icon-system: "\ea32";
-$web-icon-textmagic: "\ea33";
-$web-icon-tiktok: "\ea34";
-$web-icon-twitter: "\ea35";
-$web-icon-vue: "\ea36";
-$web-icon-x: "\ea37";
-$web-icon-ycombinator: "\ea38";
-$web-icon-youtube: "\ea39";
+$web-icon-customize: "\ea12";
+$web-icon-daily-dev: "\ea13";
+$web-icon-dark: "\ea14";
+$web-icon-discord: "\ea15";
+$web-icon-divider-vertical: "\ea16";
+$web-icon-download: "\ea17";
+$web-icon-edge: "\ea18";
+$web-icon-ext-link: "\ea19";
+$web-icon-firebase: "\ea1a";
+$web-icon-github: "\ea1b";
+$web-icon-google: "\ea1c";
+$web-icon-hamburger-menu: "\ea1d";
+$web-icon-instagram: "\ea1e";
+$web-icon-light: "\ea1f";
+$web-icon-linkedin: "\ea20";
+$web-icon-location: "\ea21";
+$web-icon-logout-left: "\ea22";
+$web-icon-logout-right: "\ea23";
+$web-icon-mailgun: "\ea24";
+$web-icon-mcp: "\ea25";
+$web-icon-message: "\ea26";
+$web-icon-microsoft: "\ea27";
+$web-icon-minus: "\ea28";
+$web-icon-nuxt: "\ea29";
+$web-icon-platform: "\ea2a";
+$web-icon-play: "\ea2b";
+$web-icon-plus: "\ea2c";
+$web-icon-pop-locations: "\ea2d";
+$web-icon-product-hunt: "\ea2e";
+$web-icon-refine: "\ea2f";
+$web-icon-regions: "\ea30";
+$web-icon-remix: "\ea31";
+$web-icon-rest: "\ea32";
+$web-icon-search: "\ea33";
+$web-icon-sendgrid: "\ea34";
+$web-icon-sparkle: "\ea35";
+$web-icon-star: "\ea36";
+$web-icon-system: "\ea37";
+$web-icon-textmagic: "\ea38";
+$web-icon-ticket: "\ea39";
+$web-icon-tiktok: "\ea3a";
+$web-icon-twitter: "\ea3b";
+$web-icon-vue: "\ea3c";
+$web-icon-x: "\ea3d";
+$web-icon-ycombinator: "\ea3e";
+$web-icon-youtube: "\ea3f";

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

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

src/lib/actions/mouse-position.svelte.ts

@@ -0,0 +1,49 @@
+import { hover } from 'motion';
+import { writable } from 'svelte/store';
+
+export interface Position {
+    x: number;
+    y: number;
+}
+
+export const useMousePosition = () => {
+    let position = $state<Position>({
+        x: 0,
+        y: 0
+    });
+
+    const action = (node: HTMLElement | SVGSVGElement) => {
+        const handleMouseMove = (event: MouseEvent) => {
+            const { clientX, clientY } = event;
+            const tooltipWidth = 190;
+            const rect = node.getBoundingClientRect();
+            let tooltipX = event.clientX - rect.left + 12;
+
+            if (tooltipX + tooltipWidth > window.innerWidth) {
+                tooltipX = clientX - tooltipWidth - 10;
+            }
+
+            position = {
+                x: tooltipX,
+                y: event.clientY - rect.top + 12
+            };
+        };
+
+        hover(node, () => {
+            document.addEventListener('mousemove', handleMouseMove);
+        });
+
+        return {
+            destroy() {
+                document.removeEventListener('mousemove', handleMouseMove);
+            }
+        };
+    };
+
+    return {
+        action,
+        position: () => {
+            return position;
+        }
+    };
+};