Taped photo

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

• Mobile · ✗ à construire. It comes with the native paper roles of the Cahier. issue #421

Pourquoi il est là. Used by krizaka.com.

Installation

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

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

import { TapedPhoto } from "@krizaka/ui/taped-photo";

Exemples

Props

Accessibilité

• A figure; the caption is its figcaption, real text.
• The tape and the shadow are decoration (pseudo-elements). Give the picture its own alternative text, or mark a decorative scene aria-hidden and say it in the caption.
• The tilt is a transform: nothing moves under prefers-reduced-motion because nothing animates.

Bonnes pratiques

• One taped photo per screen: two prints side by side read as a collage, not as the page's picture.
• Keep the tilt small (−2° to 2°); lean the prints of one page the same way unless they face each other.
• The picture keeps its own box (an aspect-ratio or a sized image), so the tilt never moves the layout.
• Write the caption as a note, not a title: what it shows, where, when.

Composants liés

• Bird plateThe flock as a naturalist's plate: each bird a numbered figure, a hairline from the drawing to its caption, and the caption is its promise as the film says it.
• FlockThe Krizaka birds standing on a stage, alive: each at ease in character, two neighbours glancing at each other, the pigeon carrying its parcel across, a bird looking up when you come near or tap it — and, with scenes, a short scene for each bird.
• 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.
• Specimen tagThe Cahier's label for a product or a component: a manila tag with an eyelet, a typed catalogue number, a name, a stamp for its honest status and the fields of its record — and Stamp, the rubber stamp alone.

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