SFX are art, not words. Each voice has a burst shape and a width: POW on a starburst, BOOM on a halftone cloud, ZAP on an electric burst with bolts and a second ink, KRAK on a cracked plate. The burst is sized from the estimated word width, so nothing is measured. SfxBurst is the bare shape for behind blocks and hits.
Example#
Usage#
Use an SFX for a sound effect a visitor causes: a press, a hit, an arrival. POW!, BOOM!, ZAP! and KRAK! are presets with their own width, slant, burst and extrusion; custom SFX set those by hand.
- Caused, decorative, hidden. An SFX is always
aria-hidden, never focusable and never the only label of anything (D-F5). If a moment carries a message, the message is reading-layer text and the SFX decorates it. causedispatchesmk:sfxso the sound engine can play the matching voice when sound is on.- Sizes.
s,m,landxl; on phones they scale down and never overlap the text column.
Layer and volume#
Art: per view Quiet 0 (hidden), Studio 1, Press 2, Rave 4. It pops in once (700 ms) and tilts at most the volume's cap. Line inks only at Press and up.
Anatomy#
- BurstThe shape behind the word, sized from its width.
data-mk-part="burst" - LetteringAnybody, extruded, in the support ink.
data-mk-part="lettering"
Volume#
Quiet
Studio
Press
Rave
Content#
- One word, capitals, 2 to 8 letters, up to two "!" (
checkSfx). - Never a brand, a number, a price or a status word ("FREE!", "ERROR!" and "SALE!" fail).
- Never on an error, a destructive confirmation, a price, a legal line or a form field.
Do and don't#
Do
Sent. It is in my inbox now.
Don't
An SFX reading "ERROR!" over a failed payment.
Accessibility#
- Always
aria-hidden, never focusable, never the only label of anything; a message lives in reading text beside it ("Sent. It is in my inbox now."). - Words pass
checkSfx: one word in capitals, 2 to 8 letters, no prices, status or error words. - Reduced motion: static at rest.
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
word required | string | none | One word that passes `checkSfx` ("POW!"). |
voice | SfxVoice | none | |
size | SfxSize | none | |
wdth | number | none | Custom voice: |
italic | boolean | none | |
weight | number | none | |
shape | SfxShape | none | |
extrude | [number, number] | none | |
tracking | number | none | |
fill | InkRef | none | |
burstInk | InkRef | none | |
line | InkRef | none | |
extrudeInk | InkRef | none | |
second | InkRef | none | |
rotate | number | per voice | Degrees (default per voice); clamped to ±`--mk-v-tilt-max`. |
cause | SfxCause | none | What caused it (the motion runtime dispatches `mk:sfx` with this kind). |
delay | number | none | ms before the pop. |
seed | number | none | |
children | undefined | none |
Tokens#
System tokens (16)
--mk-a-flex--mk-a-pop--mk-dur-sfx-hold--mk-dur-sfx-out--mk-dur-sfx-pop--mk-ease-out--mk-ease-pop--mk-font-display--mk-font-display-italic--mk-ink--mk-ink-spot--mk-ink-support--mk-ov-ink--mk-v-sfx--mk-v-tilt-max--mk-w-quiet
Its own properties (8)
--mk-key-pop-size--mk-key-pop-wdth--mk-sfx-burst--mk-sfx-extrude--mk-sfx-fill--mk-sfx-k--mk-sfx-rot--mk-sfx-w
Changelog#
Arrived in 0.1.0.
PageWipe(link activation at Press and Rave, theflipvoice) andFlexWord(the width axis on a view timeline), and the SFX width flex at Press and Rave. Type: the server advance table (anybodyWidthEm,fitEm,estimateFit,FIT_CUTSin./art), which sizes SFX bursts within 1.5 % of the browser and givesFittedLineanestimatefor its first paint. Read the whole entry
- 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).