Esta página se ha perdido en la colada.
Como ese calcetín que nunca vuelve del tambor. Prueba otro programa o vuelve al inicio a buscar su pareja.
Volver al inicioHTML + CSS404
Washing machine 404
A front loader tumbles the laundry while the odd sock with 404 stitched on it spins among the clothes.
Settings
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Page not found</title>
<style>
body { margin: 0; background: #000; }
.n4-laundry {
--accent: #ff7a59;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-laundry *,.n4-laundry *::before,.n4-laundry *::after {
box-sizing: border-box;
}
.n4-laundry .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-laundry .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-laundry .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-laundry .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-laundry .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-laundry .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-laundry .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-laundry .n4-stars,.n4-laundry .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-laundry .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-laundry-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-laundry .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-laundry-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-laundry [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-laundry-tw {
from {
opacity: .3;
}
}
@keyframes n4-laundry-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-laundry-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-laundry *,.n4-laundry *::before,.n4-laundry *::after {
animation: none!important;
transition: none!important;
}
}
.n4-laundry {
background: linear-gradient(#cfe3dc .18cqmin,transparent .18cqmin) 0 0/7cqmin 7cqmin,linear-gradient(90deg,#cfe3dc .18cqmin,transparent .18cqmin) 0 0/7cqmin 7cqmin,radial-gradient(80% 70% at 50% 35%,#f3f9f6,#dcebe5);
color: #123a32;
}
.n4-laundry .n4-wm {
position: relative;
width: min(38cqmin,270px);
font-size: min(1.9cqmin,13px);
aspect-ratio: .86;
margin-bottom: 1cqmin;
padding: 0 1.6em 1.6em;
border-radius: 1.2em 1.2em .8em .8em;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(90deg,#e4eae8,#fff 28%,#f5f8f7 70%,#d6dedb);
box-shadow: inset 0 -.45em 0 #cdd6d2,0 1.6em 2.4em -1.2em rgba(18,58,50,.55);
}
.n4-laundry .n4-panel {
align-self: stretch;
display: flex;
align-items: center;
gap: .8em;
height: 4.6em;
margin: 0 -1.6em 1.3em;
padding: 0 1.2em;
border-bottom: 2px solid #d7dfdc;
}
.n4-laundry .n4-lcd {
padding: .45em .6em;
border-radius: .35em;
background: #a9e3d2;
color: #0f3d33;
font: 700 1.05em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .08em;
box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
animation: n4-laundry-blink calc(1.6s / var(--k)) steps(1) infinite;
}
.n4-laundry .n4-progs {
flex: 1;
display: flex;
flex-direction: column;
gap: .18em;
text-align: left;
font: 600 .78em/1.1 system-ui,sans-serif;
color: #81918c;
}
.n4-laundry .n4-progs i {
display: flex;
align-items: center;
gap: .45em;
font-style: normal;
white-space: nowrap;
}
.n4-laundry .n4-progs i::before {
content: "";
flex: none;
width: .6em;
height: .6em;
border-radius: 50%;
background: #cfd8d4;
}
.n4-laundry .n4-progs .n4-on {
color: #123a32;
}
.n4-laundry .n4-progs .n4-on::before {
background: var(--accent);
box-shadow: 0 0 .6em var(--accent);
}
.n4-laundry .n4-knob {
position: relative;
flex: none;
width: 3.3em;
height: 3.3em;
border: 0;
border-radius: 50%;
cursor: pointer;
background: radial-gradient(circle at 35% 30%,#fff,#dfe5e3 45%,#a7b2ae);
box-shadow: 0 .2em .45em rgba(0,0,0,.3),inset 0 0 0 .18em #eef2f0;
rotate: var(--r,-40deg);
transition: rotate .45s cubic-bezier(.3,1.6,.5,1),scale .15s;
}
.n4-laundry .n4-knob::after {
content: "";
position: absolute;
left: 50%;
top: 9%;
width: .26em;
height: 34%;
margin-left: -.13em;
border-radius: 1em;
background: #123a32;
}
.n4-laundry .n4-knob:hover {
filter: brightness(1.05);
}
.n4-laundry .n4-knob:active {
scale: .92;
}
.n4-laundry .n4-knob:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-laundry .n4-door {
position: relative;
width: 84%;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(from 200deg,#b5c0bc,#f7f9f8,#a2ada9,#eef2f0,#b5c0bc);
box-shadow: 0 .35em .7em rgba(0,0,0,.28),inset 0 0 0 .2em rgba(255,255,255,.7);
}
.n4-laundry .n4-drum,.n4-laundry .n4-water,.n4-laundry .n4-glass {
position: absolute;
inset: 9%;
border-radius: 50%;
}
.n4-laundry .n4-drum {
overflow: hidden;
background: radial-gradient(circle,#3b474c 0 22%,transparent 30%) 0 0/1.1em 1.1em,radial-gradient(circle,#8a979b,#2b363b 75%);
}
.n4-laundry .n4-drum svg {
display: block;
width: 100%;
height: 100%;
}
.n4-laundry .n4-sock {
fill: var(--accent);
}
.n4-laundry .n4-st {
font: 800 7.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: #fff;
}
.n4-laundry .n4-water {
overflow: hidden;
}
.n4-laundry .n4-water::before {
content: "";
position: absolute;
left: -50%;
top: 58%;
width: 200%;
aspect-ratio: 1;
border-radius: 42%;
background: rgba(140,210,235,.4);
animation: n4-laundry-spin calc(7s / var(--k)) linear infinite;
}
.n4-laundry .n4-glass {
background: radial-gradient(60% 45% at 32% 24%,rgba(255,255,255,.6),transparent 62%),radial-gradient(circle,transparent 60%,rgba(0,0,0,.4));
box-shadow: inset 0 0 0 .35em rgba(30,50,55,.6),inset 0 0 1.2em rgba(0,0,0,.4);
}
.n4-laundry .n4-tag {
color: color-mix(in srgb,var(--accent) 70%,#000);
}
.n4-laundry .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-laundry .n4-sub {
color: #4a6a62;
}
.n4-laundry .n4-cta {
background: #123a32;
color: #fff;
}
.n4-laundry .n4-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@keyframes n4-laundry-blink {
50% {
opacity: .35;
}
}
</style>
</head>
<body>
<main class="n4-laundry">
<div class="n4-copy">
<div class="n4-wm">
<div class="n4-panel">
<span class="n4-lcd" aria-hidden="true" translate="no">E-404</span>
<span class="n4-progs" aria-hidden="true"><i class="n4-on">Cotton</i><i>Fast</i><i>Spin</i></span>
<button class="n4-knob" type="button" aria-label="Change program"></button>
</div>
<div class="n4-door" aria-hidden="true">
<div class="n4-drum"><svg viewBox="0 0 100 100"><path d="M9 0l6 3h4l6-3 9 7-5 7-4-2v18H9V12l-4 2-5-7z" fill="#5b8def" transform="translate(10 48) rotate(-24) scale(.95)"/><path d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z" fill="#ffd166" transform="translate(58 10) rotate(38) scale(.8)"/><path d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z" fill="#2a9d8f" transform="translate(24 14) rotate(-52) scale(.75)"/><rect x="0" y="0" width="30" height="17" rx="3" fill="#f4a3c0" transform="translate(48 62) rotate(14)"/><path d="M0 4h30M0 9h30" stroke="#fff" stroke-width="1.6" opacity=".55" transform="translate(48 62) rotate(14)"/><g transform="translate(62 30) rotate(112) scale(.95)"><path class="n4-sock" d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z"/><text class="n4-st" x="13.5" y="22" transform="rotate(-90 13.5 19)">404</text></g></svg></div>
<i class="n4-water"></i>
<i class="n4-glass"></i>
</div>
<span class="n4-sr" aria-live="polite"></span>
</div>
<span class="n4-tag">Program 404, odd sock</span>
<h1 class="n4-title">This page got lost in the wash.</h1>
<p class="n4-sub">Like that sock that never comes back from the drum. Try another program or go back home to find its pair.</p>
<a class="n4-cta" href="/">Back to home</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-laundry").forEach((el) => {
const drum = el.querySelector(".n4-drum");
const knob = el.querySelector(".n4-knob");
const progs = el.querySelectorAll(".n4-progs i");
const live = el.querySelector(".n4-sr");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
const SPEED = [80, 200, 640];
let p = 0, v = 0, a = 0, last = performance.now(), raf = 0;
const tick = (now) => {
const dt = Math.min(0.05, (now - last) / 1000);
last = now;
v += (SPEED[p] * k - v) * Math.min(1, dt * 1.4);
a = (a + v * dt) % 360;
drum.style.transform = "rotate(" + a.toFixed(1) + "deg)";
raf = requestAnimationFrame(tick);
};
knob.addEventListener("click", () => {
p = (p + 1) % 3;
knob.style.setProperty("--r", p * 40 - 40 + "deg");
progs.forEach((x, i) => x.classList.toggle("n4-on", i === p));
live.textContent = progs[p].textContent;
});
if (!rm) raf = requestAnimationFrame(tick);
});
</script>
</body>
</html>
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.
More in 404
See all 404Where to use it
Every household knows the sock that never comes back from the wash, and this error page turns that small mystery into a 404. A white front loading machine with a mint LCD showing E-404 spins its drum with real inertia, while a shirt, a towel and a coral sock tumble behind the porthole glass.
The program knob is a real button: it cycles through cotton, quick and spin, and the drum speeds up or slows down smoothly. Change the coral accent to match your brand and point the button to your home page.