0xc83e8367…2c22sent to0x6a4aa35b…a79e·#23,879,355·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:#00103f;--color2:#000;--pos1:0%;--pos2:8.33%;--pos3:25%;--pos4:41.67%;--pos5:58.33%;--pos6:75%;--pos7:91.67%;--color2-1:#c6c6c6;--color2-2:#000;--pos2-1:0%;--pos2-2:12.5%;--pos2-3:37.5%;--pos2-4:62.5%;--pos2-5:87.5%;--color3-1:#FFFFFF;--color3-2:#000;--color4-1:#FFFFFF;--color4-2:#000;--pos3-1:0%;--pos3-2:50%;--pos3-3:100%;}:root{--color1: #00103f; --color2-1: #c6c6c6; --color3-1: #FFFFFF; --color4-1: #FFFFFF;}</style></head><body style="margin:0;background-color:black;width:100vw;height:100vh;overflow:hidden;"><div id="puzzle-container"><div class="gradient-container gradient-right" data-x="0" data-y="0" data-width="0.31" data-height="0.5162" style="left: 0px; top: 0px; width: 172.05px; height: 287.5234px; --clip-path: polygon(0% 0%, 111% 0%, 104% 113%, 0% 102%); background-size: 344.1px 287.5234px; animation-duration: 70s;"></div><div class="gradient-container gradient-left" data-x="0" data-y="0.5162" data-width="0.18910000000000002" data-height="0.06380000000000004" style="left: 0px; top: 287.5234px; width: 104.9505px; height: 35.5366px; --clip-path: polygon(0% 15%, 80% 91%, 141% 22%, 0% 172%); background-size: 209.901px 35.5366px; animation-duration: 14s;"></div><div class="gradient-container gradient-up" data-x="0.18910000000000002" data-y="0.5162" data-width="0.028326870000000004" data-height="0.06380000000000004" style="left: 104.9505px; top: 287.5234px; width: 15.721413px; height: 35.5366px; --clip-path: polygon(-136% 91%, 84% -84%, -13% 173%, 274% 22%); background-size: 15.721413px 71.0732px; animation-duration: 27s;"></div><div class="gradient-container gradient-left" data-x="0.21742687000000002" data-y="0.5162" data-width="0.05751213000000001" data-height="0.06380000000000004" style="left: 120.671913px; top: 287.5234px; width: 31.919232px; height: 35.5366px; --clip-path: polygon(-8% -84%, 36% 50%, 199% 88%, -55% 173%); background-size: 63.838464px 35.5366px; animation-duration: 79s;"></div><div class="gradient-container gradient-up" data-x="0.27493900000000004" data-y="0.5162" data-width="0.035061" data-height="0.026158000000000015" style="left: 152.591145px; top: 287.5234px; width: 19.458855px; height: 14.570006px; --clip-path: polygon(-105% 122%, 133% 257%, 88% -48%, 172% -143%); background-size: 19.458855px 29.140012px; animation-duration: 43s;"></div><div class="gradient-container gradient-left" data-x="0.27493900000000004" data-y="0.542358" data-width="0.035061" data-height="0.03764200000000003" style="left: 152.591145px; top: 302.093406px; width: 19.458855px; height: 20.966594px; --clip-path: polygon(172% -169%, 88% -103%, 270% -25%, 163% 80%); background-size: 38.91771px 20.966594px; animation-duration: 44s;"></div><div class="gradient-container gradient-left" data-x="0.31" data-y="0" data-width="0.69" data-height="0.58" style="left: 172.05px; top: 0px; width: 382.95px; height: 323.06px; --clip-path: polygon(5% 0%, 100% 0%, 100% 88%, 9% 92%); background-size: 765.9px 323.06px; animation-duration: 40s;"></div><div class="gradient-container gradient-right" data-x="0" data-y="0.58" data-width="0.8" data-height="0.42" style="left: 0px; top: 323.06px; width: 444px; height: 233.94px; --clip-path: polygon(0% 11%, 92% 3%, 105% 100%, 0% 100%); background-size: 888px 233.94px; animation-duration: 8s;"></div><div class="gradient-container gradient-left" data-x="0.8" data-y="0.58" data-width="0.12" data-height="0.05879999999999999" style="left: 444px; top: 323.06px; width: 66.6px; height: 32.7516px; --clip-path: polygon(-50% 19%, 83% 73%, 157% 92%, 26% 161%); background-size: 133.2px 32.7516px; animation-duration: 27s;"></div><div class="gradient-container gradient-down" data-x="0.92" data-y="0.58" data-width="0.061600000000000016" data-height="0.05879999999999999" style="left: 510.6px; top: 323.06px; width: 34.188px; height: 32.7516px; --clip-path: polygon(-32% 73%, 224% -122%, 190% 109%, 111% 92%); background-size: 34.188px 65.5032px; animation-duration: 99s;"></div><div class="gradient-container gradient-up" data-x="0.9816" data-y="0.58" data-width="0.018399999999999993" data-height="0.027635999999999994" style="left: 544.788px; top: 323.06px; width: 10.212px; height: 15.393252px; --clip-path: polygon(415% -260%, 100% -254%, 100% 28%, 92% 2%); background-size: 10.212px 30.786504px; animation-duration: 24s;"></div><div class="gradient-container gradient-right" data-x="0.9816" data-y="0.6076360000000001" data-width="0.018399999999999993" data-height="0.031164" style="left: 544.788px; top: 338.453252px; width: 10.212px; height: 17.358348px; --clip-path: polygon(92% -87%, 100% -64%, 100% -130%, 302% 117%); background-size: 20.424px 17.358348px; animation-duration: 100s;"></div><div class="gradient-container gradient-right" data-x="0.8" data-y="0.6388" data-width="0.0801" data-height="0.007224" style="left: 444px; top: 355.8116px; width: 44.4555px; height: 4.023768px; --clip-path: polygon(39% 500%, 64% 965%, 41% -75%, -21% 987%); background-size: 88.911px 4.023768px; animation-duration: 31s;"></div><div class="gradient-container gradient-up" data-x="0.8801000000000001" data-y="0.6388" data-width="0.09790000000000001" data-height="0.007224" style="left: 488.4555px; top: 355.8116px; width: 54.3345px; height: 4.023768px; --clip-path: polygon(-29% 965%, 153% -207%, 182% -741%, -48% -75%); background-size: 54.3345px 8.047536px; animation-duration: 84s;"></div><div class="gradient-container gradient-up" data-x="0.978" data-y="0.6388" data-width="0.002199999999999999" data-height="0.007224" style="left: 542.79px; top: 355.8116px; width: 1.221px; height: 4.023768px; --clip-path: polygon(2372% -207%, 373% -621%, 1822% 233%, 3633% -741%); background-size: 1.221px 8.047536px; animation-duration: 38s;"></div><div class="gradient-container gradient-right" data-x="0.9802" data-y="0.6388" data-width="0.019799999999999988" data-height="0.007224" style="left: 544.011px; top: 355.8116px; width: 10.989px; height: 4.023768px; --clip-path: polygon(30% -621%, 100% -993%, 100% 998%, 191% 233%); background-size: 21.978px 4.023768px; animation-duration: 12s;"></div><div class="gradient-container gradient-up" data-x="0.8" data-y="0.646024" data-width="0.2" data-height="0.353976" style="left: 444px; top: 359.835368px; width: 111px; height: 197.164632px; --clip-path: polygon(-9% 18%, 100% 18%, 100% 100%, 19% 100%); background-size: 111px 394.329264px; animation-duration: 69s;"></div></div></body></html>