Esta prenda ya no está en el perchero.
Se ha vendido o todavía no ha llegado del taller. Echa un vistazo a la nueva colección mientras la reponemos.
Ver la colecciónHTML + CSS404
404 Perchero
Un perchero con prendas que se balancean como muelles al pasar el puntero; en la percha vacía cuelga la talla 404.
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-wardrobe {
--accent: #b5523b;
--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-wardrobe *,.n4-wardrobe *::before,.n4-wardrobe *::after {
box-sizing: border-box;
}
.n4-wardrobe .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-wardrobe .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-wardrobe .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-wardrobe .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-wardrobe .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-wardrobe .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-wardrobe .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-wardrobe .n4-stars,.n4-wardrobe .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-wardrobe .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-wardrobe-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-wardrobe .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-wardrobe-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-wardrobe [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-wardrobe-tw {
from {
opacity: .3;
}
}
@keyframes n4-wardrobe-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-wardrobe-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-wardrobe *,.n4-wardrobe *::before,.n4-wardrobe *::after {
animation: none!important;
transition: none!important;
}
}
.n4-wardrobe {
background: linear-gradient(90deg,rgba(181,82,59,.05) 1px,transparent 1px) 0 0/6cqmin 100%,radial-gradient(70% 55% at 50% 25%,#fbf4ea,#ecdcc6);
color: #2e2620;
font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
.n4-wardrobe .n4-rack {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: min(74cqmin,520px);
height: 13em;
font-size: min(1.8cqmin,13px);
padding-top: .9em;
margin-bottom: 1.8cqmin;
}
.n4-wardrobe .n4-rack::before,.n4-wardrobe .n4-rack::after {
content: "";
position: absolute;
top: .6em;
width: .9em;
height: 1.4em;
border-radius: .2em;
background: #6b5a4b;
}
.n4-wardrobe .n4-rack::before {
left: -.4em;
}
.n4-wardrobe .n4-rack::after {
right: -.4em;
}
.n4-wardrobe .n4-bar {
position: absolute;
left: 0;
right: 0;
top: .9em;
height: .7em;
border-radius: 1em;
background: linear-gradient(#fafafa,#9a9a9a 55%,#e3e3e3);
box-shadow: 0 .3em .4em rgba(0,0,0,.15);
}
.n4-wardrobe .n4-hg {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 5.4em;
margin: 0 -.35em;
transform-origin: 50% .2em;
rotate: var(--a,0deg);
}
.n4-wardrobe .n4-wire {
width: 4.4em;
height: auto;
margin-top: -.35em;
overflow: visible;
fill: none;
stroke: #7d838b;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.n4-wardrobe .n4-cl {
display: block;
width: 5em;
margin-top: -.55em;
background: linear-gradient(90deg,rgba(0,0,0,.16),transparent 22%,transparent 78%,rgba(0,0,0,.16)),var(--bg);
}
.n4-wardrobe .n4-shirt {
height: 7em;
clip-path: polygon(30% 0,70% 0,100% 16%,90% 34%,80% 28%,80% 100%,20% 100%,20% 28%,10% 34%,0 16%);
}
.n4-wardrobe .n4-dress {
height: 8.8em;
clip-path: polygon(32% 0,68% 0,72% 30%,100% 100%,0 100%,28% 30%);
}
.n4-wardrobe .n4-coat {
height: 9.6em;
clip-path: polygon(26% 0,74% 0,100% 12%,100% 100%,0 100%,0 12%);
}
.n4-wardrobe .n4-sweater {
height: 7.2em;
clip-path: polygon(28% 0,72% 0,100% 14%,100% 72%,86% 72%,82% 28%,82% 100%,18% 100%,18% 28%,14% 72%,0 72%,0 14%);
}
.n4-wardrobe .n4-jacket {
height: 6.8em;
clip-path: polygon(28% 0,72% 0,100% 14%,100% 86%,84% 86%,84% 100%,16% 100%,16% 86%,0 86%,0 14%);
}
.n4-wardrobe .n4-tee {
height: 6.2em;
clip-path: polygon(32% 0,68% 0,100% 18%,88% 34%,78% 28%,78% 100%,22% 100%,22% 28%,12% 34%,0 18%);
}
.n4-wardrobe .n4-empty {
z-index: 2;
}
.n4-wardrobe .n4-tagx {
position: relative;
display: block;
margin-top: -.2em;
padding-top: 1.7em;
}
.n4-wardrobe .n4-tagx::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 1.9em;
background: #6b5a43;
}
.n4-wardrobe .n4-tagx b {
position: relative;
display: block;
padding: 1.1em .6em .6em;
border-radius: .25em .25em .5em .5em;
background: #e8d2ab;
color: #3d2c1c;
font: 800 .95em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
rotate: 7deg;
transform-origin: 50% 0;
box-shadow: 0 .25em .35em rgba(60,40,20,.25);
}
.n4-wardrobe .n4-tagx b::before {
content: "";
position: absolute;
left: 50%;
top: .35em;
width: .45em;
height: .45em;
margin-left: -.225em;
border-radius: 50%;
background: #f4e9d6;
box-shadow: inset 0 0 0 .1em #b99b6c;
}
.n4-wardrobe .n4-tagx b::after {
content: "";
position: absolute;
left: .5em;
right: .5em;
bottom: .3em;
height: .18em;
background: var(--accent);
}
.n4-wardrobe .n4-title {
font-size: clamp(22px,5.2cqmin,44px);
font-weight: 500;
font-style: italic;
letter-spacing: -.01em;
}
.n4-wardrobe .n4-sub {
color: #6d5f52;
}
.n4-wardrobe .n4-cta {
background: #2e2620;
color: #fbf4ea;
}
</style>
</head>
<body>
<main class="n4-wardrobe">
<div class="n4-copy">
<div class="n4-rack" aria-hidden="true">
<i class="n4-bar"></i>
<span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-shirt" style="--bg:repeating-linear-gradient(90deg,#f4f1ea 0 .45em,#2f5d9e .45em .7em)"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-dress" style="--bg:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1.5px) 0 0/.5em .5em,#c8553d"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-coat" style="--bg:linear-gradient(90deg,transparent 48%,rgba(0,0,0,.2) 48% 52%,transparent 52%),#c19a6b"></i></span><span class="n4-hg n4-empty"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-tagx"><b>Talla 404</b></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-sweater" style="--bg:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 .4em,transparent .4em .8em),repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 .4em,transparent .4em .8em),#3f7d5a"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-jacket" style="--bg:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),#3b5b8a"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-tee" style="--bg:#e0a526"></i></span>
</div>
<h1 class="n4-title">Esta prenda ya no está en el perchero.</h1>
<p class="n4-sub">Se ha vendido o todavía no ha llegado del taller. Echa un vistazo a la nueva colección mientras la reponemos.</p>
<a class="n4-cta" href="/">Ver la colección</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-wardrobe").forEach((el) => {
const rack = el.querySelector(".n4-rack");
const hs = Array.from(el.querySelectorAll(".n4-hg"));
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
const st = hs.map(() => ({ a: 0, w: 0 }));
let lx = null, lt = 0, raf = 0, prev = performance.now();
const push = (e) => {
const now = performance.now();
if (lx !== null) {
const vx = (e.clientX - lx) / Math.max(8, now - lt);
hs.forEach((h, i) => {
const r = h.getBoundingClientRect();
if (e.clientX > r.left - 4 && e.clientX < r.right + 4 && e.clientY > r.top && e.clientY < r.bottom) st[i].w += vx * 90;
});
}
lx = e.clientX;
lt = now;
};
const loop = (t) => {
const dt = Math.min(0.033, (t - prev) / 1000) * k;
prev = t;
st.forEach((s, i) => {
const l = st[i - 1] ? st[i - 1].a : s.a, r = st[i + 1] ? st[i + 1].a : s.a;
s.w += (-38 * s.a - 2.4 * s.w + (l + r - 2 * s.a) * 6) * dt;
s.a = Math.max(-35, Math.min(35, s.a + s.w * dt));
hs[i].style.setProperty("--a", s.a.toFixed(2) + "deg");
});
raf = requestAnimationFrame(loop);
};
rack.addEventListener("pointermove", push);
rack.addEventListener("pointerleave", () => { lx = null; });
if (!rm) {
st[0].w = 70;
raf = requestAnimationFrame(loop);
}
});
</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 tiendas de moda y las marcas de ropa pueden mostrar este perchero de boutique cuando una ficha de producto ya no existe. Una barra cromada sostiene perchas de alambre con una camisa de rayas, un vestido, un abrigo camel, un jersey de cuadros, una cazadora vaquera y una camiseta mostaza, y una percha vacía lleva una etiqueta de cartón con la talla 404.
Pasa el puntero por el perchero y cada percha oscila sobre un muelle amortiguado que también empuja a sus vecinas, así que el movimiento recorre la barra. Las prendas son formas CSS con estampados. Con movimiento reducido todo queda quieto.