some final polish

src/lib/animations/Products/Products.svelte

@@ -154,7 +154,7 @@
     import { Storage, storageController } from './storage';
     import { Functions, functionsController } from './functions';
     import { Realtime, realtimeController } from './realtime';
-    import { Messaging as MessagingAnimation, messagingController } from './messaging';
+    import { Messaging, messagingController } from './messaging';
     import { postController } from './post';
     import Post from './post/post.svelte';
     import { anyify } from '$lib/utils/anyify';
@@ -328,7 +328,7 @@
                             {#if active.product === 'auth'}
                                 <Auth.Box />
                             {:else if active.product === 'messaging'}
-                                <MessagingAnimation.Box />
+                                <Messaging.Box />
                             {:else if active.product === 'databases'}
                                 <Databases.Box />
                             {:else if active.product === 'storage'}
@@ -348,7 +348,7 @@
                             {:else if active.product === 'functions'}
                                 <Functions.Code />
                             {:else if active.product === 'messaging'}
-                                <MessagingAnimation.Code />
+                                <Messaging.Code />
                             {/if}
                         </CodeWindow>
                     </div>
@@ -369,7 +369,7 @@
                         {:else if active.product === 'storage'}
                             <Storage.Phone />
                         {:else if active.product === 'messaging'}
-                            <MessagingAnimation.Phone />
+                            <Messaging.Phone />
                         {:else if active.product === 'functions'}
                             <Functions.Phone />
                         {:else if !['auth', 'databases', 'storage', 'messaging', 'functions'].includes(anyify(active.product))}
@@ -391,7 +391,7 @@
 
     #products {
         min-height: 500vh;
-        height: 5000px;
+        height: fit-content;
         position: relative;
 
         --debug-bg: transparent;
@@ -568,7 +568,7 @@
         );
 
         background: rgba(255, 255, 255, 0.08);
-        backdrop-filter: blur(8px);
+        //backdrop-filter: blur(8px);
         padding: 0.5rem;
 
         width: 275px;

src/lib/animations/Products/messaging/code.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-    import { portal } from '$lib/actions';
     import Code from '$lib/animations/CodeWindow/Code.svelte';
-    import { fade } from 'svelte/transition';
-    import { messagingController } from '.';
 
     let content = `
 await messaging.createPush(  
@@ -10,36 +7,6 @@ await messaging.createPush(
 	'New task assigned to you',
 	'You were assigned a new task in your board. Tap to check it out.',
 );`.trim();
-
-    const { state } = messagingController;
 </script>
 
 <Code {content} />
-
-<div use:portal={{ target: '#code-bottom' }} class="bottom">
-    {#if $state.submit === 'loading'}
-        <span in:fade>Sending push notification...</span>
-        <div class="loader is-small" in:fade />
-    {:else if $state.submit === 'success'}
-        <span in:fade>Push notification sent!</span>
-    {/if}
-</div>
-
-<style lang="scss">
-    .bottom {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-
-        height: 3rem;
-        padding-inline: 1rem;
-
-        color: var(--color-bw-white, #fff);
-        font-family: Inter;
-        font-size: 0.875rem;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 150%; /* 1.3125rem */
-        letter-spacing: -0.00875rem;
-    }
-</style>

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

@@ -38,7 +38,7 @@ const state = createResettable<State>({
         {
             id: '...3397fecdedb1',
             type: 'SMS',
-            icon: './images/icons/illustrated/dark/push.png',
+            icon: './images/icons/illustrated/dark/sms.png',
             status: 'sent'
         },
         {
@@ -120,7 +120,7 @@ const execute = async () => {
         ]
     }));
 
-    await sleep(1000);
+    await sleep(1250);
 
     update((p) => ({
         ...p,

src/lib/animations/Products/messaging/phone.svelte

@@ -53,10 +53,11 @@
         gap: 0.75rem;
         left: 50%;
         transform: translateX(-50%);
-        z-index: 10;
+        z-index: 1000;
         border-radius: 20px;
         background: rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(8px);
+        box-shadow: 3px -8px 32px 0px rgba(0, 0, 0, 0.24);
 
         .icon {
             height: 38px;
@@ -76,7 +77,7 @@
                 font-size: 0.75rem;
                 font-style: normal;
                 font-weight: 600;
-                line-height: 1.375rem; /* 137.5% */
+                line-height: 1rem; /* 137.5% */
                 letter-spacing: -0.014rem;
             }
 
@@ -86,7 +87,7 @@
                 font-size: 0.75rem;
                 font-style: normal;
                 font-weight: 400;
-                line-height: 1.375rem; /* 137.5% */
+                line-height: 1rem; /* 137.5% */
                 letter-spacing: -0.014rem;
             }
         }
@@ -96,7 +97,7 @@
             font-size: 0.75rem;
             font-style: normal;
             font-weight: 400;
-            line-height: 1.375rem; /* 137.5% */
+            line-height: 1rem; /* 137.5% */
             letter-spacing: -0.014rem;
         }
     }

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

@@ -67,6 +67,7 @@ const addTask = (update: typeof state.update, group: keyof State['tasks'], task:
 const execute = async () => {
     const phone = getElSelector('phone');
     const code = getElSelector('code');
+    const box = getElSelector('box');
 
     const walter = getElSelector('user-Walter');
     const aditya = getElSelector('user-Aditya');
@@ -84,6 +85,7 @@ const execute = async () => {
     const { set: setConn } = connectionsProg.reset();
 
     await Promise.all([
+        safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished,
         safeAnimate(phone, { x: 0, y: 0, width: '660px' }, { duration: 0.5 })?.finished,
         safeAnimate(code, { opacity: 0 }, { duration: 0.5 })?.finished,
         safeAnimate(graphBox, { opacity: 0, x: 0, y: 0, visibility: 'visible' }, { duration: 0 })
@@ -205,7 +207,8 @@ const execute = async () => {
             tags: ['design']
         });
 
-		await safeAnimate(sara, { scale: 1, y: 60, x: -50 }, { duration: 0.75, delay: 0.5 })?.finished;
+        await safeAnimate(sara, { scale: 1, y: 60, x: -50 }, { duration: 0.75, delay: 0.5 })
+            ?.finished;
         await sleep(250);
 
         await safeAnimate(sara, { x: 200, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
@@ -220,7 +223,8 @@ const execute = async () => {
             tags: ['Dev']
         });
 
-		await safeAnimate(sara, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 })?.finished;
+        await safeAnimate(sara, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 })
+            ?.finished;
     });
 };