Gallery
69 demos across 36 items. Open an item to see all of its demos on one page, light and dark.
primitive
- button
Stock button with a hand-drawn ink outline and solid ink fill (needs ink-frame), plus an sfx variant.
- badge
Stock badge restyled as a manga caption-box label: square corners, uppercase display face, hand-drawn ink outline (needs ink-frame), no press feedback, plus a spot variant for the one red label.
- separator
Stock separator drawn as one hand-drawn ink stroke (needs ink-frame).
- card
Stock card drawn as a hand-inked panel on paper (needs ink-frame), with an optional solid or hatched ink shadow.
- input
Stock input inside a hand-drawn ink outline on paper (needs ink-frame); spot outline when invalid.
- textarea
Stock textarea inside a hand-drawn ink outline on paper (needs ink-frame); spot outline when invalid.
- checkbox
Stock checkbox drawn as a hand-inked box that fills with ink when checked (needs ink-frame).
- radio-group
Stock radio group drawn as hand-inked circles that fill with ink when checked (needs ink-frame).
- switch
Stock switch with a hand-drawn tone track that turns ink when on and a paper thumb (needs ink-frame).
- select
Stock select with a hand-drawn ink trigger and a heavy-outlined popup, no shadow (needs ink-frame).
- tabs
Stock tabs on a hand-drawn rule, the active tab outlined on three sides; line variant with an inked underline (needs ink-frame).
- dialog
Stock dialog on an ink overlay, drawn with a heavy hand-inked outline and no shadow (needs ink-frame).
- sheet
Stock sheet on an ink overlay; its open edge is one heavy hand-drawn stroke, no shadow (needs ink-frame).
- tooltip
Stock tooltip as an ink-filled popup with a heavy hand-drawn outline (needs ink-frame).
- popover
Stock popover with a heavy hand-inked outline on paper and no shadow (needs ink-frame).
- accordion
Stock accordion with hand-drawn item rules and a + / − ink glyph in place of the chevrons (needs ink-frame).
- alert
Stock alert in a hand-drawn ink outline (needs ink-frame); destructive inks the outline and title in spot.
- avatar
Stock avatar with a hand-drawn ink circle over the picture (needs ink-frame).
- progress
Stock progress bar in a hand-drawn ink track (needs ink-frame), solid ink or a screentone fill.
- skeleton
Stock skeleton as a pencilled placeholder: a rough tone outline with hatched shading, pulsing (needs ink-frame); shape="ellipse" for round ones.
- table
Stock table with hand-drawn row rules and a heavy header rule (needs ink-frame).
layout
text
- speech-bubble
Dialogue bubble with a hand-drawn tail: round, square, shout burst or dashed whisper, seven tail positions (needs ink-frame).
- thought-bubble
Dashed hand-drawn thought bubble with a trail of one to three rough ink dots (needs ink-frame).
- sfx-text
Onomatopoeia in the display face with ink stroke, hard shadow, tilt and a reduced-motion-safe pop or slam entrance.
- vertical-text
Vertical writing (vertical-rl) with text-orientation control for mixing Japanese and Latin.
background
- speed-lines
Decorative radial or horizontal motion lines behind content, with density, colour and a movable centre.
- focus-lines
Decorative concentration lines bursting in towards a point, as inline SVG at the speed-line width.
- halftone-background
Decorative full-bleed halftone screen in three tones and dot sizes, with an optional top, bottom or radial fade.
decoration
feedback
- ink-splash-loader
Loading status: an ink blot that pulses and splashes droplets, still under reduced motion, with a hidden label.
animation
- manga-motion
Spring and easing presets plus popIn, slamIn, shake and flash variants for motion.
- page-turn
Turns its children like a manga page when pageKey changes (right to left by default); cross-fades under reduced motion.
data
- manga-frame
Image in a hand-drawn ink frame with aspect presets, a halftone mat and a caption; alt is required (needs ink-frame).