Taped photo

Web only — React, from @krizaka/ui/taped-photo. Beta: its API may still change in a minor version.

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

Why it is here. 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";

Examples

Props

Accessibility

• 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.

Best practices

• 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.

Related components

• 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.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub