Esta pista no está en el disco.
Le hemos dado la vuelta al vinilo y la página tampoco está en la cara B. Prueba con otro álbum o vuelve al inicio.
Volver al inicioHTML + CSS404
404 Tocadiscos
Un tocadiscos de nogal: el brazo se posa, el vinilo gira con inercia y puedes rascarlo con el puntero como un DJ.
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-vinyl {
--accent: #ff6b35;
--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-vinyl *,.n4-vinyl *::before,.n4-vinyl *::after {
box-sizing: border-box;
}
.n4-vinyl .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-vinyl .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-vinyl .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-vinyl .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-vinyl .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-vinyl .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-vinyl .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-vinyl .n4-stars,.n4-vinyl .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-vinyl .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-vinyl-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-vinyl .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-vinyl-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-vinyl [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-vinyl-tw {
from {
opacity: .3;
}
}
@keyframes n4-vinyl-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-vinyl-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-vinyl *,.n4-vinyl *::before,.n4-vinyl *::after {
animation: none!important;
transition: none!important;
}
}
.n4-vinyl {
background: radial-gradient(70% 60% at 50% 30%,#2d2520,#0e0b09 75%);
color: #f4ece2;
}
.n4-vinyl .n4-tt {
position: relative;
width: 30em;
height: 23em;
font-size: min(1.9cqmin,13.5px);
margin-bottom: 1.4cqmin;
border-radius: 1.2em;
background: repeating-linear-gradient(94deg,rgba(0,0,0,.07) 0 .2em,transparent .2em 1em,rgba(255,220,180,.05) 1em 1.3em,transparent 1.3em 2.2em),linear-gradient(135deg,#7a4a2a,#4a2a16 70%,#3a200f);
box-shadow: inset 0 .2em .2em rgba(255,255,255,.18),inset 0 -.4em .6em rgba(0,0,0,.4),0 2em 3em -1.4em #000;
}
.n4-vinyl .n4-plat {
position: absolute;
left: 1.6em;
top: 1.4em;
width: 19.2em;
height: 19.2em;
border-radius: 50%;
background: repeating-conic-gradient(#c8ccd1 0 2deg,#6f747a 2deg 4deg);
box-shadow: 0 .4em .8em rgba(0,0,0,.6);
}
.n4-vinyl .n4-rec {
position: absolute;
inset: .6em;
border-radius: 50%;
cursor: grab;
touch-action: none;
background: radial-gradient(circle,transparent 0 32%,#0d0d0d 32.5% 34%,transparent 34.5%),repeating-radial-gradient(circle,#141414 0 .1em,#1f1f1f .1em .22em),#111;
box-shadow: inset 0 0 0 .3em #0a0a0a;
}
.n4-vinyl .n4-rec:active {
cursor: grabbing;
}
.n4-vinyl .n4-lab {
position: absolute;
inset: 33%;
display: grid;
place-content: center;
justify-items: center;
gap: 1.1em;
border-radius: 50%;
background: radial-gradient(circle,#111 0 .35em,transparent .4em),radial-gradient(circle,transparent 0 62%,rgba(0,0,0,.18) 63% 64%,transparent 65%),var(--accent);
color: #1a0c05;
}
.n4-vinyl .n4-lab b {
font: 900 1.5em/1 "Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
letter-spacing: -.04em;
}
.n4-vinyl .n4-lab small {
font: 700 .55em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .18em;
text-transform: uppercase;
}
.n4-vinyl .n4-shine {
position: absolute;
inset: .6em;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(from 20deg,transparent 0 9%,rgba(255,255,255,.14) 13%,transparent 19% 50%,rgba(255,255,255,.11) 63%,transparent 69%);
-webkit-mask: radial-gradient(circle,transparent 34%,#000 35%);
mask: radial-gradient(circle,transparent 34%,#000 35%);
}
.n4-vinyl .n4-arm {
position: absolute;
right: 2.2em;
top: 2em;
width: 4em;
height: 4em;
rotate: var(--arm,0deg);
transition: rotate calc(1.1s / var(--k)) cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
.n4-vinyl .n4-on .n4-arm {
--arm: 24deg;
}
.n4-vinyl .n4-pivot {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle,#2a2a2a 0 22%,#d6dadf 24% 48%,#8b9198 50%);
box-shadow: 0 .3em .5em rgba(0,0,0,.5);
}
.n4-vinyl .n4-tube {
position: absolute;
left: 50%;
top: 50%;
width: .5em;
height: 14.5em;
margin-left: -.25em;
border-radius: .25em;
background: linear-gradient(90deg,#8b9198,#eef1f4,#8b9198);
transform-origin: 50% 0;
rotate: 14deg;
box-shadow: .3em .3em .4em rgba(0,0,0,.35);
}
.n4-vinyl .n4-tube::after {
content: "";
position: absolute;
left: -.55em;
bottom: -1.3em;
width: 1.6em;
height: 2.2em;
border-radius: .3em;
background: linear-gradient(#3a3a3a,#141414);
rotate: -14deg;
}
.n4-vinyl .n4-rpm {
position: absolute;
right: 2em;
bottom: 5.2em;
padding: .35em .55em;
border-radius: .3em;
background: #1a0f08;
color: #ffd7b8;
font: 700 .95em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
box-shadow: inset 0 0 0 .1em #5a3a20;
}
.n4-vinyl .n4-on .n4-rpm {
color: var(--accent);
text-shadow: 0 0 .4em var(--accent);
}
.n4-vinyl .n4-play {
position: absolute;
right: 1.6em;
bottom: 1.6em;
display: flex;
align-items: center;
gap: .55em;
padding: .65em .9em;
border: 0;
border-radius: .5em;
cursor: pointer;
font: 700 .9em/1 system-ui,sans-serif;
color: #1a0c05;
background: linear-gradient(#f1f3f5,#b8bec5);
box-shadow: 0 .25em 0 #5f656c;
transition: transform .1s,box-shadow .1s,filter .2s;
}
.n4-vinyl .n4-play::before {
content: "";
width: 0;
height: 0;
border-top: .45em solid transparent;
border-bottom: .45em solid transparent;
border-left: .7em solid currentColor;
}
.n4-vinyl .n4-play[aria-pressed="true"]::before {
width: .65em;
height: .8em;
border: 0;
background: linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%);
}
.n4-vinyl .n4-play:hover {
filter: brightness(1.06);
}
.n4-vinyl .n4-play:active {
transform: translateY(.2em);
box-shadow: 0 .05em 0 #5f656c;
}
.n4-vinyl .n4-play:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-vinyl .n4-now {
position: absolute;
left: 1.8em;
bottom: .65em;
margin: 0;
font: 600 .8em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .06em;
color: #ffd7b8;
}
.n4-vinyl .n4-tag {
color: var(--accent);
}
.n4-vinyl .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-vinyl .n4-sub {
color: #c4b2a2;
}
.n4-vinyl .n4-cta {
background: var(--accent);
color: #1a0c05;
}
</style>
</head>
<body>
<main class="n4-vinyl">
<div class="n4-copy">
<div class="n4-tt">
<div class="n4-plat" aria-hidden="true"><div class="n4-rec"><span class="n4-lab"><b translate="no">404</b><small>Cara B</small></span></div><i class="n4-shine"></i></div>
<div class="n4-arm" aria-hidden="true"><i class="n4-tube"></i><i class="n4-pivot"></i></div>
<span class="n4-rpm" aria-hidden="true" translate="no">33</span>
<button class="n4-play" type="button" aria-pressed="false">Reproducir</button>
<p class="n4-now" aria-live="polite"></p>
</div>
<span class="n4-tag">Cara B, pista 404</span>
<h1 class="n4-title">Esta pista no está en el disco.</h1>
<p class="n4-sub">Le hemos dado la vuelta al vinilo y la página tampoco está en la cara B. Prueba con otro álbum o vuelve al inicio.</p>
<a class="n4-cta" href="/">Volver al inicio</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-vinyl").forEach((el) => {
const tt = el.querySelector(".n4-tt");
const rec = el.querySelector(".n4-rec");
const btn = el.querySelector(".n4-play");
const now = el.querySelector(".n4-now");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
let on = false, a = 0, v = 0, drag = null, last = performance.now(), raf = 0;
const ang = (e) => {
const r = rec.getBoundingClientRect();
return (Math.atan2(e.clientY - r.top - r.height / 2, e.clientX - r.left - r.width / 2) * 180) / Math.PI;
};
const loop = (t) => {
const dt = Math.min(0.05, (t - last) / 1000);
last = t;
if (drag === null) {
v += ((on ? 200 * k : 0) - v) * Math.min(1, dt * (on ? 1.6 : 1.1));
a += v * dt;
}
rec.style.transform = "rotate(" + a.toFixed(1) + "deg)";
raf = requestAnimationFrame(loop);
};
const toggle = () => {
on = !on;
btn.setAttribute("aria-pressed", String(on));
tt.classList.toggle("n4-on", on);
now.textContent = on ? "Pista no encontrada" : "";
};
btn.addEventListener("click", toggle);
rec.addEventListener("pointerdown", (e) => { drag = ang(e); rec.setPointerCapture(e.pointerId); });
rec.addEventListener("pointermove", (e) => {
if (drag === null) return;
const n = ang(e);
let d = n - drag;
if (d > 180) d -= 360;
if (d < -180) d += 360;
a += d;
drag = n;
});
const up = () => { drag = null; };
rec.addEventListener("pointerup", up);
rec.addEventListener("pointercancel", up);
raf = requestAnimationFrame(loop);
const auto = rm ? 0 : setTimeout(toggle, 700 / k);
});
</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
Tiendas de discos, sellos y blogs de música pueden usar este tocadiscos como página de error. Un mueble de nogal sostiene un plato estroboscópico, un vinilo negro con surcos y una galleta naranja de cara B con el 404 impreso, y un brazo cromado que se posa sobre el disco cuando empieza a sonar poco después de cargar.
El botón de reproducir arranca y para el disco, que acelera y frena con inercia real. Agarra el vinilo con el puntero o con el dedo para rascarlo y, al soltarlo, sigue girando. Cambia el color de la galleta con el acento.