new hero effect experiment

src/routes/+page.svelte

@@ -5,6 +5,11 @@
 	import Hero from './Hero.svelte'
 	import InstallSlice from './InstallSlice.svelte'
 	import PreviewRiceSlice from './PreviewRiceSlice.svelte'
+	import { onMount } from 'svelte'
+
+	onMount(() => {
+		console.log('Billions must tile')
+	})
 </script>
 
 <svelte:head>
@@ -14,7 +19,7 @@
 
 <Hero />
 
-<div class="-mt-8 gap-20 md:gap-[16rem] flex flex-col items-center">
+<div class="-mt-8 flex flex-col items-center gap-20 md:gap-[16rem]">
 	<PreviewRiceSlice class="mb-12" />
 
 	<FeaturesSlice />

src/routes/Hero.svelte

@@ -5,6 +5,7 @@
 	import { onMount } from 'svelte'
 	// import Firefly from './Firefly.svelte'
 	import { inview } from 'svelte-inview'
+	import HeroBackground from './HeroBackground.svelte'
 
 	let isVisible = true
 	let isMobile = false
@@ -51,6 +52,10 @@
 		</div>
 	</div>
 
+	<div class="absolute inset-0">
+		<HeroBackground />
+	</div>
+
 	<!-- Fireflies -->
 	<!-- {#if isVisible}
 		<div

src/routes/HeroBackground.svelte

@@ -0,0 +1,177 @@
+<script>
+	import baseColors from 'tailwindcss/colors'
+
+	const amountTiles = 4 // Has to be an even number as the tiles get "mirrored"
+	const workspaceHeight = 150
+	const gapLength = 24
+	const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
+	const leftColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
+	const rightColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
+	const leftTotalLength = leftColumns
+		.slice(0, leftColumns.length / 2)
+		.reduce((total, current, index, array) => total + workspaceHeight + gapLength, 0)
+
+	function generateRow(amount) {
+		const base = Array.from({ length: amount }).map(generateWorkspace)
+		// For the effect to work, the items need to be duplicated
+		return [...base, ...base]
+	}
+
+	function generateWorkspace() {
+		return [
+			generateTiles(),
+			Math.random() > 0.4 ? generateTiles() : false,
+			Math.random() > 0.7 ? generateTiles() : false
+		].filter(Boolean)
+	}
+
+	function generateTiles() {
+		const result = Math.random() > 0.5 ? [getRandomColor()] : [getRandomColor(), getRandomColor()]
+
+		return result
+	}
+
+	function getRandomColor() {
+		return colors.at(Math.floor(Math.random() * colors.length))
+	}
+</script>
+
+<div class="wrapper" aria-hidden="true">
+	<div
+		class="inner-wrapper"
+		style={`--amount: ${amountTiles}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px;`}
+	>
+		<div class="columns left" style={`--length: ${leftTotalLength}; `}>
+			{#each leftColumns as column}
+				<div class="column">
+					{#each column as workspace}
+						<div class="workspace">
+							{#each workspace as tiles}
+								<div class="tiles">
+									{#each tiles as tile}
+										<div class="tile" style:--color={tile}></div>
+									{/each}
+								</div>
+							{/each}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+
+		<div class="columns right" style={`--length: ${leftTotalLength}; `}>
+			{#each rightColumns as column}
+				<div class="column">
+					{#each column as workspace}
+						<div class="workspace">
+							{#each workspace as tiles}
+								<div class="tiles">
+									{#each tiles as tile}
+										<div class="tile" style:--color={tile}></div>
+									{/each}
+								</div>
+							{/each}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.left {
+		transform: rotateY(10deg);
+		mask-image: linear-gradient(to right, black, transparent);
+		/* margin-left: -2200px; */
+	}
+	.right {
+		transform: rotateY(-10deg);
+		/* margin-left: -2200px; */
+	}
+
+	.wrapper {
+		width: 100vw;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		/* margin-top: -200px; */
+	}
+
+	.inner-wrapper {
+		position: absolute;
+		perspective: 100px;
+		height: 100%;
+		width: max(100vw, 1100px);
+		/* translate: -50% 0px; */
+		/* overflow: visible; */
+		contain: strict;
+		display: flex;
+		border: red solid 1px;
+		mask-image: radial-gradient(circle, transparent 10%, black 50%);
+	}
+
+	.columns {
+		display: flex;
+		gap: 2rem;
+		flex-grow: 1;
+		mask-image: linear-gradient(to top, transparent 10%, black);
+		/* border: cyan solid 1px; */
+	}
+
+	.column {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+		animation: loop 20s infinite linear;
+		gap: var(--workspace-gap);
+		/* width: 400px; */
+	}
+
+	.workspace {
+		display: flex;
+		gap: 8px;
+		height: var(--workspace-height);
+		width: 100%;
+		/* border: red solid 1px; */
+	}
+
+	.tiles {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		flex-grow: 1;
+		/* border: blue 1px solid; */
+	}
+
+	.tile {
+		border: var(--color) 1px solid;
+		flex-grow: 1;
+		height: var(--height);
+		border-radius: 12px;
+		pointer-events: auto;
+		transition: all 140ms ease-in-out;
+
+		&:hover {
+			animation: flicker infinite 800ms;
+		}
+	}
+
+	@keyframes loop {
+		100% {
+			translate: 0px calc(-1px * var(--length));
+		}
+	}
+
+	@keyframes flicker {
+		0% {
+			background: mix-color(var(--color), transparent 0%);
+		}
+		100% {
+			background: var(--color);
+			box-shadow: 0px 0px 10px var(--color);
+		}
+	}
+</style>