tweaks

src/lib/components/ui/button.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    // TODO: replace _button.scss with Tailwind classes for long-term maintainability
     const button = cva(['web-button'], {
         variants: {
             variant: {
@@ -42,7 +41,6 @@
         children,
         class: classes,
         events,
-        type,
         ...rest
     }: Props = $props();
 

src/routes/(experiments)/new-homepage/(components)/bento/(animations)/functions.svelte

@@ -64,37 +64,37 @@
                 console.log('stale');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Generate;
-                }, 3000);
+                }, 500);
                 return () => clearTimeout(timeout);
             case FunctionsState.Generate:
                 console.log('generate');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Send;
-                }, 3000);
+                }, 2000);
                 return () => clearTimeout(timeout);
             case FunctionsState.Send:
                 console.log('send');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Update;
-                }, 3000);
+                }, 1000);
                 return () => clearTimeout(timeout);
             case FunctionsState.Update:
                 console.log('update');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Delete;
-                }, 3000);
+                }, 200);
                 return () => clearTimeout(timeout);
             case FunctionsState.Delete:
                 console.log('delete');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Create;
-                }, 3000);
+                }, 100);
                 return () => clearTimeout(timeout);
             case FunctionsState.Create:
                 console.log('create');
                 timeout = setTimeout(() => {
                     step = FunctionsState.Stale;
-                }, 3000);
+                }, 800);
                 return () => clearTimeout(timeout);
             default:
                 console.log('stale');

src/routes/(experiments)/new-homepage/(components)/bento/(animations)/storage.svelte

@@ -2,7 +2,7 @@
     import { classNames } from '$lib/utils/classnames';
     import { onMount } from 'svelte';
     import Image from '../../../(assets)/images/storage.webp';
-    import { animate, hover, inView, type AnimationSequence } from 'motion';
+    import { animate, hover, inView, type AnimationSequence, motionValue, transform } from 'motion';
     import { isMobile } from '$lib/utils/is-mobile';
     import { getCodeHtml } from '$lib/utils/code';
     import GridPaper from '../../grid-paper.svelte';
@@ -11,11 +11,11 @@
     let imageComponent: HTMLElement;
     let image: HTMLElement;
 
-    $: width = 232;
+    let width = $state(232);
-    $: height = 158;
+    let height = $state(158);
-    $: borderRadius = 4;
+    let borderRadius = $state(4);
 
-    $: content = `const result = storage.getFilePreview(
+    const content = `const result = storage.getFilePreview(
 	 'photos',     // bucket ID
 	 'sunset.heic',// file ID
 	 ${width},          // width
@@ -25,7 +25,7 @@
 	 'heic'        // output heic format
 ;`;
 
-    $: snippet = getCodeHtml({
+    const snippet = getCodeHtml({
         content,
         language: 'javascript',
         withLineNumbers: true

src/scss/6-elements/_button.scss

@@ -103,7 +103,7 @@
 
 
     @mixin light-mode {
-      background: rgba(253, 54, 110, 0.08);
+      background: hsla(343, 98%, 60%, 0.08);
       box-shadow: none;
       color: hsl(var(--web-color-accent-click));
       .#{$p}-inline-tag {