# Punched cards

> Rows of sixties computer punch cards travel through a reader while a cold light shines through their holes.

- Category: [Backgrounds](https://library.aimran.es/components/patterns)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/pt-uvq16-punch-cards
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Before screens, programs lived on cardboard. This background stacks tilted rows of manila punch cards with a colored header stripe and printed row guides, each one cut by a CSS mask that holds forty columns of rectangular holes. The rows slide in opposite directions and a band of light sweeps behind them, glowing through every hole. Pure HTML and CSS.

The first color is the card stock, the second the header stripe and the third the reader light. Density makes the cards smaller and fits more rows on screen. A strong pick for computing history, data platforms, archives and retro developer events.

## Code

### HTML

```html
<div class="pt-uvq16-punch-cards"><i class="lt"></i><div class="rws"><div class="rw" style="--t:34s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:48s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:62s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:41s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:55s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:34s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:48s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div></div>
```

### CSS

```css
.pt-uvq16-punch-cards {
  --c1: #efe2c0;
  --c2: #d1495b;
  --c3: #7dd3fc;
  --k: 1;
  /* velocidad */
  --d: 1;
  /* densidad / escala */
  --o: 1;
  /* opacidad */
  --bg: #05060a;
  --fg: #ffffff;
  --blend: screen;
  min-height: 100vh;
}

.pt-uvq16-punch-cards {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-punch-cards>* {
  opacity: var(--o);
}

.pt-uvq16-punch-cards {
  background: color-mix(in srgb,#101418 88%,var(--bg));
  font-size: calc(clamp(9px,2.1cqw,18px) / var(--d));
}

.pt-uvq16-punch-cards .lt {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 25%,color-mix(in srgb,var(--c3) 85%,transparent) 50%,transparent 75%);
  filter: blur(10px);
  animation: uvq16-pc-scan calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-punch-cards .rws {
  position: absolute;
  inset: -25% -15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3em;
  rotate: -9deg;
}

.pt-uvq16-punch-cards .rw {
  display: flex;
  gap: 1.1em;
  padding-right: 1.1em;
  width: max-content;
  animation: uvq16-pc-mv calc(var(--t) / var(--k)) linear infinite;
}

.pt-uvq16-punch-cards .rw:nth-child(even) {
  animation-direction: reverse;
}

.pt-uvq16-punch-cards .rw:nth-child(3n+2) {
  margin-left: -7em;
}

.pt-uvq16-punch-cards .rw i {
  flex: none;
  width: 15em;
  aspect-ratio: 300/132;
  background: linear-gradient(var(--c2) 0 6%,transparent 6%),repeating-linear-gradient(transparent 0 6.5%,rgba(90,70,40,.12) 6.5% 7.05%),linear-gradient(100deg,var(--c1),color-mix(in srgb,var(--c1) 88%,#8a7650));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
}

.pt-uvq16-punch-cards .rw i:nth-child(3n+2) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

.pt-uvq16-punch-cards .rw i:nth-child(3n) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

@keyframes uvq16-pc-mv {
  to {
    translate: -50% 0;
  }
}

@keyframes uvq16-pc-scan {
  from {
    translate: -55% 0;
  }
  to {
    translate: 55% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-punch-cards .rw,.pt-uvq16-punch-cards .lt {
    animation: none;
  }
}
```

### React

```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-uvq16-punch-cards {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-punch-cards>* {
  opacity: var(--o);
}

.pt-uvq16-punch-cards {
  background: color-mix(in srgb,#101418 88%,var(--bg));
  font-size: calc(clamp(9px,2.1cqw,18px) / var(--d));
}

.pt-uvq16-punch-cards .lt {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 25%,color-mix(in srgb,var(--c3) 85%,transparent) 50%,transparent 75%);
  filter: blur(10px);
  animation: uvq16-pc-scan calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-punch-cards .rws {
  position: absolute;
  inset: -25% -15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3em;
  rotate: -9deg;
}

.pt-uvq16-punch-cards .rw {
  display: flex;
  gap: 1.1em;
  padding-right: 1.1em;
  width: max-content;
  animation: uvq16-pc-mv calc(var(--t) / var(--k)) linear infinite;
}

.pt-uvq16-punch-cards .rw:nth-child(even) {
  animation-direction: reverse;
}

.pt-uvq16-punch-cards .rw:nth-child(3n+2) {
  margin-left: -7em;
}

.pt-uvq16-punch-cards .rw i {
  flex: none;
  width: 15em;
  aspect-ratio: 300/132;
  background: linear-gradient(var(--c2) 0 6%,transparent 6%),repeating-linear-gradient(transparent 0 6.5%,rgba(90,70,40,.12) 6.5% 7.05%),linear-gradient(100deg,var(--c1),color-mix(in srgb,var(--c1) 88%,#8a7650));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
}

.pt-uvq16-punch-cards .rw i:nth-child(3n+2) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

.pt-uvq16-punch-cards .rw i:nth-child(3n) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

@keyframes uvq16-pc-mv {
  to {
    translate: -50% 0;
  }
}

@keyframes uvq16-pc-scan {
  from {
    translate: -55% 0;
  }
  to {
    translate: 55% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-punch-cards .rw,.pt-uvq16-punch-cards .lt {
    animation: none;
  }
}

`;

export default function PatternUvq16PunchCards() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-uvq16-punch-cards"
        style={{
          "--c1": "#efe2c0",
          "--c2": "#d1495b",
          "--c3": "#7dd3fc",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <i className="lt"></i><div className="rws"><div className="rw" style={{ "--t": "34s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "48s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "62s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "41s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "55s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "34s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "48s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Punched cards” block (Backgrounds) from AIMRAN Library to my project.

## What it is
Rows of sixties computer punch cards travel through a reader while a cold light shines through their holes.

## Chosen settings
- Color 1: #efe2c0
- Color 2: #d1495b
- Color 3: #7dd3fc
- Speed: 1x (from 0.2 to 3x)
- Density / scale: 1x (from 0.5 to 2x)
- Opacity: 1 (from 0.2 to 1)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-uvq16-punch-cards {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-punch-cards>* {
  opacity: var(--o);
}

.pt-uvq16-punch-cards {
  background: color-mix(in srgb,#101418 88%,var(--bg));
  font-size: calc(clamp(9px,2.1cqw,18px) / var(--d));
}

.pt-uvq16-punch-cards .lt {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 25%,color-mix(in srgb,var(--c3) 85%,transparent) 50%,transparent 75%);
  filter: blur(10px);
  animation: uvq16-pc-scan calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-punch-cards .rws {
  position: absolute;
  inset: -25% -15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3em;
  rotate: -9deg;
}

.pt-uvq16-punch-cards .rw {
  display: flex;
  gap: 1.1em;
  padding-right: 1.1em;
  width: max-content;
  animation: uvq16-pc-mv calc(var(--t) / var(--k)) linear infinite;
}

.pt-uvq16-punch-cards .rw:nth-child(even) {
  animation-direction: reverse;
}

.pt-uvq16-punch-cards .rw:nth-child(3n+2) {
  margin-left: -7em;
}

.pt-uvq16-punch-cards .rw i {
  flex: none;
  width: 15em;
  aspect-ratio: 300/132;
  background: linear-gradient(var(--c2) 0 6%,transparent 6%),repeating-linear-gradient(transparent 0 6.5%,rgba(90,70,40,.12) 6.5% 7.05%),linear-gradient(100deg,var(--c1),color-mix(in srgb,var(--c1) 88%,#8a7650));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%2068.8h3.2v6.4h-3.2ZM30.50%2059.5h3.2v6.4h-3.2ZM37.25%2031.6h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM50.75%2050.2h3.2v6.4h-3.2ZM50.75%2022.3h3.2v6.4h-3.2ZM50.75%2031.6h3.2v6.4h-3.2ZM57.50%2068.8h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2013.0h3.2v6.4h-3.2ZM84.50%2068.8h3.2v6.4h-3.2ZM84.50%2022.3h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%20106.0h3.2v6.4h-3.2ZM104.75%20115.3h3.2v6.4h-3.2ZM104.75%2040.9h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%20115.3h3.2v6.4h-3.2ZM111.50%2096.7h3.2v6.4h-3.2ZM118.25%2078.1h3.2v6.4h-3.2ZM131.75%2050.2h3.2v6.4h-3.2ZM131.75%20106.0h3.2v6.4h-3.2ZM131.75%2013.0h3.2v6.4h-3.2ZM138.50%2068.8h3.2v6.4h-3.2ZM138.50%2087.4h3.2v6.4h-3.2ZM138.50%20106.0h3.2v6.4h-3.2ZM145.25%20115.3h3.2v6.4h-3.2ZM145.25%2059.5h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM152.00%2013.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%2022.3h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM185.75%2096.7h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM192.50%2078.1h3.2v6.4h-3.2ZM199.25%2068.8h3.2v6.4h-3.2ZM206.00%2068.8h3.2v6.4h-3.2ZM206.00%20106.0h3.2v6.4h-3.2ZM206.00%2022.3h3.2v6.4h-3.2ZM212.75%2087.4h3.2v6.4h-3.2ZM212.75%2040.9h3.2v6.4h-3.2ZM212.75%2096.7h3.2v6.4h-3.2ZM219.50%2059.5h3.2v6.4h-3.2ZM219.50%2068.8h3.2v6.4h-3.2ZM219.50%2031.6h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM233.00%2096.7h3.2v6.4h-3.2ZM233.00%2050.2h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM239.75%2068.8h3.2v6.4h-3.2ZM246.50%2040.9h3.2v6.4h-3.2ZM246.50%2078.1h3.2v6.4h-3.2ZM246.50%20115.3h3.2v6.4h-3.2ZM253.25%2031.6h3.2v6.4h-3.2ZM253.25%2078.1h3.2v6.4h-3.2ZM253.25%2059.5h3.2v6.4h-3.2ZM260.00%2059.5h3.2v6.4h-3.2ZM266.75%2040.9h3.2v6.4h-3.2ZM266.75%2059.5h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%2068.8h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
}

.pt-uvq16-punch-cards .rw i:nth-child(3n+2) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM30.50%2040.9h3.2v6.4h-3.2ZM30.50%2013.0h3.2v6.4h-3.2ZM44.00%2059.5h3.2v6.4h-3.2ZM44.00%2096.7h3.2v6.4h-3.2ZM50.75%2096.7h3.2v6.4h-3.2ZM57.50%2059.5h3.2v6.4h-3.2ZM64.25%2068.8h3.2v6.4h-3.2ZM64.25%2078.1h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM71.00%2059.5h3.2v6.4h-3.2ZM71.00%2022.3h3.2v6.4h-3.2ZM91.25%20115.3h3.2v6.4h-3.2ZM98.00%2022.3h3.2v6.4h-3.2ZM104.75%2068.8h3.2v6.4h-3.2ZM104.75%2050.2h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2078.1h3.2v6.4h-3.2ZM118.25%20115.3h3.2v6.4h-3.2ZM125.00%2050.2h3.2v6.4h-3.2ZM125.00%2040.9h3.2v6.4h-3.2ZM138.50%2059.5h3.2v6.4h-3.2ZM138.50%2040.9h3.2v6.4h-3.2ZM138.50%2096.7h3.2v6.4h-3.2ZM145.25%20106.0h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM152.00%2050.2h3.2v6.4h-3.2ZM158.75%2022.3h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM165.50%20106.0h3.2v6.4h-3.2ZM165.50%2050.2h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM179.00%2022.3h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM185.75%20106.0h3.2v6.4h-3.2ZM192.50%20115.3h3.2v6.4h-3.2ZM192.50%2059.5h3.2v6.4h-3.2ZM192.50%2087.4h3.2v6.4h-3.2ZM199.25%2050.2h3.2v6.4h-3.2ZM199.25%2013.0h3.2v6.4h-3.2ZM212.75%2059.5h3.2v6.4h-3.2ZM212.75%2050.2h3.2v6.4h-3.2ZM219.50%2050.2h3.2v6.4h-3.2ZM219.50%2096.7h3.2v6.4h-3.2ZM226.25%2068.8h3.2v6.4h-3.2ZM239.75%2040.9h3.2v6.4h-3.2ZM239.75%2059.5h3.2v6.4h-3.2ZM239.75%20115.3h3.2v6.4h-3.2ZM246.50%2059.5h3.2v6.4h-3.2ZM246.50%2050.2h3.2v6.4h-3.2ZM246.50%2087.4h3.2v6.4h-3.2ZM253.25%20115.3h3.2v6.4h-3.2ZM253.25%2022.3h3.2v6.4h-3.2ZM260.00%2068.8h3.2v6.4h-3.2ZM266.75%2068.8h3.2v6.4h-3.2ZM273.50%2040.9h3.2v6.4h-3.2ZM280.25%2059.5h3.2v6.4h-3.2ZM280.25%2087.4h3.2v6.4h-3.2ZM280.25%20106.0h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

.pt-uvq16-punch-cards .rw i:nth-child(3n) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20300%20132'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%200H296Q300%200%20300%204V128Q300%20132%20296%20132H4Q0%20132%200%20128V16ZM23.75%2068.8h3.2v6.4h-3.2ZM23.75%2013.0h3.2v6.4h-3.2ZM30.50%20106.0h3.2v6.4h-3.2ZM37.25%2013.0h3.2v6.4h-3.2ZM37.25%2050.2h3.2v6.4h-3.2ZM37.25%2078.1h3.2v6.4h-3.2ZM44.00%2068.8h3.2v6.4h-3.2ZM44.00%2050.2h3.2v6.4h-3.2ZM44.00%2013.0h3.2v6.4h-3.2ZM57.50%2087.4h3.2v6.4h-3.2ZM64.25%2096.7h3.2v6.4h-3.2ZM64.25%2040.9h3.2v6.4h-3.2ZM64.25%2087.4h3.2v6.4h-3.2ZM71.00%2096.7h3.2v6.4h-3.2ZM71.00%2050.2h3.2v6.4h-3.2ZM71.00%2031.6h3.2v6.4h-3.2ZM77.75%2087.4h3.2v6.4h-3.2ZM77.75%2068.8h3.2v6.4h-3.2ZM84.50%2078.1h3.2v6.4h-3.2ZM91.25%2050.2h3.2v6.4h-3.2ZM91.25%2078.1h3.2v6.4h-3.2ZM91.25%2087.4h3.2v6.4h-3.2ZM98.00%2068.8h3.2v6.4h-3.2ZM98.00%2013.0h3.2v6.4h-3.2ZM98.00%2059.5h3.2v6.4h-3.2ZM104.75%20106.0h3.2v6.4h-3.2ZM104.75%2096.7h3.2v6.4h-3.2ZM104.75%2031.6h3.2v6.4h-3.2ZM111.50%2068.8h3.2v6.4h-3.2ZM111.50%2087.4h3.2v6.4h-3.2ZM111.50%2040.9h3.2v6.4h-3.2ZM118.25%2031.6h3.2v6.4h-3.2ZM118.25%2068.8h3.2v6.4h-3.2ZM125.00%2059.5h3.2v6.4h-3.2ZM125.00%2068.8h3.2v6.4h-3.2ZM145.25%2096.7h3.2v6.4h-3.2ZM145.25%2031.6h3.2v6.4h-3.2ZM145.25%2050.2h3.2v6.4h-3.2ZM152.00%20106.0h3.2v6.4h-3.2ZM158.75%2050.2h3.2v6.4h-3.2ZM158.75%2096.7h3.2v6.4h-3.2ZM158.75%2078.1h3.2v6.4h-3.2ZM165.50%20115.3h3.2v6.4h-3.2ZM172.25%2050.2h3.2v6.4h-3.2ZM172.25%2059.5h3.2v6.4h-3.2ZM172.25%2022.3h3.2v6.4h-3.2ZM179.00%2050.2h3.2v6.4h-3.2ZM179.00%2068.8h3.2v6.4h-3.2ZM179.00%2078.1h3.2v6.4h-3.2ZM185.75%20115.3h3.2v6.4h-3.2ZM192.50%2031.6h3.2v6.4h-3.2ZM192.50%20106.0h3.2v6.4h-3.2ZM199.25%2022.3h3.2v6.4h-3.2ZM199.25%2059.5h3.2v6.4h-3.2ZM206.00%2013.0h3.2v6.4h-3.2ZM212.75%2068.8h3.2v6.4h-3.2ZM212.75%20115.3h3.2v6.4h-3.2ZM219.50%2040.9h3.2v6.4h-3.2ZM226.25%2059.5h3.2v6.4h-3.2ZM233.00%2013.0h3.2v6.4h-3.2ZM233.00%2040.9h3.2v6.4h-3.2ZM239.75%2087.4h3.2v6.4h-3.2ZM239.75%2078.1h3.2v6.4h-3.2ZM239.75%2013.0h3.2v6.4h-3.2ZM260.00%20115.3h3.2v6.4h-3.2ZM260.00%2078.1h3.2v6.4h-3.2ZM266.75%20106.0h3.2v6.4h-3.2ZM266.75%2022.3h3.2v6.4h-3.2ZM266.75%20115.3h3.2v6.4h-3.2ZM273.50%2078.1h3.2v6.4h-3.2ZM280.25%20115.3h3.2v6.4h-3.2ZM280.25%2096.7h3.2v6.4h-3.2ZM280.25%2031.6h3.2v6.4h-3.2Z'%2F%3E%3C%2Fsvg%3E");
}

@keyframes uvq16-pc-mv {
  to {
    translate: -50% 0;
  }
}

@keyframes uvq16-pc-scan {
  from {
    translate: -55% 0;
  }
  to {
    translate: 55% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-punch-cards .rw,.pt-uvq16-punch-cards .lt {
    animation: none;
  }
}

`;

export default function PatternUvq16PunchCards() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-uvq16-punch-cards"
        style={{
          "--c1": "#efe2c0",
          "--c2": "#d1495b",
          "--c3": "#7dd3fc",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <i className="lt"></i><div className="rws"><div className="rw" style={{ "--t": "34s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "48s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "62s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "41s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "55s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "34s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div className="rw" style={{ "--t": "48s" } as CSSProperties}><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````