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 Portant
Un portant dont les vêtements se balancent comme des ressorts au passage du pointeur ; le cintre vide porte la taille 404.
Réglages
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 introuvable</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>Taille 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">Cet article n'est plus sur le portant.</h1>
<p class="n4-sub">Il a été vendu ou n'est pas encore revenu de l'atelier. Jette un œil à la nouvelle collection pendant que nous le réassortissons.</p>
<a class="n4-cta" href="/">Voir la collection</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Voir tout : 404Où l’utiliser
Les boutiques de mode et les marques de vêtements peuvent afficher ce portant quand une fiche produit a disparu. Une barre chromée porte des cintres en fil avec une chemise rayée, une robe, un manteau camel, un pull vichy, une veste en jean et un t-shirt moutarde, et un cintre vide porte une étiquette en carton taille 404.
Passe le pointeur le long du portant et chaque cintre oscille sur un ressort amorti qui pousse aussi ses voisins, si bien que le mouvement parcourt la barre. Les vêtements sont des formes CSS à motifs. En mouvement réduit, tout reste immobile.