Components / Japan / Noren

Noren beta

A noren curtain as a section divider: three hanging panels that sway, and part when you reach for them.

Preview 
<div class="k-nor" role="img" aria-label="A three-panel noren curtain in ink, teal and zinc">
  <div class="k-nor-bar"></div>
  <div class="k-nor-row" aria-hidden="true">
    <div class="k-nor-p c1"></div>
    <div class="k-nor-p c2"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/><rect x="10" y="10" width="4" height="4" rx="1.2"/></svg></div>
    <div class="k-nor-p c3"></div>
  </div>
  <p class="k-nor-cap">— THE STORY, BELOW —</p>
</div>
/* KATA Noren — the shop curtain, as a divider. */
.k-nor{font-family:var(--k-font);background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:14px;padding:0 26px 22px;overflow:hidden}
.k-nor-bar{height:7px;border-radius:4px;background:var(--k-zinc-800);margin:0 -6px}
.k-nor-row{display:flex;gap:5px;justify-content:center}
.k-nor-p{width:86px;height:118px;transform-origin:top center;display:flex;align-items:center;justify-content:center;color:var(--k-on-color);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.k-nor-p.c1{background:var(--k-zinc-800);animation:k-nor-sway 5.2s ease-in-out infinite alternate}
.k-nor-p.c2{background:var(--k-accent);animation:k-nor-sway 6.4s ease-in-out infinite alternate-reverse}
.k-nor-p.c3{background:var(--k-zinc-700);animation:k-nor-sway 5.8s ease-in-out infinite alternate}
.k-nor:hover .k-nor-p.c1{transform:translateX(-11px)}
.k-nor:hover .k-nor-p.c3{transform:translateX(11px)}
@keyframes k-nor-sway{from{rotate:-1.1deg}to{rotate:1.1deg}}
.k-nor-cap{text-align:center;font-size:12px;color:var(--k-ink-3);margin-top:16px;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.k-nor-p{animation:none}}

Installation

CLI

node kata-ui.mjs add noren

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

Shops hang a noren to say "open, and someone is home" — as a divider it marks a threshold between sections of a page: the catalog above, the story below. The panels sway on staggered clocks (transform-origin at the bar, a degree and a bit each way), and part a few pixels on hover, the way a hand brushes cloth. The crest on the middle panel is the mold glyph; swap in your own mark.

Accessibility

A divider is a picture of a doorway: it carries an aria-label if it must say anything, and the heading structure of the page does the real work of separating sections. The sway is transform-only and stops under prefers-reduced-motion.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-norclass
.k-nor-barclass
.k-nor-rowclass
.k-nor-pclass
.c1class
.c2class
.c3class
.k-nor-capclass
aria-labelARIA
aria-hiddenARIA

Related parts

Hanko beta

A vermillion seal that stamps: the shu-iro signature for approvals, authorship and things that are done.

hankosealstampsignatureapprovaljapanese

Kintsugi Card beta

A status card repaired in gold: the cracks of an incident, drawn as kintsugi veins that mend on arrival.

kintsugicardstatusincidentgoldrepair

Tategaki beta

Vertical Japanese text, set properly: shuhari — obey the form, break the form, leave the form — as an editorial monument.

tategakiverticaltypographyjapaneseshuharieditorial

Wagara beta

Ten classical Japanese patterns, constructed — not pasted: seigaiha waves, asanoha hemp, shippo circles, ichimatsu checks, kikko hexagons, uroko scales, sharkskin dots, arrow feathers, fawn spots and the diamond lattice.

wagarapatternjapaneseseigaihaasanohabackground
Previous
Kintsugi Card