Functions product page

package.json

@@ -77,6 +77,7 @@
         "svelte-check": "^3.8.1",
         "svelte-markdoc-preprocess": "^2.0.0",
         "svelte-markdown": "^0.4.1",
+        "svelte-motion": "^0.12.2",
         "svgtofont": "^4.2.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss": "4.0.0-alpha.17",

src/app.css

@@ -45,6 +45,9 @@
     --color-blue-500: calc(hsl(var(--color-blue-hue) - 1) 99% 70%);
     --color-blue-700: calc(hsl(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);
@@ -77,8 +80,11 @@
 
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-caret-blink: caret-blink 1s ease-in-out infinite;
     --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
         up 0.75s ease-in-out both;
+    --animate-scroll: scroll 60s linear infinite;
+    --animate-fade-in: fade-in 0.5s ease-in-out both;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -93,6 +99,18 @@
         }
     }
 
+    @keyframes caret-blink {
+        0%,
+        70%,
+        100% {
+            opacity: 1;
+        }
+        20%,
+        50% {
+            opacity: 0;
+        }
+    }
+
     @keyframes blur {
         0% {
             filter: blur(5px);
@@ -120,6 +138,15 @@
         }
     }
 
+    @keyframes scroll {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(-100%);
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;
@@ -128,9 +155,12 @@
     --font-family-archia: 'Archia', arial, sans-serif;
 
     /* Font sizes */
+    --font-size-x-micro: 0.625rem;
+    --font-size-x-micro--line-height: 0.875rem;
+    --font-size-x-micro--letter-spacing: var(--letter-spacing-tighter);
     --font-size-micro: 0.75rem;
     --font-size-micro--line-height: 1rem;
-    --font-size-micro--letter-spacing: var(--letter-spacing-loose);
+    --font-size-micro--letter-spacing: var(--letter-spacing-tighter);
     --font-size-caption: 0.875rem;
     --font-size-caption--line-height: 1.375rem;
     --font-size-caption--letter-spacing: var(--letter-spacing-tight);

src/lib/animations/index.ts

@@ -231,6 +231,20 @@ export function write(text: string, cb: (v: string) => void, duration = 500) {
     });
 }
 
+export function unwrite(text: string, cb: (v: string) => void, duration = 500) {
+    const step = duration / text.length;
+    let i = text.length;
+    return new Promise((resolve) => {
+        const interval = setInterval(() => {
+            cb(text.slice(0, --i));
+            if (i === 0) {
+                clearInterval(interval);
+                resolve(undefined);
+            }
+        }, step);
+    });
+}
+
 export function sleep(duration: number) {
     return new Promise((resolve) => {
         setTimeout(resolve, duration);

src/lib/utils/references.ts

@@ -57,6 +57,15 @@ export enum Platform {
     ServerRest = 'server-rest'
 }
 
+export enum Framework {
+    NextJs = 'Next.js',
+    SvelteKit = 'SvelteKit',
+    VueJs = 'Vue.js',
+    Nuxt3 = 'Nuxt3',
+    Astro = 'Astro',
+    Remix = 'Remix'
+}
+
 export const platformMap: Record<Language | string, string> = {
     [Platform.ClientApple]: 'Apple',
     [Platform.ClientFlutter]: 'Flutter',