0x1fb2c80a…ab76sent to0x6a4aa35b…a79e·#23,977,005·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:#FF00CC;--color2:#000;--pos1:0%;--pos2:8.33%;--pos3:25%;--pos4:41.67%;--pos5:58.33%;--pos6:75%;--pos7:91.67%;--color2-1:#FFFFFF;--color2-2:#000;--pos2-1:0%;--pos2-2:12.5%;--pos2-3:37.5%;--pos2-4:62.5%;--pos2-5:87.5%;--color3-1:#c6c6c6;--color3-2:#000;--color4-1:#00ffea;--color4-2:#000;--pos3-1:0%;--pos3-2:50%;--pos3-3:100%;}:root{--color1: #FF00CC; --color2-1: #FFFFFF; --color3-1: #c6c6c6; --color4-1: #00ffea;}</style></head><body style="margin:0;background-color:black;width:100vw;height:100vh;overflow:hidden;"><div id="puzzle-container"><div class="gradient-container gradient-up" data-x="0" data-y="0" data-width="0.2613996" data-height="0.3185" style="left: 0px; top: 0px; width: 95.410854px; height: 116.2525px; --clip-path: polygon(0% 0%, 88% 0%, 70% 122%, 0% 81%); background-size: 95.410854px 232.505px; animation-duration: 72s;"></div><div class="gradient-container gradient-right" data-x="0.2613996" data-y="0" data-width="0.1174404" data-height="0.3185" style="left: 95.410854px; top: 0px; width: 42.865746px; height: 116.2525px; --clip-path: polygon(-26% 0%, 112% 0%, 109% 111%, -67% 122%); background-size: 85.731492px 116.2525px; animation-duration: 60s;"></div><div class="gradient-container gradient-down" data-x="0.37884" data-y="0" data-width="0.25256" data-height="0.24842999999999998" style="left: 138.2766px; top: 0px; width: 92.1844px; height: 90.67695px; --clip-path: polygon(6% 0%, 115% 0%, 85% 91%, -19% 128%); background-size: 92.1844px 181.3539px; animation-duration: 96s;"></div><div class="gradient-container gradient-right" data-x="0.37884" data-y="0.24842999999999998" data-width="0.25256" data-height="0.07007000000000002" style="left: 138.2766px; top: 90.67695px; width: 92.1844px; height: 25.57555px; --clip-path: polygon(-19% 98%, 85% -34%, 124% 155%, 4% 151%); background-size: 184.3688px 25.57555px; animation-duration: 27s;"></div><div class="gradient-container gradient-left" data-x="0.6314000000000001" data-y="0" data-width="0.1386" data-height="0.1364454" style="left: 230.461px; top: 0px; width: 50.589px; height: 49.802571px; --clip-path: polygon(27% 0%, 47% 0%, 111% 104%, -3% 119%); background-size: 101.178px 49.802571px; animation-duration: 14s;"></div><div class="gradient-container gradient-down" data-x="0.6314000000000001" data-y="0.1364454" data-width="0.1386" data-height="0.13109459999999998" style="left: 230.461px; top: 49.802571px; width: 50.589px; height: 47.849529px; --clip-path: polygon(-3% 19%, 111% 4%, 152% 88%, -2% 75%); background-size: 50.589px 95.699058px; animation-duration: 94s;"></div><div class="gradient-container gradient-down" data-x="0.6314000000000001" data-y="0.26754" data-width="0.1386" data-height="0.05096000000000002" style="left: 230.461px; top: 97.6521px; width: 50.589px; height: 18.6004px; --clip-path: polygon(-2% -64%, 152% -30%, 156% 127%, 45% 176%); background-size: 50.589px 37.2008px; animation-duration: 51s;"></div><div class="gradient-container gradient-right" data-x="0" data-y="0.3185" data-width="0.0077" data-height="0.5619249999999999" style="left: 0px; top: 116.2525px; width: 2.8105px; height: 205.102625px; --clip-path: polygon(0% -10%, 100% -4%, 100% 97%, 0% 95%); background-size: 5.621px 205.102625px; animation-duration: 39s;"></div><div class="gradient-container gradient-left" data-x="0" data-y="0.8804249999999998" data-width="0.0077" data-height="0.029575000000000053" style="left: 0px; top: 321.355125px; width: 2.8105px; height: 10.794875px; --clip-path: polygon(0% -101%, 100% -50%, 100% 353%, 0% -67%); background-size: 5.621px 10.794875px; animation-duration: 23s;"></div><div class="gradient-container gradient-up" data-x="0.0077" data-y="0.3185" data-width="0.419265" data-height="0.5914999999999999" style="left: 2.8105px; top: 116.2525px; width: 153.031725px; height: 215.8975px; --clip-path: polygon(0% -4%, 111% -2%, 103% 96%, 0% 113%); background-size: 153.031725px 431.795px; animation-duration: 56s;"></div><div class="gradient-container gradient-right" data-x="0.426965" data-y="0.3185" data-width="0.3430350000000001" data-height="0.5914999999999999" style="left: 155.842225px; top: 116.2525px; width: 125.207775px; height: 215.8975px; --clip-path: polygon(13% -2%, 122% 2%, 117% 88%, 3% 96%); background-size: 250.41555px 215.8975px; animation-duration: 85s;"></div><div class="gradient-container gradient-right" data-x="0.77" data-y="0" data-width="0.22999999999999998" data-height="0.42260400000000004" style="left: 281.05px; top: 0px; width: 83.95px; height: 154.25046px; --clip-path: polygon(-32% 0%, 100% 0%, 100% 103%, -19% 84%); background-size: 167.9px 154.25046px; animation-duration: 3s;"></div><div class="gradient-container gradient-down" data-x="0.77" data-y="0.42260400000000004" data-width="0.22999999999999998" data-height="0.21239764000000003" style="left: 281.05px; top: 154.25046px; width: 83.95px; height: 77.525139px; --clip-path: polygon(-19% -31%, 100% 6%, 100% 105%, 8% 63%); background-size: 83.95px 155.050277px; animation-duration: 86s;"></div><div class="gradient-container gradient-left" data-x="0.77" data-y="0.63500164" data-width="0.22999999999999998" data-height="0.14759835999999998" style="left: 281.05px; top: 231.775599px; width: 83.95px; height: 53.873401px; --clip-path: polygon(8% -54%, 100% 8%, 100% 91%, -28% 144%); background-size: 167.9px 53.873401px; animation-duration: 93s;"></div><div class="gradient-container gradient-up" data-x="0.77" data-y="0.7826" data-width="0.22999999999999998" data-height="0.12739999999999993" style="left: 281.05px; top: 285.649px; width: 83.95px; height: 46.501px; --clip-path: polygon(-28% 51%, 100% -10%, 100% 51%, 25% 46%); background-size: 83.95px 93.002px; animation-duration: 63s;"></div><div class="gradient-container gradient-right" data-x="0" data-y="0.9099999999999999" data-width="0.36000000000000004" data-height="0.09000000000000007" style="left: 0px; top: 332.15px; width: 131.4px; height: 32.85px; --clip-path: polygon(0% -55%, 78% -24%, 109% 100%, 0% 100%); background-size: 262.8px 32.85px; animation-duration: 78s;"></div><div class="gradient-container gradient-right" data-x="0.36000000000000004" data-y="0.9099999999999999" data-width="0.64" data-height="0.09000000000000007" style="left: 131.4px; top: 332.15px; width: 233.6px; height: 32.85px; --clip-path: polygon(-12% -24%, 100% -69%, 100% 100%, 5% 100%); background-size: 467.2px 32.85px; animation-duration: 69s;"></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>