/// Media
LineArt
The house generative imagery — hundreds of thin currentColor strokes.
import { LineArt } from "@protocore/pds";The house imagery
LineArt is Protocore's illustration language: no fills, no photography, no gradients — light and volume implied purely by line density. Every field is hundreds of sub-pixel strokes drawn at low alpha with stroke="currentColor", so the whole field inverts automatically with the theme (the wrapper defaults to --pds-color-muted). Set the wrapper's color to retint it — --pds-color-accent for a hero, --pds-color-muted for a quiet backdrop. There are 44 variants in two families: band fields (wide 1000×400, full-bleed) and centered fields (square 1000×1000, rendered cover). Set the wrapper's height and let the field fill edge to edge — it is composed to leave no dead corners.
Band fields
Wide, full-bleed fields for section backdrops and strip dividers. They stretch to any aspect ratio. Good defaults: valley, horizon, sweep, grid, waveform.
Centered fields
Square, volumetric fields rendered cover so they fill their frame from the center — wireframe spheres, stacked discs, orbits, lattices. Use these where the composition has a clear focal point (a card, a feature tile, a spot illustration).
Hero fields (bold)
Four topic-expressive fields — converge (value transfer), circuit (hardware), ascend (growth), chain (on-chain state) — paired with the bold flag, which lifts the alpha cap and brightens focal points for large hero backdrops. Layer real content above with position: relative.
Draw-in animation
By default the strokes draw themselves in front-to-back on mount (animate, staggered ease-out via the shared pds-draw keyframe). Remount with a key to replay. Set animate={false} to render the final frame instantly.
Under prefers-reduced-motion the field renders its final frame instantly.
Usage budget
LineArt is deliberately quiet — treat it as texture, not content. One field per view. Keep it behind or beside real content, never competing with it: at --pds-color-muted (opacity capped at 0.42) it reads as a whisper; reserve bold and --pds-color-accent for a single hero moment per page. Never place body text directly over a dense field without a surface or scrim behind the text. Because it is pure currentColor line work it costs nothing in assets and re-themes for free — but its restraint is what makes it read as *system*, not decoration.
Usage
Do
- Set an explicit height on the wrapper and let the field fill it edge to edge.
- Control tint with the wrapper's `color` — `--pds-color-muted` for backdrops, `--pds-color-accent` for a hero.
- Reserve `bold` for large hero backdrops that need presence.
- Give text over a field a surface or scrim so it stays legible.
Don't
- Don't stack multiple LineArt fields in one viewport — one field, one moment.
- Don't raise the opacity past the designed cap; density, not alpha, carries the image.
- Don't lay unscrimmed body copy directly over a dense centered field.
- Don't treat it as a data visual — for real data use Sparkline or the charts family.
Accessibility
- The root `<svg>` is `aria-hidden` — LineArt is purely decorative and never announced. Convey any meaning in adjacent real text.
- The draw-in respects `prefers-reduced-motion`: under it the field renders its final frame with no animation.
- Strokes use `currentColor`, so contrast follows the surrounding text color and inverts with the theme automatically.
- No focus, no interaction — it never sits in the tab order.
LineArt props
| Prop | Type | Default | Description |
|---|---|---|---|
animate | boolean | true | Draw the strokes in on mount (front-to-back, ease-out). Set false — or rely on `prefers-reduced-motion` — to render the final frame instantly. |
bold | boolean | false | Bolder rendering — denser alpha, brighter focal points. For hero fields. |
className | string | — | Extra className on the root `<svg>`. |
style | CSSProperties | — | Inline style merged onto the root `<svg>`. |
variant | enum | valley | Which generative field to render. |