diff --git a/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte b/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte index 0b4beb6e60..3d29e407eb 100644 --- a/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte +++ b/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte @@ -65,7 +65,7 @@ { trackEvent(`bento-auth-click`); }} @@ -82,9 +82,8 @@

Auth

- Authenticate users securely with multiple login methods like Email/Password, SMS, OAuth, Anonymous, and Magic URLs. + Authenticate users with Email/Password, SMS, OAuth, Anonymous, + and Magic URLs.

Object.keys(collection)); - - const products = [ - { - ID: 3397, - name: 'Turtlenecks', - barcode: 'TRTL' + id: '1193cda7nt', + title: 'Inception', + genre: 'Sci-Fi', + year: 2010, + rating: 8.8, + embedding: '[0.0923, 0.0067, ...]' }, { - ID: 2224, - name: 'Pullovers', - barcode: 'PLOV' + id: '8821bfe3qr', + title: 'Titanic', + genre: 'Romance', + year: 1997, + rating: 7.9, + embedding: '[0.0156, 0.0634, ...]' }, { - ID: 5689, - name: 'Zip-up', - barcode: 'ZPUP' + id: '9912abc6ws', + title: 'Interstellar', + genre: 'Sci-Fi', + year: 2014, + rating: 8.6, + embedding: '[0.0789, 0.0345, ...]' } ]; - const keys = Object.keys(products[0]); + const tableColumns = ['ID', 'Name', 'Genre', 'Year', 'Rating']; + let activeType = $state('Tables'); let container: HTMLElement; - let table: HTMLElement; - let shouldAnimate = $state(false); + let cycleInterval: ReturnType | null = null; + + function startCycle() { + cycleInterval = setInterval(() => { + const idx = types.indexOf(activeType); + activeType = types[(idx + 1) % types.length]; + }, 1800); + } + + function stopCycle() { + if (cycleInterval) { + clearInterval(cycleInterval); + cycleInterval = null; + } + activeType = 'Tables'; + } $effect(() => { hover(container, () => { if (isMobile()) return; - animate( - table, - { - x: [12, -5], - y: [12, -5] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } - ); - shouldAnimate = true; - - return () => { - animate( - table, - { - x: [-5, 12], - y: [-5, 12] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } - ); - - shouldAnimate = false; - }; + startCycle(); + return () => stopCycle(); }); inView( container, () => { if (!isMobile()) return; - - animate( - table, - { - x: [12, -5], - y: [12, -5] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } - ); - shouldAnimate = true; - - return () => { - animate( - table, - { - x: [-5, 12], - y: [-5, 12] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } - ); - - shouldAnimate = false; - }; + startCycle(); + return () => stopCycle(); }, { amount: 'all' } ); @@ -142,7 +103,7 @@ { trackEvent(`bento-databases-click`); }} @@ -159,159 +120,251 @@

Databases

- Scalable and robust databases backed by your favorite technologies.

-
+
+ +
+ {#each types as type} +
+
+ {type} +
+
+
+ {/each} +
+ +
-

Products

-
- - - - {#each collectionKeys as heading} - - {/each} - - - - {#each collections as collection, c} - {@const isSweaters = collection.Category === 'Sweaters'} - - {#each Object.values(collection) as item, i} - {@const isLastProduct = c === products.length - 1} - {@const isLastItem = i === Object.values(collection).length - 1} - - {/each} - - {/each} - -
+
+ Movies +
+ + + {#key activeType} +
+ {#if activeType === 'Documents'} + +
+
+ +
- {#if isLastItem} - + {movie.id}… - - - - + + {/each} + - ...{item} +
+
{'{'}
+
+
+ "$id": + "3397fec2uj...", +
+
+ "title": + "Toy Story", +
+
+ "genre": + "Animation", +
+
+ "year": + 1995, - {:else} - {item} - {/if}
-
-
-
-
-

Sweaters

-
- - - - {#each keys as key} - - {/each} - - - - {#each products as product, p} - - {#each Object.values(product) as item, i} - {@const isLastProduct = p === products.length - 1} - {@const isLastItem = - i === Object.values(product).length - 1} - +
+ "$createdAt": + "Jan 15, 2026" +
+ +
{'}'}
+ + + + {:else if activeType === 'Tables'} + +
+
+
- {key} - - - -
{item}
+ + + + + + + + + + + {#each movies as movie} + + + + + + + + {/each} + +
IDName
{movie.id}…{movie.title}
+
+
+ {:else} + +
+
+ + + +
+
{'{'}
+
+
+ $id: + "3397fec2uj...", +
+
+ Metadata: {'{'} +
+
+ title: + "Toy Story", +
+
+ releaseYear: + "1995" +
+
{' },'}
+
+ Embeddings: + [0.0701, 0.0049, 0.1031, 0.0071, -0.0088, ...], +
+
+ $createdAt: + "Jan 15, 2026" +
+
+
{'}'}
+
+
+
+ {/if}
-
+ {/key}