mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 02:45:59 +01:00
new hero effect experiment
This commit is contained in:
parent
a7bf1e76b0
commit
c99abd6823
3 changed files with 188 additions and 1 deletions
|
@ -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 />
|
||||
|
|
|
@ -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
177
src/routes/HeroBackground.svelte
Executable 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>
|
Loading…
Reference in a new issue