.elementor-462 .elementor-element.elementor-element-2b2e7c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-462 .elementor-element.elementor-element-18bb143{--display:flex;}/* Start custom CSS for html, class: .elementor-element-3b43144 */.slice-wrap {
  width: 100%;
  max-width: 900px;
  height: 600px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.slice-piece {
  position: absolute;
  left: 0;
  width: 100%;
  background-image: url(https://www.framearchive.it/wp-content/uploads/2026/02/0300229.png);
  background-size: cover;
  background-repeat: no-repeat;
  animation: glitch 4s infinite steps(1);
}

@keyframes glitch {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-12px); }
  80% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}



<div class="slice-wrap"></div>

<style>
.slice-wrap {
  position: fixed;        /* sempre in alto a sinistra */
  top: 40px;
  left: 40px;

  width: 280px;           /* più piccolo */
  height: 360px;

  overflow: hidden;
  background: #000;
}

.slice-piece {
  position: absolute;
  left: 0;
  width: 100%;
  background-image: url("https://www.framearchive.it/wp-content/uploads/2026/01/01.-Ashley-scaled.jpg"); /* CAMBIA */
  background-size: cover;
  background-repeat: no-repeat;
}

.moving {
  animation: glitch 3s infinite steps(1);
}

@keyframes glitch {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-14px); }
  100% { transform: translateX(0); }
}
</style>

<script>
const container = document.querySelector(".slice-wrap");
const slices = 25;
const movingIndex = Math.floor(Math.random() * slices); // solo una slice si muove

for(let i = 0; i < slices; i++){
  const div = document.createElement("div");
  div.classList.add("slice-piece");

  const top = (i * 100) / slices;
  const height = 100 / slices;

  div.style.top = top + "%";
  div.style.height = height + "%";
  div.style.backgroundPosition = `0% ${top}%`;

  if(i === movingIndex){
    div.classList.add("moving");
  }

  container.appendChild(div);
}
</script>/* End custom CSS */