0x10a1d8fb…cd16sent to0x6a4aa35b…a79e·#23,978,736·0x3a720140…63ea9d
<!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:#83a1cd;--color2:#000;--pos1:0%;--pos2:8.33%;--pos3:25%;--pos4:41.67%;--pos5:58.33%;--pos6:75%;--pos7:91.67%;--color2-1:#783f7d;--color2-2:#000;--pos2-1:0%;--pos2-2:12.5%;--pos2-3:37.5%;--pos2-4:62.5%;--pos2-5:87.5%;--color3-1:#B4ff00;--color3-2:#000;--color4-1:#00ffea;--color4-2:#000;--pos3-1:0%;--pos3-2:50%;--pos3-3:100%;}:root{--color1: #83a1cd; --color2-1: #783f7d; --color3-1: #B4ff00; --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-left" data-x="0" data-y="0" data-width="0.218416" data-height="0.3135" style="left: 0px; top: 0px; width: 79.72184px; height: 114.4275px; --clip-path: polygon(0% 0%, 88% 0%, 98% 107%, 0% 94%); background-size: 159.44368px 114.4275px; animation-duration: 97s;"></div><div class="gradient-container gradient-left" data-x="0" data-y="0.3135" data-width="0.218416" data-height="0.25650000000000006" style="left: 0px; top: 114.4275px; width: 79.72184px; height: 93.6225px; --clip-path: polygon(0% -7%, 98% 9%, 79% 79%, 0% 129%); background-size: 159.44368px 93.6225px; animation-duration: 61s;"></div><div class="gradient-container gradient-right" data-x="0.218416" data-y="0" data-width="0.423984" data-height="0.275652" style="left: 79.72184px; top: 0px; width: 154.75416px; height: 100.61298px; --clip-path: polygon(-6% 0%, 84% 0%, 106% 105%, -6% 79%); background-size: 309.50832px 100.61298px; animation-duration: 2s;"></div><div class="gradient-container gradient-right" data-x="0.218416" data-y="0.275652" data-width="0.423984" data-height="0.254448" style="left: 79.72184px; top: 100.61298px; width: 154.75416px; height: 92.87352px; --clip-path: polygon(-6% -22%, 106% 6%, 111% 95%, -13% 94%); background-size: 309.50832px 92.87352px; animation-duration: 92s;"></div><div class="gradient-container gradient-down" data-x="0.218416" data-y="0.5301" data-width="0.25439040000000007" data-height="0.03990000000000001" style="left: 79.72184px; top: 193.4865px; width: 92.852496px; height: 14.5635px; --clip-path: polygon(-22% -39%, 104% -157%, 131% 180%, -18% -32%); background-size: 92.852496px 29.127px; animation-duration: 94s;"></div><div class="gradient-container gradient-right" data-x="0.47280640000000007" data-y="0.5301" data-width="0.16959359999999998" data-height="0.03990000000000001" style="left: 172.574336px; top: 193.4865px; width: 61.901664px; height: 14.5635px; --clip-path: polygon(6% -157%, 126% -35%, 139% 100%, 47% 180%); background-size: 123.803328px 14.5635px; animation-duration: 16s;"></div><div class="gradient-container gradient-up" data-x="0.6424" data-y="0" data-width="0.08759999999999997" data-height="0.2508" style="left: 234.476px; top: 0px; width: 31.974px; height: 91.542px; --clip-path: polygon(-78% 0%, 124% 0%, 33% 82%, 6% 72%); background-size: 31.974px 183.084px; animation-duration: 76s;"></div><div class="gradient-container gradient-left" data-x="0.6424" data-y="0.2508" data-width="0.08759999999999997" data-height="0.0560196" style="left: 234.476px; top: 91.542px; width: 31.974px; height: 20.447154px; --clip-path: polygon(6% -124%, 33% -82%, 100% 78%, 17% 164%); background-size: 63.948px 20.447154px; animation-duration: 20s;"></div><div class="gradient-container gradient-up" data-x="0.6424" data-y="0.30681959999999997" data-width="0.08759999999999997" data-height="0.15146040000000002" style="left: 234.476px; top: 111.989154px; width: 31.974px; height: 55.283046px; --clip-path: polygon(17% 24%, 100% -8%, 14% 82%, -88% 124%); background-size: 31.974px 110.566092px; animation-duration: 87s;"></div><div class="gradient-container gradient-left" data-x="0.6424" data-y="0.45828" data-width="0.08759999999999997" data-height="0.0960792" style="left: 234.476px; top: 167.2722px; width: 31.974px; height: 35.068908px; --clip-path: polygon(-88% 37%, 14% -29%, 139% 53%, 0% 106%); background-size: 63.948px 35.068908px; animation-duration: 100s;"></div><div class="gradient-container gradient-up" data-x="0.6424" data-y="0.5543591999999999" data-width="0.08759999999999997" data-height="0.015640799999999996" style="left: 234.476px; top: 202.341108px; width: 31.974px; height: 5.708892px; --clip-path: polygon(0% 38%, 139% -286%, 70% 368%, 76% 99%); background-size: 31.974px 11.417784px; animation-duration: 13s;"></div><div class="gradient-container gradient-left" data-x="0" data-y="0.5700000000000001" data-width="0.73" data-height="0.43" style="left: 0px; top: 208.05px; width: 266.45px; height: 156.95px; --clip-path: polygon(0% 17%, 96% 10%, 99% 100%, 0% 100%); background-size: 532.9px 156.95px; animation-duration: 17s;"></div><div class="gradient-container gradient-left" data-x="0.73" data-y="0" data-width="0.27" data-height="0.18999999999999997" style="left: 266.45px; top: 0px; width: 98.55px; height: 69.35px; --clip-path: polygon(8% 0%, 100% 0%, 100% 103%, -12% 137%); background-size: 197.1px 69.35px; animation-duration: 30s;"></div><div class="gradient-container gradient-down" data-x="0.73" data-y="0.18999999999999997" data-width="0.27" data-height="0.081" style="left: 266.45px; top: 69.35px; width: 98.55px; height: 29.565px; --clip-path: polygon(-12% 87%, 100% 8%, 100% 47%, 8% 96%); background-size: 98.55px 59.13px; animation-duration: 75s;"></div><div class="gradient-container gradient-right" data-x="0.73" data-y="0.27099999999999996" data-width="0.27" data-height="0.6269399999999999" style="left: 266.45px; top: 98.915px; width: 98.55px; height: 228.8331px; --clip-path: polygon(8% 0%, 100% -7%, 100% 105%, 28% 107%); background-size: 197.1px 228.8331px; animation-duration: 91s;"></div><div class="gradient-container gradient-right" data-x="0.73" data-y="0.89794" data-width="0.23220000000000005" data-height="0.10206000000000001" style="left: 266.45px; top: 327.7481px; width: 84.753px; height: 37.2519px; --clip-path: polygon(33% 41%, 81% 3%, 77% 100%, -4% 100%); background-size: 169.506px 37.2519px; animation-duration: 90s;"></div><div class="gradient-container gradient-down" data-x="0.9621999999999999" data-y="0.89794" data-width="0.03779999999999999" data-height="0.07246260000000002" style="left: 351.203px; top: 327.7481px; width: 13.797px; height: 26.448849px; --clip-path: polygon(-114% 4%, 100% 42%, 100% 137%, -12% 171%); background-size: 13.797px 52.897698px; animation-duration: 62s;"></div><div class="gradient-container gradient-down" data-x="0.9621999999999999" data-y="0.9704025999999999" data-width="0.03779999999999999" data-height="0.0295974" style="left: 351.203px; top: 354.196949px; width: 13.797px; height: 10.803051px; --clip-path: polygon(-12% 173%, 100% 92%, 100% 100%, -143% 100%); background-size: 13.797px 21.606102px; animation-duration: 95s;"></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>