A esta página le faltan piezas.
La hemos buscado en todas las cajas de la juguetería. Mientras aparece, ordena el puzle o vuelve al escaparate.
Volver al escaparateHTML + CSS404
404 Puzle deslizante
Un puzle de madera de ocho piezas que se desliza con clic o con las flechas; ordenado, muestra un 404 de juguete.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-puzzle {
--accent: #118ab2;
--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-puzzle *,.n4-puzzle *::before,.n4-puzzle *::after {
box-sizing: border-box;
}
.n4-puzzle .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-puzzle .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-puzzle .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-puzzle .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-puzzle .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-puzzle .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-puzzle .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-puzzle .n4-stars,.n4-puzzle .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-puzzle .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-puzzle-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-puzzle .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-puzzle-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-puzzle [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-puzzle-tw {
from {
opacity: .3;
}
}
@keyframes n4-puzzle-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-puzzle-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-puzzle *,.n4-puzzle *::before,.n4-puzzle *::after {
animation: none!important;
transition: none!important;
}
}
.n4-puzzle {
background: radial-gradient(70% 60% at 50% 30%,#fff7e6,#f4dbb0 70%,#e6bd82);
color: #2b1a0e;
}
.n4-puzzle .n4-box {
display: flex;
flex-direction: column;
align-items: center;
gap: .8em;
font-size: min(2cqmin,14px);
margin-bottom: 1cqmin;
}
.n4-puzzle .n4-board {
position: relative;
width: 18em;
height: 18em;
border-radius: 1em;
background: repeating-linear-gradient(88deg,rgba(90,50,20,.1) 0 .2em,transparent .2em 1.1em),linear-gradient(135deg,#d39a5c,#a86a34);
box-shadow: inset 0 0 0 .3em #8a5427,0 1.4em 2em -1em rgba(60,30,10,.55);
transition: box-shadow .4s;
}
.n4-puzzle .n4-board::before {
content: "";
position: absolute;
inset: .8em;
border-radius: .4em;
background: #7a4a22;
box-shadow: inset 0 .2em .5em rgba(0,0,0,.5);
}
.n4-puzzle .n4-tile {
position: absolute;
left: .8em;
top: .8em;
width: 5.2em;
height: 5.2em;
padding: 0;
border: 0;
border-radius: .45em;
overflow: hidden;
cursor: pointer;
transform: translate(calc(var(--x) * 5.6em),calc(var(--y) * 5.6em));
transition: transform calc(.18s / var(--k)) cubic-bezier(.2,.8,.3,1.1),filter .2s;
box-shadow: 0 .2em .3em rgba(0,0,0,.35);
}
.n4-puzzle .n4-tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 .15em 0 rgba(255,255,255,.45),inset 0 -.25em 0 rgba(0,0,0,.22);
pointer-events: none;
}
.n4-puzzle .n4-img {
position: absolute;
width: 16.4em;
height: 16.4em;
left: calc(var(--c) * -5.6em);
top: calc(var(--r) * -5.6em);
display: grid;
place-items: center;
background: radial-gradient(circle at 18% 18%,rgba(255,255,255,.35) 0 1.2em,transparent 1.3em),radial-gradient(circle at 84% 80%,rgba(255,255,255,.25) 0 1.6em,transparent 1.7em),linear-gradient(135deg,#ef476f,#ffd166 45%,#06d6a0 75%,#118ab2);
}
.n4-puzzle .n4-img b {
font: 900 6em/1 "Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
letter-spacing: -.05em;
color: #fff;
text-shadow: .05em .06em 0 #073b4c;
}
.n4-puzzle .n4-tile small {
position: absolute;
right: .4em;
bottom: .3em;
font: 800 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
transition: opacity .3s;
}
.n4-puzzle .n4-tile:hover {
filter: brightness(1.08);
}
.n4-puzzle .n4-tile:active {
filter: brightness(.92);
}
.n4-puzzle .n4-tile:focus-visible {
outline: .2em solid #fff;
outline-offset: -.4em;
z-index: 1;
}
.n4-puzzle .n4-done .n4-board {
box-shadow: inset 0 0 0 .3em #8a5427,0 0 0 .35em var(--accent),0 1.4em 2em -1em rgba(60,30,10,.55);
}
.n4-puzzle .n4-done .n4-tile small {
opacity: 0;
}
.n4-puzzle .n4-bar {
display: flex;
align-items: center;
gap: 1em;
}
.n4-puzzle .n4-st {
margin: 0;
font: 600 .95em/1.2 system-ui,sans-serif;
color: #6b4a2b;
}
.n4-puzzle .n4-done .n4-st {
color: var(--accent);
font-weight: 700;
}
.n4-puzzle .n4-mix {
padding: .55em 1.1em;
border: 0;
border-radius: 999px;
cursor: pointer;
font: 700 .9em/1 system-ui,sans-serif;
background: #2b1a0e;
color: #fff7e6;
transition: transform .12s;
}
.n4-puzzle .n4-mix:hover {
transform: translateY(-1px);
}
.n4-puzzle .n4-mix:active {
transform: scale(.96);
}
.n4-puzzle .n4-mix:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-puzzle .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-puzzle .n4-sub {
color: #6b4a2b;
}
.n4-puzzle .n4-cta {
background: var(--accent);
color: #fff;
}
</style>
</head>
<body>
<main class="n4-puzzle">
<div class="n4-copy">
<div class="n4-box">
<div class="n4-board" role="group" aria-label="Puzle deslizante: usa las flechas para mover las piezas">
<button class="n4-tile" type="button" aria-label="Pieza 1" style="--c:0;--r:0;--x:0;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">1</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 2" style="--c:1;--r:0;--x:1;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">2</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 3" style="--c:2;--r:0;--x:2;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">3</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 4" style="--c:0;--r:1;--x:0;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">4</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 5" style="--c:1;--r:1;--x:1;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">5</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 6" style="--c:2;--r:1;--x:2;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">6</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 7" style="--c:0;--r:2;--x:0;--y:2"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">7</small></button>
<button class="n4-tile" type="button" aria-label="Pieza 8" style="--c:1;--r:2;--x:1;--y:2"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">8</small></button>
</div>
<div class="n4-bar"><p class="n4-st" aria-live="polite">Ordena las piezas</p><button class="n4-mix" type="button">Mezclar</button></div>
</div>
<h1 class="n4-title">A esta página le faltan piezas.</h1>
<p class="n4-sub">La hemos buscado en todas las cajas de la juguetería. Mientras aparece, ordena el puzle o vuelve al escaparate.</p>
<a class="n4-cta" href="/">Volver al escaparate</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-puzzle").forEach((el) => {
const box = el.querySelector(".n4-box");
const board = el.querySelector(".n4-board");
const tiles = Array.from(el.querySelectorAll(".n4-tile"));
const st = el.querySelector(".n4-st");
const mix = el.querySelector(".n4-mix");
const START = st.textContent;
const pos = tiles.map((_, i) => i);
let empty = 8;
const paint = () => tiles.forEach((t, i) => {
t.style.setProperty("--x", String(pos[i] % 3));
t.style.setProperty("--y", String(Math.floor(pos[i] / 3)));
});
const adj = (a, b) => Math.abs((a % 3) - (b % 3)) + Math.abs(Math.floor(a / 3) - Math.floor(b / 3)) === 1;
const solved = () => pos.every((p, j) => p === j);
const swap = (i) => { const c = pos[i]; pos[i] = empty; empty = c; };
const move = (i) => {
if (!adj(pos[i], empty)) return;
swap(i);
paint();
const done = solved();
box.classList.toggle("n4-done", done);
st.textContent = done ? "Completo. La página sigue sin aparecer." : START;
};
const shuffle = () => {
let prev = -1;
do {
for (let n = 0; n < 80; n++) {
const opts = tiles.map((_, i) => i).filter((i) => i !== prev && adj(pos[i], empty));
const i = opts[Math.floor(Math.random() * opts.length)];
swap(i);
prev = i;
}
} while (solved());
paint();
box.classList.remove("n4-done");
st.textContent = START;
};
tiles.forEach((t, i) => t.addEventListener("click", () => move(i)));
board.addEventListener("keydown", (e) => {
const d = { ArrowLeft: 1, ArrowRight: -1, ArrowUp: 3, ArrowDown: -3 }[e.key];
if (!d) return;
e.preventDefault();
const cell = empty + d;
if (cell < 0 || cell > 8 || (Math.abs(d) === 1 && Math.floor(cell / 3) !== Math.floor(empty / 3))) return;
const i = pos.indexOf(cell);
move(i);
tiles[i].focus();
});
mix.addEventListener("click", shuffle);
shuffle();
});
</script>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Las jugueterías y marcas infantiles pueden convertir su página de error en el clásico puzle deslizante. Ocho piezas lacadas en una bandeja de madera, mezcladas al cargar, forman juntas un gran 404 blanco sobre un degradado rojo, amarillo y turquesa. Cada pieza muestra su trozo de imagen, así que al resolverlo se lee como un solo dibujo.
Haz clic en una pieza junto al hueco o usa las flechas para moverlas. Una línea de estado confirma la solución y el botón de mezclar vuelve a empezar. Cambia el turquesa del brillo final y del botón.