AIMRAN
HTML + CSSBackgrounds

Punched cards

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

Settings

1x
1x
1

Code

<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>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Mesh gradient

BackgroundsHTML + CSS

Northern lights background

BackgroundsHTML + CSS

Breathing gradient

BackgroundsHTML + CSS

Liquid sunset background

BackgroundsHTML + CSS

Dot grid wave

BackgroundsHTML + CSS

Synthwave grid

BackgroundsHTML + CSS

Honeycomb background

BackgroundsHTML + CSS

Diagonal light lines

BackgroundsHTML + CSS

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.