Wall

Web uniquement — React, depuis @krizaka/ui/wall. Bêta : son API peut encore changer à une version mineure.

• Mobile · n/a. An ornamental storefront surface belongs to web pages; native content should stay in a scrolling gallery. → Media grid

Pourquoi il est là. Akinaza's shop pages: the owner's photos, short notes and logo on a textured wall (krizaka/akinaza#236, krizaka-ui#537).

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { Wall, Polaroid, PinnedNote, ShopSign } from "@krizaka/ui/wall";

Exemples

Props

Accessibilité

• Wall is a real ul with an explicit list role, preserving Safari semantics despite list-style:none, and focusable li objects; give it an aria-label describing the collection. Textures, tape, pins and screws are hidden from assistive technology.
• Every word and all photo/logo alternatives come from the host. Standalone objects keep their natural figure/article/div semantics; Wall supplies their focus target.
• Polaroid only develops after its first observed intersection. With reduced motion, without an observer, or before hydration the photo remains sharp; preference changes stop motion immediately.
• Neon only flickers softly once, never flashes or loops. All effects stop under prefers-reduced-motion; reading and focus order never depend on visual positions.

Clavier

Bonnes pratiques

• Import @krizaka/ui/blocks.css once. All four components are exported from @krizaka/ui/wall.
• Each example includes its own words, so copied snippets are self-contained. Choose the host locale and pass its words as data; the French composition demonstrates the same surface unchanged.
• Wall draws at most max items (12 by default, the first in z order) in a fixed 16:9 box on a desktop; show the rest behind a « see the whole wall » of your own. Pass height only for a fixed pixel height. On a phone it stacks them in z order, straight.
• ShopSign renders its text children as the heading (as="h1" by default): the page's one h1 is the sign. On a Wall a sign is a paragraph unless you pass as. variant="none" is the name alone on paper; the neon flickers once, the first time it is seen, and never loops.
• PinnedNote: hold (tape or pin, through Stuck), ink (blue, margin, hue) and lines (a fixed box of N lines, default 4, read in full by assistive technology); attachment still works as an alias of hold.
• Provide stable ids, explicit x/y percentages, rotation in degrees and z for every item. Positions are clamped to 0–100; z sorts the real list stably, including keyboard and phone order.
• Use kind polaroid with img, kind note with text, or kind sign with logo. Items carry the same props as their standalone component; no editor or random placement is added.
• Use height and itemWidth for layout, not style: style is intentionally omitted from the public props so percentage placement and the mobile stack cannot be overwritten accidentally.
• Keep the wall sparse and tilts small. On screens narrower than 48rem it grows into an untilted single column in z order, without overlap.
• The img ReactNode accepts next/image, including fill: the square photo frame is positioned. Supply an informative alt, or an empty alt for decoration.
• Captions and signatures use the existing --kz-font-cahier handwriting role (Krizaka Cahier from @krizaka/fonts); load the font in the host.
• PinnedNote caps text at 140 Unicode code points. Keep the full message elsewhere when more detail matters.
• Set attachment and attachmentRotation for tape or a pin, rotation for the object; neon's animated=false and Polaroid's develop=false opt out of motion.
• Wall textures adapt to dark, light and brand themes. Polaroid composes TapedPhoto: its --kz-print paper stays pale in both themes, with --kz-print-ink captions and --kz-tape strips instead of a second print material.

Composants liés

• Taped photoA print taped in the notebook: slightly tilted, a thin white print border, a soft paper shadow and strips of tape. It holds any picture — an image, a video, a live scene.
• Cover heroThe first screen of a shop or a place: its cover — a photo, or a muted loop that stays a still under reduced motion — behind the name, a one-line promise, a few true facts and the main action. Without a cover, the brand's colours.
• Media galleryA shop's own photos and loops in tiles — the first featured, loops playing muted while their tile is on screen (a still under reduced motion), a caption on the foot of a tile.
• Photo gridA profile's photos in slots: the first is the main one, empty slots invite to add, photos reorder by drag (web), by their menu (React Native) or by buttons — every move announced.
• Profile cardA profile at a glance — a portrait, a name, a headline gauge, a few stats with their values in words, a line and actions: a creator, a match, a member, a plan. ProfileBanner is the top of a person's or a place's page: a cover, the avatar overlapping it, the name, its facts, the actions.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub