# Linework

> Interactive isometric line illustrations in the style of modern product landing pages. 94 figures across 31 topics, each one idea drawn as one object that answers the cursor.

Linework is a library of interactive isometric line illustrations for product landing pages, in the quiet,
line-drawn style of modern product sites. Each figure is one object standing for one idea (a zipper for a git merge,
a vault dial for security) drawn in a single hairline stroke, and it answers the cursor. A product by Devsloka
(https://devsloka.in). Figures were drawn with the Hairline skill by Lucas Markes (https://hairline.lucasmarkes.com/skill).

## Install

Every figure is a shadcn registry item. Install one into a React / Next.js project with:

    npx shadcn@latest add https://linework.devsloka.in/r/<figure>.json

then render it: `import { Zipper } from "@/components/linework/zipper"` and `<Zipper />`.
The first figure also installs the shared engine into `lib/linework`. Props: `readout`, `tour`, `label`, `className`.
Registry index: https://linework.devsloka.in/r/registry.json

## Topics

- [UI/UX Design](https://linework.devsloka.in/topics/ui-ux): Switchboard, Fandeck, Wireframe
- [Web Dev](https://linework.devsloka.in/topics/web-dev): Keyboard, Server Rack, Locks
- [Frontend](https://linework.devsloka.in/topics/frontend): Breakpoints, Layers, Pixels
- [Backend](https://linework.devsloka.in/topics/backend): Message Queue, Shards, Load Balancer
- [Full Stack](https://linework.devsloka.in/topics/full-stack): Tiered Stack, Elevator, Toolbox
- [Motion Graphics](https://linework.devsloka.in/topics/motion-graphics): Flipbook, Zoetrope, Ease Rail
- [Video Editing](https://linework.devsloka.in/topics/video-editing): Timeline, Film Reels, Splice
- [Sound Design](https://linework.devsloka.in/topics/sound-design): Mixing Desk, Knob Panel, Speaker Wall
- [SEO](https://linework.devsloka.in/topics/seo): Loupe, Rankings, Card Catalog
- [Content Creation](https://linework.devsloka.in/topics/content-creation): Dolly, Clapper, Ring Light
- [Social Media](https://linework.devsloka.in/topics/social-media): Crowd, Feed, Dominoes
- [Esports](https://linework.devsloka.in/topics/esports): Jerseys, Trophy, Lineup
- [Podcasts](https://linework.devsloka.in/topics/podcasts): Boom Arm, Round Table, Tapes
- [Empty States](https://linework.devsloka.in/topics/empty-states): Sieve, Not Found, Hangers, Letter Trays
- [DevOps](https://linework.devsloka.in/topics/devops): Conveyor, Crane, Valves
- [Git](https://linework.devsloka.in/topics/git): Railyard, Zipper, Hanoi
- [Databases](https://linework.devsloka.in/topics/databases): Hard Drive, Rolodex, Jars
- [AI/ML](https://linework.devsloka.in/topics/ai-ml): Abacus, Descent, Robot Arm
- [Security](https://linework.devsloka.in/topics/security): Vault, Keyring, Bollards
- [Testing](https://linework.devsloka.in/topics/testing): Coverage, Calipers, Test Tubes
- [Mobile](https://linework.devsloka.in/topics/mobile): Home Screen, Foldable, Watch
- [Analytics](https://linework.devsloka.in/topics/analytics): Funnel, Balance, Cylinders
- [Landing Page](https://linework.devsloka.in/topics/landing-page): Bento, Scroll, Brochure
- [SaaS](https://linework.devsloka.in/topics/saas): Meter, Plans, Seats
- [AI Chat](https://linework.devsloka.in/topics/ai-chat): Bubbles, Context Window, Hopper
- [F1](https://linework.devsloka.in/topics/f1): Start Lights, Pit Stop, DRS
- [MotoGP](https://linework.devsloka.in/topics/motogp): Lean, Helmet, Paddock
- [Cars](https://linework.devsloka.in/topics/cars): Car Lift, Shifter, Convertible
- [Monster](https://linework.devsloka.in/topics/monster): Crate, Fridge, Crusher
- [Red Bull](https://linework.devsloka.in/topics/red-bull): Vending, Can Tower, Ice Bucket
- [Diet Coke](https://linework.devsloka.in/topics/diet-coke): Six-Pack, Pour, Pull Tab

## Figures

- [Switchboard](https://linework.devsloka.in/figures/switchboard): A panel of toggle switches: the ones near the pointer flip, spreading outwards from it. (UI/UX Design)
- [Fandeck](https://linework.devsloka.in/figures/fandeck): A swatch fan pinned at one end: the strip under the pointer lies open as the others swing aside. (UI/UX Design)
- [Wireframe](https://linework.devsloka.in/figures/wireframe): A page's layout as tiles on a grid: the parts near the pointer lift off their slots, the farther the less. (UI/UX Design)
- [Keyboard](https://linework.devsloka.in/figures/keyboard): A mechanical keyboard: the keys near the pointer press down on their springs, the farther the less. (Web Dev)
- [Server Rack](https://linework.devsloka.in/figures/serverrack): A server cabinet: the blades near the pointer's height slide out, the farther the less, staggered outwards from it. (Web Dev)
- [Locks](https://linework.devsloka.in/figures/locks): A pipeline as a flight of canal locks: up to the lock under the pointer, gates open and the water steps down. (Web Dev)
- [Breakpoints](https://linework.devsloka.in/figures/devices): One page on a phone, a tablet and a laptop, ruled to each width: the device under the pointer stands up. (Frontend)
- [Layers](https://linework.devsloka.in/figures/layers): A UI pulled apart into its layers: the pointer's x spreads the stack, its y picks a layer. (Frontend)
- [Pixels](https://linework.devsloka.in/figures/pixels): A screen of pixels: the pointer lights the ones it passes and they fade, until a button glows back. (Frontend)
- [Message Queue](https://linework.devsloka.in/figures/queue): A message queue as a conveyor: crates ride through a gate to a worker; hovering slows the belt so one message can be read. (Backend)
- [Shards](https://linework.devsloka.in/figures/shards): A database as a stack of disk platters: the shard at the pointer's height slides out, and its neighbours part to let it go. (Backend)
- [Load Balancer](https://linework.devsloka.in/figures/plinko): A load balancer as a plinko board: where the pointer drops the balls, the bins below it fill, the farther the fewer. (Backend)
- [Tiered Stack](https://linework.devsloka.in/figures/tiers): The full stack as a tiered stand: pick a tier and the layers above it lift apart, from the database up to the UI. (Full Stack)
- [Elevator](https://linework.devsloka.in/figures/elevator): A building cut open, database to rooftop UI: the pointer's height calls the car to a floor, and its doors open there. (Full Stack)
- [Toolbox](https://linework.devsloka.in/figures/toolbox): A cantilever toolbox: the pointer's height swings its arms, and three trays of tools step up and out of the box. (Full Stack)
- [Flipbook](https://linework.devsloka.in/figures/flipbook): A flipbook on a desk: the pointer scrubs its pages, flipping the ones before it and standing the one at it mid-turn. (Motion Graphics)
- [Zoetrope](https://linework.devsloka.in/figures/zoetrope): A zoetrope you push round: friction bleeds the spin and a detent stops it with one frame facing you. (Motion Graphics)
- [Ease Rail](https://linework.devsloka.in/figures/easerail): Five beads on rails chase one target, each on its own spring from stiff to loose: five easings side by side. (Motion Graphics)
- [Timeline](https://linework.devsloka.in/figures/timeline): An editing timeline made solid: the playhead follows the pointer, and the clips under it rise. (Video Editing)
- [Film Reels](https://linework.devsloka.in/figures/reels): Film wound between two reels on a splicing bench: push it, friction slows it, and a sprocket detent stops it on a frame. (Video Editing)
- [Splice](https://linework.devsloka.in/figures/splice): A strip of film frames on a cutting mat: the pointer cuts it at a frame, and the two ends slide apart from the cut. (Video Editing)
- [Mixing Desk](https://linework.devsloka.in/figures/mixer): A mixing desk: the faders near the pointer slide up their slots, the farther the less. (Sound Design)
- [Knob Panel](https://linework.devsloka.in/figures/knobs): A panel of rotary knobs: each turns its pointer fin towards the pointer, the near ones all the way, the far ones only part way. (Sound Design)
- [Speaker Wall](https://linework.devsloka.in/figures/speakerwall): A wall of speaker cabinets: the cones the pointer passes push out, and relax as the sound decays. (Sound Design)
- [Loupe](https://linework.devsloka.in/figures/loupe): A loupe over a board of keyword tiles: the tiles under the lens rise to meet it, less the farther they lie. (SEO)
- [Rankings](https://linework.devsloka.in/figures/podium): Search results as a staircase from rank 1: the one under the pointer rises and steps forward as the rest sink back. (SEO)
- [Card Catalog](https://linework.devsloka.in/figures/catalog): The index as a card catalog: the drawer under the pointer slides out on its cards, and its neighbours follow a little. (SEO)
- [Dolly](https://linework.devsloka.in/figures/dolly): A camera on a slider rail: the carriage follows the pointer along the track, and the camera pans to keep its subject. (Content Creation)
- [Clapper](https://linework.devsloka.in/figures/clapper): A film slate: the pointer's height opens the clapstick on its hinge, and bringing it low claps it shut. (Content Creation)
- [Ring Light](https://linework.devsloka.in/figures/ringlight): A ring light on its stand: the LEDs nearest where the pointer aims round the ring light up, and fade as it moves on. (Content Creation)
- [Crowd](https://linework.devsloka.in/figures/crowd): Followers crowd round one influencer; near the pointer they lean towards it and stand taller. (Social Media)
- [Feed](https://linework.devsloka.in/figures/feed): A phone's feed scrolls on without end; hovering slows it so one post can be read, and that post lifts. (Social Media)
- [Dominoes](https://linework.devsloka.in/figures/dominoes): A spiral of dominoes: the one under the pointer falls, and every one after it follows in turn. (Social Media)
- [Jerseys](https://linework.devsloka.in/figures/jerseys): A rail of team jerseys: the one under the pointer swings round to face you and lifts, and the rest slide apart. (Esports)
- [Trophy](https://linework.devsloka.in/figures/trophy): A trophy on a turntable: the pointer pushes it round, friction bleeds the spin, and a detent catches it on a face. (Esports)
- [Lineup](https://linework.devsloka.in/figures/lineup): Five players' chairs on a stage: the one under the pointer rises and turns to face you, and the others step back. (Esports)
- [Boom Arm](https://linework.devsloka.in/figures/boomarm): A podcast mic on a desk boom arm: the arm swings and reaches toward the pointer, and the mic tilts to aim at it. (Podcasts)
- [Round Table](https://linework.devsloka.in/figures/roundtable): Four mics round a podcast table: the one nearest the pointer rises to speak, and the others dip in turn. (Podcasts)
- [Tapes](https://linework.devsloka.in/figures/tapes): A podcast's archive of cassettes in a rack: the episode under the pointer slides up out of it, and its neighbours lean away. (Podcasts)
- [Sieve](https://linework.devsloka.in/figures/sieve): No results: a stack of graded sieves, every mesh bare. The ones above the sieve under the pointer lift to show it empty. (Empty States)
- [Not Found](https://linework.devsloka.in/figures/notfound): Not found: a card file pulled open, every card blank. The cards near the pointer riffle open, less the farther they lie. (Empty States)
- [Hangers](https://linework.devsloka.in/figures/hangers): An empty cart: a clothes rail of bare hangers. The one under the pointer lifts off, and its neighbours slide apart. (Empty States)
- [Letter Trays](https://linework.devsloka.in/figures/trays): Inbox zero: a stack of letter trays, every one empty. The tray under the pointer slides out, its neighbours a little less. (Empty States)
- [Conveyor](https://linework.devsloka.in/figures/conveyor): A build pipeline as a belt through three hoods: build, test, deploy. Hovering slows the belt so one artifact can be read. (DevOps)
- [Crane](https://linework.devsloka.in/figures/crane): A deploy as a gantry crane over stacked containers: the trolley runs to the stack under the pointer and lowers onto it. (DevOps)
- [Valves](https://linework.devsloka.in/figures/valves): A rollout as a pipe manifold: the pointer's x opens every valve, its y picks one, and its handwheel climbs as it turns. (DevOps)
- [Railyard](https://linework.devsloka.in/figures/railyard): Branches as a rail yard: the switches throw toward the siding under the pointer, and the wagon rolls onto it. (Git)
- [Zipper](https://linework.devsloka.in/figures/zipper): A merge as a zipper: the slider follows the pointer, the teeth behind it lock and the two tapes ahead of it splay apart. (Git)
- [Hanoi](https://linework.devsloka.in/figures/hanoi): A rebase as a Tower of Hanoi: the discs on the other pegs lift and are replayed on top of the peg under the pointer. (Git)
- [Hard Drive](https://linework.devsloka.in/figures/harddrive): An open hard drive: the arm seeks the track at the pointer's distance from the spindle, on a spring. (Databases)
- [Rolodex](https://linework.devsloka.in/figures/rolodex): A rotary card file you push round: friction bleeds the spin and a detent stops it with one card upright. (Databases)
- [Jars](https://linework.devsloka.in/figures/jars): A key-value store as a shelf of lidded jars: the one under the pointer lifts and pops its lid, its neighbours shift aside. (Databases)
- [Abacus](https://linework.devsloka.in/figures/abacus): Weights as an abacus on the desk: the pointer pulls the beads of nearby rods toward it, less the farther the rod. (AI/ML)
- [Descent](https://linework.devsloka.in/figures/descent): Gradient descent: the pointer presses a dip into a pin-cushion landscape and the marble rolls downhill into the lowest place it can reach. (AI/ML)
- [Robot Arm](https://linework.devsloka.in/figures/robotarm): An agent as a desk robot arm: it turns and bends to reach over the point under the pointer, as far as its reach allows. (AI/ML)
- [Vault](https://linework.devsloka.in/figures/vault): A safe's combination dial: push it round, friction slows it, a detent catches a stop, and the right one turns the handle. (Security)
- [Keyring](https://linework.devsloka.in/figures/keyring): A bunch of keys on a split ring: the key under the pointer swings up off the pile, and the rest fan aside from it. (Security)
- [Bollards](https://linework.devsloka.in/figures/bollards): A firewall as a line of security bollards across a road: the ones near the pointer sink into the ground, the farther the less. (Security)
- [Coverage](https://linework.devsloka.in/figures/coverage): A bed-of-nails test fixture: the pointer presses the spring pins it passes, and each springs back on its own decay. (Testing)
- [Calipers](https://linework.devsloka.in/figures/calipers): A caliper measures a machined block: its jaw follows the pointer, and stops at the block, which it cannot close past. (Testing)
- [Test Tubes](https://linework.devsloka.in/figures/testtubes): A rack of test tubes, one failed: the tube under the pointer lifts out, and its neighbours rise a little in turn. (Testing)
- [Home Screen](https://linework.devsloka.in/figures/homescreen): A phone's home screen: the app tiles near the pointer rise off the glass, the farther the less. (Mobile)
- [Foldable](https://linework.devsloka.in/figures/foldable): A foldable phone standing half-open: the pointer's x folds it, from nearly shut to flat, and the screen bends with it. (Mobile)
- [Watch](https://linework.devsloka.in/figures/watch): A smartwatch on its strap: push it round, the crown and a ring of dots turn, friction slows them, a detent catches a tick. (Mobile)
- [Funnel](https://linework.devsloka.in/figures/funnel): A conversion funnel as stacked, tapering bowls: the pointer's x pulls the stages apart, its height picks one. (Analytics)
- [Balance](https://linework.devsloka.in/figures/balance): An A/B test as a beam balance: the beam tips toward the side under the pointer, and that pan's lead is read out. (Analytics)
- [Cylinders](https://linework.devsloka.in/figures/cylinders): A week of metrics as graduated cylinders: the levels near the pointer rise, falling off along the row. (Analytics)
- [Bento](https://linework.devsloka.in/figures/bento): A bento grid as a bento box: the blocks in the compartments near the pointer rise, the farther the less. (Landing Page)
- [Scroll](https://linework.devsloka.in/figures/scroll): A long page as a paper scroll: the pointer drags the leading roller, and the sheet unrolls behind it, section by section. (Landing Page)
- [Brochure](https://linework.devsloka.in/figures/brochure): Above the fold as a tri-fold brochure standing on the desk: the pointer unfolds its panels, one fold and then the next. (Landing Page)
- [Meter](https://linework.devsloka.in/figures/meter): Usage billing as a utility meter: the pointer runs the usage up and down, and its four geared dials turn, each a tenth as fast. (SaaS)
- [Plans](https://linework.devsloka.in/figures/plans): Pricing tiers as nested crates, free inside pro inside enterprise: pick one and the crates around it fold their walls down. (SaaS)
- [Seats](https://linework.devsloka.in/figures/seats): Seat-based licensing as a row of office chairs: the ones near the pointer swivel round to face it, the farther the less. (SaaS)
- [Bubbles](https://linework.devsloka.in/figures/bubbles): A chat as speech bubbles standing in two columns: the message under the pointer lifts forward and the rest part from it. (AI Chat)
- [Context Window](https://linework.devsloka.in/figures/context): A context window as a frame over a tape of tokens: the tokens inside stand up, and the pointer slides the tape through. (AI Chat)
- [Hopper](https://linework.devsloka.in/figures/hopper): Tokens pour from a hopper down a chute into a bin; hovering the stream slows the pour so one token can be read. (AI Chat)
- [Start Lights](https://linework.devsloka.in/figures/startlights): A start gantry: the pointer lights the five pods one by one, left to right, and leaving is lights out. (F1)
- [Pit Stop](https://linework.devsloka.in/figures/pitstop): A race car up on its jacks: the wheel under the pointer slides off its hub, and the other three ease off after it. (F1)
- [DRS](https://linework.devsloka.in/figures/drs): A race car's rear wing: the pointer's x opens the DRS flap, from closed to its widest, and the slot under it opens with it. (F1)
- [Lean](https://linework.devsloka.in/figures/lean): A racing bike on the apex kerb: the pointer sets how far it leans into the corner, rolling onto its tyres' edges. (MotoGP)
- [Helmet](https://linework.devsloka.in/figures/helmet): A race helmet on its stand: push it round, friction slows the spin, and a detent catches it facing one of eight stops. (MotoGP)
- [Paddock](https://linework.devsloka.in/figures/paddock): Race bikes on paddock stands in a garage: the one picked rolls forward off its stand, and the others shift aside in turn. (MotoGP)
- [Car Lift](https://linework.devsloka.in/figures/carlift): A sports car on a two-post lift: the pointer's height raises it, the arms and carriages riding up the columns with it. (Cars)
- [Shifter](https://linework.devsloka.in/figures/shifter): A six-speed gear lever: the gear under the pointer is picked, and the lever travels the H gate to it through neutral. (Cars)
- [Convertible](https://linework.devsloka.in/figures/convertible): A roadster's soft top: the pointer's x folds it back into the tonneau, bow by bow, each on its own spring, so the fold ripples. (Cars)
- [Crate](https://linework.devsloka.in/figures/crate): A crate of tall cans: the can under the pointer lifts out of its cell, and its neighbours rise a little in turn. (Monster)
- [Fridge](https://linework.devsloka.in/figures/fridge): A glass-door drinks fridge: the pointer's sideways reach swings the door open on its hinge, the cans waiting on the shelves. (Monster)
- [Crusher](https://linework.devsloka.in/figures/crusher): A press over a tall can: the pointer lowers the ram, and the can's wall folds into rings as it gives way. (Monster)
- [Vending](https://linework.devsloka.in/figures/vending): A vending machine of slim cans: the coil under the pointer turns, and its front can tips off and drops into the bin. (Red Bull)
- [Can Tower](https://linework.devsloka.in/figures/cantower): A pyramid of slim cans: the cans near the pointer lift off their seats and lean away, the farther the less. (Red Bull)
- [Ice Bucket](https://linework.devsloka.in/figures/icebucket): An ice bucket of slim cans: the can under the pointer stands up out of the ice, and the others tilt aside in turn. (Red Bull)
- [Six-Pack](https://linework.devsloka.in/figures/sixpack): Six cans in a ring carrier: the one under the pointer pulls up out of its ring, and the rest tilt after it. (Diet Coke)
- [Pour](https://linework.devsloka.in/figures/pour): A can pouring into a glass: the pointer tilts the can, and past the tipping point the level in the glass rises. (Diet Coke)
- [Pull Tab](https://linework.devsloka.in/figures/pulltab): A can's pull tab up close: the pointer lifts the tab on its rivet, and its nose pushes the scored panel into the can. (Diet Coke)

## Optional

- [Full reference](https://linework.devsloka.in/llms-full.txt): every figure with its install command and usage
- [Registry index](https://linework.devsloka.in/r/registry.json): machine-readable list of every installable item
- [Sitemap](https://linework.devsloka.in/sitemap.xml)