From 108a526d23f8d58923b2e7163fa35e9f687c4419 Mon Sep 17 00:00:00 2001 From: Chen Parnasa <50298160+chenparnasa@users.noreply.github.com> Date: Sun, 15 Mar 2026 18:05:39 +0200 Subject: [PATCH 1/5] Add database types to products section --- .../bento/(animations)/auth.svelte | 6 +- .../bento/(animations)/databases.svelte | 346 ++++++++---------- 2 files changed, 151 insertions(+), 201 deletions(-) diff --git a/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte b/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte index 0b4beb6e60..065905300f 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,7 @@

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 tableDetail = [ + { field: 'Name', value: 'Toy Story' }, + { field: 'Genre', value: 'Animation' }, + { field: 'Year', value: '1995' }, + { field: 'Rating', value: '8.3' } + ]; - const products = [ - { - ID: 3397, - name: 'Turtlenecks', - barcode: 'TRTL' - }, - { - ID: 2224, - name: 'Pullovers', - barcode: 'PLOV' - }, - { - ID: 5689, - name: 'Zip-up', - barcode: 'ZPUP' - } + const docFields = [ + { key: '$id', value: '"2224gab"', color: 'text-[#E8C07D]' }, + { key: 'title', value: '"Toy Story"', color: 'text-[#9FD990]' }, + { key: 'genre', value: '"Animation"', color: 'text-[#9FD990]' }, + { key: 'year', value: '1995', color: 'text-[#79B8FF]' }, + { key: '$createdAt', value: '"Jan 15, 13:03"', color: 'text-[#E8C07D]' } ]; - const keys = Object.keys(products[0]); + const vectorFields = [ + { key: '$id', value: '"2224gab"', color: 'text-[#E8C07D]' }, + { key: 'title', value: '"Toy Story"', color: 'text-[#9FD990]' }, + { key: 'year', value: '1995', color: 'text-[#79B8FF]' }, + { key: 'Embeddings', value: '[0.0701, 0.0049, ...]', color: 'text-[#79B8FF]' }, + { key: '$createdAt', value: '"Dec 3, 13:03"', color: 'text-[#E8C07D]' } + ]; + let activeType = $state('Tables'); let container: HTMLElement; - let table: HTMLElement; - let shouldAnimate = $state(false); + let foreground: HTMLElement; + 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 - } + foreground, + { x: [12, -5], y: [12, -5] }, + { type: 'spring', bounce: 0.3, duration: 0.35 } ); - shouldAnimate = true; - + startCycle(); return () => { animate( - table, - { - x: [-5, 12], - y: [-5, 12] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } + foreground, + { x: [-5, 12], y: [-5, 12] }, + { type: 'spring', bounce: 0.3, duration: 0.35 } ); - - shouldAnimate = false; + stopCycle(); }; }); @@ -103,36 +84,19 @@ container, () => { if (!isMobile()) return; - animate( - table, - { - x: [12, -5], - y: [12, -5] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } + foreground, + { x: [12, -5], y: [12, -5] }, + { type: 'spring', bounce: 0.3, duration: 0.35 } ); - shouldAnimate = true; - + startCycle(); return () => { animate( - table, - { - x: [-5, 12], - y: [-5, 12] - }, - { - type: 'spring', - bounce: 0.3, - duration: 0.35 - } + foreground, + { x: [-5, 12], y: [-5, 12] }, + { type: 'spring', bounce: 0.3, duration: 0.35 } ); - - shouldAnimate = false; + stopCycle(); }; }, { amount: 'all' } @@ -142,7 +106,7 @@ { trackEvent(`bento-databases-click`); }} @@ -159,7 +123,7 @@

Databases

- Scalable and robust databases backed by your favorite technologies.

