new hero effect experiment

This commit is contained in:
Christofer 2023-09-04 22:54:16 +04:00
parent a7bf1e76b0
commit c99abd6823
3 changed files with 188 additions and 1 deletions

View file

@ -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 />

View file

@ -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

177
src/routes/HeroBackground.svelte Executable file
View file

@ -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>