Text mode is the second ink: one text shadow in the second ink a couple of pixels off register. It lands three times further out and snaps to rest, then stays (rest), or resolves to one print (motion). One real text node; no duplicate DOM text. Art mode prints one copy of any art per plate in its separation ink, each offset by its own unit vector, the key on top in register. The class .mk-ov is the same second ink for any display head.
Example#
Websites that win customers
Usage#
Misregistration is the second ink: big display type prints twice, the second plate a hair off register (D-D6). It lands off and stays off at rest by default; one switch makes it motion-only or turns it off. In art mode it prints any shape as four slightly shifted separations.
- Text mode (string children) is for display type of 2 rem and up only: page titles, poster words, splash lines. It is one real text node with a printed shadow, never duplicated text.
- Art mode (a render function) draws a shape once per plate, offset by the volume.
- The switch.
data-mk-second-inkon any ancestor:rest(default),motion(it resolves to one print) oroff. - Never on body text, labels, names or numbers in rows.
Layer and volume#
Text: display type at 2 rem and up only (display, and head-section from Press); off at Quiet, under more contrast and with data-mk-second-ink="off". At Press and Rave the cyan and yellow plates join the entrance and collapse. Art: offsets 0 / 2 / 3 / 5 px and plates 1 / 2 / 4 / 4 from Quiet to Rave.
Anatomy#
Websites that win customers
- Display wordOne text node; the second plate is its shadow.
.mk-ov - Art platesOne copy per separation, offset by the volume.
.mk-misreg
Volume#
Quiet
Websites that win customers
Studio
Websites that win customers
Press
Websites that win customers
Rave
Websites that win customers
Content#
- Three to six words of display type. The effect needs size to read as print rather than blur.
Do and don't#
Do
Built to be tested
Don't
A second ink on a paragraph of body text, so every line reads as a blur.
Accessibility#
- The text stays one text node, square, on its plate; the shadow is the press check's one sanctioned exception to the two layers.
- Never on body text, labels, names or numerals in rows (lint
mk/second-ink-role). - Reduced motion: the rest state at once.
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "art" | "text" | none | |
children required | string | ((ink: string, sep: Sep) => ReactNode) | none | Draws one plate: its ink (`var(--mk-sep-x)`) and separation. The display line (one text node). |
state | MisregistrationState | rest | `auto` follows the scope's `data-mk-second-ink` (default `rest`, D-D6). |
as | "div" | "span" | none | |
className | string | none | |
style | StyleVars | none | |
id | string | none |
Tokens#
System tokens (15)
--mk-a-snap--mk-cx-art-blend--mk-dur-register--mk-ease-register--mk-ov-ink--mk-ov-mode--mk-ov-on--mk-ov-on-head--mk-sep-c--mk-sep-k--mk-sep-m--mk-sep-y--mk-v-sep-off--mk-v-sep-plates--mk-w-p3
Its own properties (11)
--mk-misreg-k--mk-ov-cy--mk-ov-k--mk-ov-rx--mk-ov-ry--mk-ov-switch--mk-ov-x--mk-ov-y--mk-sep-rank--mk-sep-ux--mk-sep-uy
Changelog#
Arrived in 0.1.0.
- misregistration: display type (
mk-type-display,mk-type-head-section,mk-type-head-cardand the second ink's.mk-ov) breaks a word that is wider than its column inside the box instead of overflowing it, so a long word at the display floor no longer pushes a 320 px page sideways (DF-52, WCAG 1.4.10). Lines whose words fit are unchanged.
- The print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and
gen-print-tiles), the print kit (Halftone,Overprint,PrinterMarks,Sticker,Stamp,Seal,useStampLand,Tape,Grain,Misregistrationand the.mk-ovsecond ink,GiantGlyph,ShapeGlyph), the dataCover(grid and score,coverAlt,CoverLegend), the comic registers and kit (Panel,PanelGrid,Balloon,Caption,CornerBox,EditorsNote,ContinuedIn,SFX,SfxBurst,SpeedLines,FocusLines,ImpactStar,KeyPop).