0x785efa38…5e0bsent to0x6a4aa35b…a79e·#23,976,891·view on Etherscan
<!doctype html><html><head><meta charset="utf-8"><title>shards</title><style>
:root {
/* Pattern 1: 7 bands */
--color1: #bb44dd;
--color2: #000;
--pos1: 0%;
--pos2: 8.33%;
--pos3: 25%;
--pos4: 41.67%;
--pos5: 58.33%;
--pos6: 75%;
--pos7: 91.67%;
/* Pattern 2: 5 bands */
--color2-1: #6486f5;
--color2-2: #000;
--pos2-1: 0%;
--pos2-2: 12.5%;
--pos2-3: 37.5%;
--pos2-4: 62.5%;
--pos2-5: 87.5%;
/* Pattern 3: 3 bands */
--color3-1: #ffffff;
--color3-2: #000;
--color4-1: #ff00cc;
--color4-2: #000;
--pos3-1: 0%;
--pos3-2: 50%;
--pos3-3: 100%;
}
body {
background-color: black;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.gradient-container {
position: absolute;
overflow: hidden;
transition: all 0.3s ease;
clip-path: var(--clip-path);
/* Emboss effect */
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4),
inset -2px -2px 5px rgba(0, 0, 0, 0.4);
/* Add more depth with a subtle border */
}
.gradient-up {
background-image: repeating-linear-gradient(
to bottom,
var(--color1) var(--pos1),
var(--color2) var(--pos2),
var(--color1) var(--pos3),
var(--color2) var(--pos4),
var(--color1) var(--pos5),
var(--color2) var(--pos6),
var(--color1) var(--pos7)
);
animation: moveUpwards 5s linear infinite;
}
.gradient-down {
background-image: repeating-linear-gradient(
to bottom,
var(--color2-1) var(--pos2-1),
var(--color2-2) var(--pos2-2),
var(--color2-1) var(--pos2-3),
var(--color2-2) var(--pos2-4),
var(--color2-1) var(--pos2-5)
);
animation: moveDownwards 5s linear infinite;
}
.gradient-left {
background-image: repeating-linear-gradient(
to right,
var(--color3-1) var(--pos3-1),
var(--color3-2) var(--pos3-2),
var(--color3-1) var(--pos3-3)
);
animation: moveLeft 5s linear infinite;
}
.gradient-right {
background-image: repeating-linear-gradient(
to right,
var(--color4-1) var(--pos1),
var(--color4-2) var(--pos2),
var(--color4-1) var(--pos3),
var(--color4-2) var(--pos4),
var(--color4-1) var(--pos5),
var(--color4-2) var(--pos6),
var(--color4-1) var(--pos7)
);
animation: moveRight 5s linear infinite;
}
.strobe {
background-color: #000;
}
@keyframes strobeEffect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes moveUpwards {
0% {
background-position: 0 100%;
}
100% {
background-position: 0 -100%;
}
}
@keyframes moveDownwards {
0% {
background-position: 0 -100%;
}
100% {
background-position: 0 100%;
}
}
@keyframes moveLeft {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@keyframes moveRight {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
:root{--color1:#B4ff00;--color2:#000;--pos1:0%;--pos2:8.33%;--pos3:25%;--pos4:41.67%;--pos5:58.33%;--pos6:75%;--pos7:91.67%;--color2-1:#400026;--color2-2:#000;--pos2-1:0%;--pos2-2:12.5%;--pos2-3:37.5%;--pos2-4:62.5%;--pos2-5:87.5%;--color3-1:#83a1cd;--color3-2:#000;--color4-1:#1d1d1d;--color4-2:#000;--pos3-1:0%;--pos3-2:50%;--pos3-3:100%;}:root{--color1: #B4ff00; --color2-1: #400026; --color3-1: #83a1cd; --color4-1: #1d1d1d;}</style></head><body style="margin:0;background-color:black;width:100vw;height:100vh;overflow:hidden;"><div id="puzzle-container"><div class="gradient-container gradient-left" data-x="0" data-y="0" data-width="0.51" data-height="0.13859999999999997" style="left: 0px; top: 0px; width: 169.32px; height: 46.0152px; --clip-path: polygon(0% 0%, 95% 0%, 86% 48%, 0% 101%); background-size: 338.64px 46.0152px; animation-duration: 4s;"></div><div class="gradient-container gradient-left" data-x="0" data-y="0.13859999999999997" data-width="0.51" data-height="0.4914" style="left: 0px; top: 46.0152px; width: 169.32px; height: 163.145px; --clip-path: polygon(0% 0%, 86% -15%, 106% 90%, 0% 84%); background-size: 338.64px 163.145px; animation-duration: 87s;"></div><div class="gradient-container gradient-right" data-x="0.51" data-y="0" data-width="0.3185" data-height="0.25055099999999997" style="left: 169.32px; top: 0px; width: 105.742px; height: 83.1829px; --clip-path: polygon(-8% 0%, 106% 0%, 90% 82%, -18% 131%); background-size: 211.484px 83.1829px; animation-duration: 84s;"></div><div class="gradient-container gradient-down" data-x="0.8285" data-y="0" data-width="0.1715" data-height="0.07767080999999998" style="left: 275.062px; top: 0px; width: 56.938px; height: 25.7867px; --clip-path: polygon(11% 0%, 100% 0%, 100% 193%, 32% 97%); background-size: 56.938px 51.5734px; animation-duration: 20s;"></div><div class="gradient-container gradient-up" data-x="0.8285" data-y="0.07767080999999998" data-width="0.1715" data-height="0.17288019" style="left: 275.062px; top: 25.7867px; width: 56.938px; height: 57.3962px; --clip-path: polygon(32% -1%, 100% 42%, 100% 106%, -18% 74%); background-size: 56.938px 114.792px; animation-duration: 78s;"></div><div class="gradient-container gradient-right" data-x="0.51" data-y="0.25055099999999997" data-width="0.316589" data-height="0.360549" style="left: 169.32px; top: 83.1829px; width: 105.108px; height: 119.702px; --clip-path: polygon(-18% 22%, 79% 12%, 87% 119%, -8% 111%); background-size: 210.215px 119.702px; animation-duration: 17s;"></div><div class="gradient-container gradient-up" data-x="0.826589" data-y="0.25055099999999997" data-width="0.129311" data-height="0.360549" style="left: 274.428px; top: 83.1829px; width: 42.9313px; height: 119.702px; --clip-path: polygon(-50% 12%, 56% 11%, 58% 110%, -32% 119%); background-size: 42.9313px 239.405px; animation-duration: 32s;"></div><div class="gradient-container gradient-right" data-x="0.9559" data-y="0.25055099999999997" data-width="0.04409999999999999" data-height="0.10095372000000001" style="left: 317.359px; top: 83.1829px; width: 14.6412px; height: 33.5166px; --clip-path: polygon(-130% 38%, 100% 10%, 100% 137%, -158% 49%); background-size: 29.2824px 33.5166px; animation-duration: 81s;"></div><div class="gradient-container gradient-down" data-x="0.9559" data-y="0.35150472" data-width="0.04409999999999999" data-height="0.25959528" style="left: 317.359px; top: 116.7px; width: 14.6412px; height: 86.1856px; --clip-path: polygon(-158% -20%, 100% 14%, 100% 79%, -123% 114%); background-size: 14.6412px 172.371px; animation-duration: 2s;"></div><div class="gradient-container gradient-down" data-x="0.51" data-y="0.6111" data-width="0.49000000000000005" data-height="0.018899999999999997" style="left: 169.32px; top: 202.885px; width: 162.68px; height: 6.2748px; --clip-path: polygon(-5% 212%, 100% -293%, 100% 233%, 6% -159%); background-size: 162.68px 12.5496px; animation-duration: 100s;"></div><div class="gradient-container gradient-down" data-x="0" data-y="0.63" data-width="0.4" data-height="0.37" style="left: 0px; top: 209.16px; width: 132.8px; height: 122.84px; --clip-path: polygon(0% -21%, 83% -4%, 99% 100%, 0% 100%); background-size: 132.8px 245.68px; animation-duration: 64s;"></div><div class="gradient-container gradient-down" data-x="0.4" data-y="0.63" data-width="0.54" data-height="0.37" style="left: 132.8px; top: 209.16px; width: 179.28px; height: 122.84px; --clip-path: polygon(-13% -4%, 89% -5%, 96% 100%, -1% 100%); background-size: 179.28px 245.68px; animation-duration: 79s;"></div><div class="gradient-container gradient-down" data-x="0.9400000000000002" data-y="0.63" data-width="0.05999999999999996" data-height="0.2553" style="left: 312.08px; top: 209.16px; width: 19.92px; height: 84.7596px; --clip-path: polygon(-100% -7%, 100% 10%, 100% 107%, 78% 82%); background-size: 19.92px 169.519px; animation-duration: 77s;"></div><div class="gradient-container gradient-left" data-x="0.9400000000000002" data-y="0.8853" data-width="0.015599999999999989" data-height="0.055056" style="left: 312.08px; top: 293.92px; width: 5.1792px; height: 18.2786px; --clip-path: polygon(302% -85%, -148% -10%, -390% 165%, 72% 35%); background-size: 10.3584px 18.2786px; animation-duration: 62s;"></div><div class="gradient-container gradient-right" data-x="0.9556000000000001" data-y="0.8853" data-width="0.044399999999999974" data-height="0.055056" style="left: 317.259px; top: 293.92px; width: 14.7408px; height: 18.2786px; --clip-path: polygon(-87% -10%, 100% 32%, 100% 86%, -172% 165%); background-size: 29.4816px 18.2786px; animation-duration: 39s;"></div><div class="gradient-container gradient-left" data-x="0.9400000000000002" data-y="0.940356" data-width="0.007199999999999995" data-height="0.059643999999999996" style="left: 312.08px; top: 312.198px; width: 2.3904px; height: 19.8018px; --clip-path: polygon(156% -60%, 283% -90%, 744% 100%, -330% 100%); background-size: 4.7808px 19.8018px; animation-duration: 79s;"></div><div class="gradient-container gradient-left" data-x="0.9472000000000002" data-y="0.940356" data-width="0.052799999999999965" data-height="0.059643999999999996" style="left: 314.47px; top: 312.198px; width: 17.5296px; height: 19.8018px; --clip-path: polygon(25% -90%, 100% -13%, 100% 100%, 88% 100%); background-size: 35.0592px 19.8018px; animation-duration: 93s;"></div></div><script>function layoutShards(){var vw=window.innerWidth;var vh=window.innerHeight;document.querySelectorAll(".gradient-container").forEach(function(div){var x=parseFloat(div.dataset.x||0);var y=parseFloat(div.dataset.y||0);var w=parseFloat(div.dataset.width||0);var h=parseFloat(div.dataset.height||0);div.style.left=(x*vw)+"px";div.style.top=(y*vh)+"px";div.style.width=(w*vw)+"px";div.style.height=(h*vh)+"px";if(div.classList.contains("gradient-left")||div.classList.contains("gradient-right")){div.style.backgroundSize=(w*vw*2)+"px "+(h*vh)+"px";}else{div.style.backgroundSize=(w*vw)+"px "+(h*vh*2)+"px";}});}window.addEventListener("resize",layoutShards);window.addEventListener("load",layoutShards);layoutShards();</script></body></html>