@@ -167,6 +131,7 @@
+
@@ -177,11 +142,11 @@ - {#each collectionKeys as heading} + {#each rowKeys as key} - {heading} + {key} - {#each collections as collection, c} - {@const isSweaters = collection.Category === 'Sweaters'} + {#each rows as row, r}
- {#each Object.values(collection) as item, i} - {@const isLastProduct = c === products.length - 1} - {@const isLastItem = i === Object.values(collection).length - 1} + {#each Object.values(row) as item, i} + {@const isLast = r === rows.length - 1} + {@const isLastItem = i === Object.values(row).length - 1} - {#if isLastItem} -
- - - - - - ...{item} - {:else} - {item} - {/if}{item} {/each} @@ -253,63 +189,79 @@
-
-
-

Sweaters

-
- - - +
+ +
+

{activeType}

+ 2224gab +
+ + +
+
+ {#key activeType} +
+ {#if activeType === 'Tables'} +
+ + {#each tableDetail as row, r} + + + + + {/each} + +
{row.field}{row.value}
+ {:else if activeType === 'Documents'} +
- {#each keys as key} - - {key} - {"{"} + {#each docFields as field} +
+ {field.key}: {field.value}, - - - +
{/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} - {item}{"}"} +
+ {:else} +
+ {"{"} + {#each vectorFields as field} +
+ {field.key}: {field.value}, - {/each} - - {/each} - - +
+ {/each} + {"}"} +
+ {/if} +
+ {/key}
From fda8ea0e8090c33e715e6f8e3ecd7b3c9abd91c3 Mon Sep 17 00:00:00 2001 From: Chen Parnasa <50298160+chenparnasa@users.noreply.github.com> Date: Tue, 17 Mar 2026 18:03:20 +0200 Subject: [PATCH 2/5] Alternative DB types approach --- .../bento/(animations)/databases.svelte | 302 +++++++----------- 1 file changed, 120 insertions(+), 182 deletions(-) diff --git a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte index e892696088..7eed032a80 100644 --- a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte +++ b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte @@ -3,47 +3,26 @@ import { cn } from '$lib/utils/cn'; import { isMobile } from '$lib/utils/is-mobile'; import GridPaper from '../../grid-paper.svelte'; - import { animate, hover, inView } from 'motion'; + import { hover, inView } from 'motion'; import { fade } from 'svelte/transition'; type DBType = 'Tables' | 'Documents' | 'Vector'; - const types: DBType[] = ['Tables', 'Documents', 'Vector']; - - const rows = [ - { ID: '3397fec', createdAt: '2026-01-15', updatedAt: '2026-02-20' }, - { ID: '2224gab', createdAt: '2026-01-18', updatedAt: '2026-02-22' }, - { ID: '5689fdo', createdAt: '2026-01-20', updatedAt: '2026-03-01' }, - { ID: '1193cda', createdAt: '2026-02-02', updatedAt: '2026-03-05' }, - { ID: '8821bfe', createdAt: '2026-02-10', updatedAt: '2026-03-10' } - ]; - const rowKeys = Object.keys(rows[0]); - const tableDetail = [ - { field: 'Name', value: 'Toy Story' }, - { field: 'Genre', value: 'Animation' }, - { field: 'Year', value: '1995' }, - { field: 'Rating', value: '8.3' } - ]; + const types: DBType[] = ['Tables', 'Documents', 'Vector']; - const docFields = [ - { key: '$id', value: '"2224gab"', color: 'text-[#E8C07D]' }, - { key: 'title', value: '"Toy Story"', color: 'text-[#9FD990]' }, - { key: 'genre', value: '"Animation"', color: 'text-[#9FD990]' }, - { key: 'year', value: '1995', color: 'text-[#79B8FF]' }, - { key: '$createdAt', value: '"Jan 15, 13:03"', color: 'text-[#E8C07D]' } + const movies = [ + { id: '3397fec2uj', title: 'Toy Story', genre: 'Animation', year: 1995, rating: 8.3, embedding: '[0.0701, 0.0049, ...]' }, + { id: '2224gab8kp', title: 'Star Wars', genre: 'Sci-Fi', year: 1977, rating: 8.6, embedding: '[0.0234, 0.0812, ...]' }, + { id: '5689fdo4lm', title: 'The Matrix', genre: 'Action', year: 1999, rating: 8.7, embedding: '[0.0445, 0.0178, ...]' }, + { id: '1193cda7nt', title: 'Inception', genre: 'Sci-Fi', year: 2010, rating: 8.8, embedding: '[0.0923, 0.0067, ...]' }, + { id: '8821bfe3qr', title: 'Titanic', genre: 'Romance', year: 1997, rating: 7.9, embedding: '[0.0156, 0.0634, ...]' }, + { id: '9912abc6ws', title: 'Interstellar', genre: 'Sci-Fi', year: 2014, rating: 8.6, embedding: '[0.0789, 0.0345, ...]' } ]; - const vectorFields = [ - { key: '$id', value: '"2224gab"', color: 'text-[#E8C07D]' }, - { key: 'title', value: '"Toy Story"', color: 'text-[#9FD990]' }, - { key: 'year', value: '1995', color: 'text-[#79B8FF]' }, - { key: 'Embeddings', value: '[0.0701, 0.0049, ...]', color: 'text-[#79B8FF]' }, - { key: '$createdAt', value: '"Dec 3, 13:03"', color: 'text-[#E8C07D]' } - ]; + const tableColumns = ['ID', 'Name', 'Genre', 'Year', 'Rating']; let activeType = $state('Tables'); let container: HTMLElement; - let foreground: HTMLElement; let cycleInterval: ReturnType | null = null; function startCycle() { @@ -64,40 +43,16 @@ $effect(() => { hover(container, () => { if (isMobile()) return; - animate( - foreground, - { x: [12, -5], y: [12, -5] }, - { type: 'spring', bounce: 0.3, duration: 0.35 } - ); startCycle(); - return () => { - animate( - foreground, - { x: [-5, 12], y: [-5, 12] }, - { type: 'spring', bounce: 0.3, duration: 0.35 } - ); - stopCycle(); - }; + return () => stopCycle(); }); inView( container, () => { if (!isMobile()) return; - animate( - foreground, - { x: [12, -5], y: [12, -5] }, - { type: 'spring', bounce: 0.3, duration: 0.35 } - ); startCycle(); - return () => { - animate( - foreground, - { x: [-5, 12], y: [-5, 12] }, - { type: 'spring', bounce: 0.3, duration: 0.35 } - ); - stopCycle(); - }; + return () => stopCycle(); }, { amount: 'all' } ); @@ -128,142 +83,125 @@ >

-
- -
-

Products

-
- - - - {#each rowKeys as key} - - {/each} - - - - {#each rows as row, r} - - {#each Object.values(row) as item, i} - {@const isLast = r === rows.length - 1} - {@const isLastItem = i === Object.values(row).length - 1} - - {/each} - - {/each} - -
- {key} - - - -
{item}
-
+
+ +
+ {#each types as type} +
+
+ {type} +
+
+
+ {/each}
- +
- -
-

{activeType}

- 2224gab + +
+ Movies
- -
-
- {#key activeType} -
- {#if activeType === 'Tables'} - - - {#each tableDetail as row, r} - - - - + + {#key activeType} +
+ {#if activeType === 'Documents'} + +
+
+ +
+ {#each movies as movie} +
+ {movie.id}… +
{/each} -
-
{row.field}{row.value}
- {:else if activeType === 'Documents'} -
- {"{"} - {#each docFields as field} -
- {field.key}: {field.value}, +
+ + +
+
{'{'}
+
+
"$id": "3397fec2uj...",
+
"title": "Toy Story",
+
"genre": "Animation",
+
"year": 1995,
+
"$createdAt": "Jan 15, 2026"
- {/each} - {"}"} +
{'}'}
+
- {:else} -
- {"{"} - {#each vectorFields as field} -
- {field.key}: {field.value}, -
- {/each} - {"}"} +
+ {:else if activeType === 'Tables'} + +
+
+ + + + {#each tableColumns as col} + + {/each} + + + + {#each movies as movie} + + + + + + + + {/each} + +
{col}
{movie.id}…{movie.title}{movie.genre}{movie.year}{movie.rating}
- {/if} -
- {/key} +
+ {:else} + +
+
+
+ {#each movies as movie} +
+ {movie.id}… +
+ {/each} +
+ + +
+
{'{'}
+
+
$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}
From f97e854ed9bb9effec82185a7f1af451c5bdc160 Mon Sep 17 00:00:00 2001 From: Chen Parnasa <50298160+chenparnasa@users.noreply.github.com> Date: Wed, 18 Mar 2026 13:51:25 +0200 Subject: [PATCH 3/5] small tweak: adjust illustrations and breakpoints --- .../bento/(animations)/databases.svelte | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte index 7eed032a80..08675b3e98 100644 --- a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte +++ b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte @@ -6,9 +6,9 @@ import { hover, inView } from 'motion'; import { fade } from 'svelte/transition'; - type DBType = 'Tables' | 'Documents' | 'Vector'; + type DBType = 'Tables' | 'Documents' | 'Vectors'; - const types: DBType[] = ['Tables', 'Documents', 'Vector']; + const types: DBType[] = ['Tables', 'Documents', 'Vectors']; const movies = [ { id: '3397fec2uj', title: 'Toy Story', genre: 'Animation', year: 1995, rating: 8.3, embedding: '[0.0701, 0.0049, ...]' }, @@ -123,7 +123,7 @@
-
+
{#each movies as movie}
{movie.id}… @@ -148,23 +148,25 @@ {:else if activeType === 'Tables'}
-
+
- {#each tableColumns as col} - - {/each} + + + + + {#each movies as movie} - - - - - + + + + + {/each} @@ -175,7 +177,7 @@
-
+
{#each movies as movie}
{movie.id}… From 778d87ad41d3867a5026a85f82bd81d271315610 Mon Sep 17 00:00:00 2001 From: Chen Parnasa <50298160+chenparnasa@users.noreply.github.com> Date: Wed, 18 Mar 2026 13:55:44 +0200 Subject: [PATCH 4/5] small tweak: adjust mobile breakpoints --- .../(components)/bento/(animations)/databases.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte index 08675b3e98..cd67ec1935 100644 --- a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte +++ b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte @@ -121,9 +121,9 @@ {#if activeType === 'Documents'}
-
- -
+
+ +
{col}IDName
{movie.id}…{movie.title}{movie.genre}{movie.year}{movie.rating}{movie.id}…{movie.title}
- - - - - + + + + + {#each movies as movie} - - + + - - - + + + {/each} @@ -176,29 +289,77 @@ {:else}
-
-
IDNameIDName
{movie.id}…
{movie.id}… {movie.title}