# Slopless Design

> A free design picker coding agents open mid-task. The user picks a design; the agent gets a design code ("sd1.…") that expands into design/DESIGN.md, design/tokens.json and design/layout.json, and builds from them. Every page below is server-rendered and readable without JavaScript.

DESIGN.md and tokens.json are always the source of truth. The live pages are visual references: look at them before building a section (screenshot at 1440 px and 375 px with a browser tool, or read the HTML) and compare your build with them at the end.

## For a design code

- [Reference render](https://slopless.kuldeep.cc/r/<code>): the whole design drawn by the preview renderer with sample copy. Add ?viewport=desktop|tablet|phone and ?page=<page type> (home, about, menu, contact…). Each section root has data-pattern="<pattern id>"; the panel under the design lists the sections in order with their rules.
- [One pattern](https://slopless.kuldeep.cc/r/<code>/p/<pattern id>): that pattern alone with the design's tokens (?viewport= too), with its rule, grid areas, slots, notes, layout tree and component example.
- [Spec bundle JSON](https://slopless.kuldeep.cc/api/spec/<code>): the same files get_design_spec returns (REST mirror; ?previous_code=&previous_revision= when editing).
- [MCP server](https://slopless.kuldeep.cc/mcp): Streamable HTTP, no auth. Tools: start_design_session, get_design_spec, edit_design, get_style_reference.
- [Picker](https://slopless.kuldeep.cc/pick): #c=<code> reopens a design; #b=<brief> starts one.

## Styles

Principles, do and don't, and every pattern the style owns rendered live at desktop and phone width; each pattern has an anchor: #<pattern id>.

- [Art Deco](https://slopless.kuldeep.cc/library/styles/art-deco): Jazz-age luxury on a central axis: gold display capitals on near-black, stepped double-ruled frames, sunbursts, arches and diamond ornaments.
- [Athletic Sport](https://slopless.kuldeep.cc/library/styles/athletic-sport): Matchday energy: condensed italic capitals slanted forward, giant jersey numbers, diagonal bands and racing stripes, scoreboard figures and tickers, in hard high-contrast colour.
- [Bauhaus](https://slopless.kuldeep.cc/library/styles/bauhaus): Dessau-workshop modernism: flat circles, squares and triangles in red, yellow and blue, lowercase geometric sans and compositions built from solid colour fields.
- [Bento Tech](https://slopless.kuldeep.cc/library/styles/bento-tech): A modular product page built like a bento box: tiles of different sizes locked into a tight grid, dense with numbers, product UI screenshots and mono details, set in one crisp sans.
- [Broadsheet Newspaper](https://slopless.kuldeep.cc/library/styles/broadsheet-newspaper): A front page on newsprint: a blackletter nameplate between double rules, datelines and ears, bold serif headlines in a strict hierarchy, and dense justified columns split by vertical rules.
- [Brutalist](https://slopless.kuldeep.cc/library/styles/brutalist): Raw web brutalism: system and mono type, visible 2 px borders on every cell, default-blue underlined links, harsh black-on-white contrast and zero polish.
- [Classical Bookish](https://slopless.kuldeep.cc/library/styles/classical-bookish): A well-made book on screen: an old-style serif on warm paper, a centred title page, small capitals and italics doing the hierarchy, generous book margins, marginal notes, footnotes and fleurons.
- [Constructivist](https://slopless.kuldeep.cc/library/styles/constructivist): Soviet avant-garde agitprop: red, black and newsprint cream, condensed bold capitals on steep diagonals, wedges, circles and bars, grayscale photomontage and type rotated up the margins.
- [Editorial Magazine](https://slopless.kuldeep.cc/library/styles/editorial-magazine): A printed feature magazine on screen: high-contrast serif display type, an inset reading measure with marginalia, italic deks, pull quotes, drop caps and generous margins.
- [Frosted Glass](https://slopless.kuldeep.cc/library/styles/frosted-glass): Translucent, blurred panels layered over a deep coloured field, overlapping each other in depth with hairline light edges, a clean geometric sans and quiet, precise type.
- [Japanese Minimal](https://slopless.kuldeep.cc/library/styles/japanese-minimal): Ma made visible: wide washi-paper space, a few small elements pinned to the far edges of the grid, vertical headings, sumi ink and a single vermilion seal.
- [Luxury Fashion](https://slopless.kuldeep.cc/library/styles/luxury-fashion): A maison look: enormous campaign photography, high-contrast Didone headlines in italic, tiny wide-tracked capitals, black and ivory, and whitespace so generous it reads as confidence.
- [Maximalist Collage](https://slopless.kuldeep.cc/library/styles/maximalist-collage): A scrapbook wall turned into a website: cut-out photos in mismatched frames piled over each other, fat display type mixed with italics and mono stickers, star and blob shapes, marquees, and every inch used.
- [Memphis](https://slopless.kuldeep.cc/library/styles/memphis): Memphis Group playfulness: clashing pastels with heavy black outlines, confetti triangles, squiggles and dots, tilted stickers and loud chunky type.
- [Mid-Century Modern](https://slopless.kuldeep.cc/library/styles/mid-century-modern): 1950s print optimism: flat orange, teal and mustard on cream paper, atomic starbursts, boomerangs and blobs, photos cut into circles and arches, and a bold, friendly geometric sans.
- [Neo-Brutalism](https://slopless.kuldeep.cc/library/styles/neo-brutalism): Flat bright fills boxed in thick black outlines with hard offset shadows, chunky heavy type and tilted sticker labels, like a toy-coloured interface drawn with a marker.
- [Neo-grotesk Minimal](https://slopless.kuldeep.cc/library/styles/neo-grotesk-minimal): Quiet contemporary minimalism: one neo-grotesk family at modest sizes, tiny uppercase labels, hairline rules and wide fields of white with content pushed to the right half.
- [Organic Earth](https://slopless.kuldeep.cc/library/styles/organic-earth): Clay, sand and moss tones on a grainy paper ground, soft serif headlines with a humanist sans, arched and pebble-shaped images and loose, staggered layouts that feel hand-placed.
- [Risograph Print](https://slopless.kuldeep.cc/library/styles/risograph-print): A small-press zine run through a risograph: two or three fluorescent spot inks on off-white stock, overprinted shapes and duotone photos, slightly misregistered heavy type and mono captions.
- [Scandinavian Soft](https://slopless.kuldeep.cc/library/styles/scandinavian-soft): Calm Nordic interiors on screen: pale warm neutrals, one rounded sans in light weights, soft-cornered photographs and panels inset from the page edge, and a lot of air.
- [Seventies Psychedelic](https://slopless.kuldeep.cc/library/styles/seventies-psychedelic): 1970s groove: fat rounded display type, sunset stripes of orange, mustard and brown, rising suns and concentric rings, wavy dividers and soft capsule shapes on warm cream.
- [Swiss International](https://slopless.kuldeep.cc/library/styles/swiss-international): The International Typographic Style: an asymmetric 12-column grid, flush-left grotesk type at extreme size contrast, hairline rules and a single signal colour.
- [Synthwave Retro-Future](https://slopless.kuldeep.cc/library/styles/synthwave-retro-future): An 80s night drive: neon pink and cyan on deep indigo, a striped sun sinking into a perspective grid horizon, chrome capitals and arcade-style scoreboards in mono.
- [Terminal Mono](https://slopless.kuldeep.cc/library/styles/terminal-mono): A dark terminal session as a website: one monospace face, window frames and panes, prompts and flags, ASCII rules and meters, phosphor green or amber on near-black, dense as a man page.
- [Y2K Chrome](https://slopless.kuldeep.cc/library/styles/y2k-chrome): Millennium-era optimism: liquid-chrome uppercase type, glossy bubbles, OS windows and sparkle stars over iridescent cyan-to-violet gradients, with pixel-font accents.

## Heroes

Hero library: any design can use these. Each page shows the hero live in the styles it suits, with its rules.

- [Asymmetric colour blocks](https://slopless.kuldeep.cc/library/heroes/asymmetric-blocks): `hero.asymmetric-blocks`, collage. The hero is cut into unequal colour blocks with no gaps: a big accent headline block (1–7, rows 1–2), a surface subhead block (8–12), a photo (8–10, rows 2–3), an accent2 CTA block (11–12), a surfaceAlt note (1–4) and an outlined caption block (5–7).
- [Cursor reveal](https://slopless.kuldeep.cc/library/heroes/interactive-cursor-reveal): `hero.interactive-cursor-reveal`, interactive. Eyebrow in 1–3 beside a display headline (step 5) in 4–12; a full-bleed 21:9 grayscale photo under it where a soft circle following the cursor reveals the colour version; hint, subhead and CTA below.
- [Cut-out over shapes](https://slopless.kuldeep.cc/library/heroes/collage-cutout): `hero.collage-cutout`, collage. A cut-out photo (person or product on a transparent background) stands in 6–11 in front of a large accent circle; a tilted accent2 bar sits at its foot; a huge uppercase headline crosses in front of its left edge in 1–8; subhead + CTA bottom-left.
- [Editorial columns](https://slopless.kuldeep.cc/library/heroes/editorial-columns): `hero.editorial-columns`, editorial. A ruled kicker bar spans the page; the headline runs 1–8 at step 7; below it a deck in 1–4 and a ruled text column in 5–8 start the story; a captioned 3:4 photo fills 9–12 beside both.
- [Editorial drop cap](https://slopless.kuldeep.cc/library/heroes/editorial-dropcap): `hero.editorial-dropcap`, editorial. A narrow measure (columns 2–10) carries eyebrow, a headline, byline and rule; the opening paragraph runs 2–10 and starts with a four-line drop cap; a marginal note sits in 11–12.
- [Editorial index](https://slopless.kuldeep.cc/library/heroes/editorial-index): `hero.editorial-index`, editorial. The hero is a table of contents: headline, subhead and link in 1–5 (sticky), and a ruled list of 4–7 numbered entries (number, title, meta) in 7–12; column 6 stays empty.
- [Form first](https://slopless.kuldeep.cc/library/heroes/form-first): `hero.form-first`, collage. The signup form is the hero's action: headline, subhead and an inline email form with a reassurance line in 1–6; a left-ruled column in 8–12 lists 3–4 numbered things you get.
- [Full-bleed duotone in an accent field](https://slopless.kuldeep.cc/library/heroes/fullbleed-duotone): `hero.fullbleed-duotone`, full-bleed. The hero is an accent-coloured field: headline at step 5 in onAccent across 1–10, subhead + CTA under it, then a duotone photo (accent × ink) running edge to edge at 21:9.
- [Full-bleed in a mat frame](https://slopless.kuldeep.cc/library/heroes/fullbleed-framed): `hero.fullbleed-framed`, full-bleed. The photo fills the viewport inside an even mat of page colour (one space step 3 on all sides); four labels sit in the mat's corners: eyebrow top-left, meta top-right, headline bottom-left, CTA bottom-right.
- [Full-bleed photo with caption](https://slopless.kuldeep.cc/library/heroes/fullbleed-photo-caption): `hero.fullbleed-photo-caption`, full-bleed. A photograph spans the full viewport width at 21:9; under it, a caption row like a museum plate: headline 1–7, caption and CTA 9–12. No text on the image.
- [Full-bleed, bottom plate](https://slopless.kuldeep.cc/library/heroes/fullbleed-overlay-bottom): `hero.fullbleed-overlay-bottom`, full-bleed. A photograph fills the whole viewport; a solid page-colour plate sits on its bottom-left (columns 1–7) holding eyebrow, headline, subhead and one CTA; a small caption plate sits bottom-right in 10–12.
- [Full-screen video with band](https://slopless.kuldeep.cc/library/heroes/video-fullscreen): `hero.video-fullscreen`, video. A muted looping video fills the viewport; a pause control sits top-right; a solid accent band across the bottom carries the headline (1–8) and one CTA (10–12).
- [Giant wordmark](https://slopless.kuldeep.cc/library/heroes/giant-wordmark): `hero.giant-wordmark`, oversized-type. The site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).
- [Headline with stickers](https://slopless.kuldeep.cc/library/heroes/collage-sticker): `hero.collage-sticker`, collage. A huge headline in 1–10 with stickers slapped on it: a tilted accent label overlapping its end (10–12), a star in 1–2 and a second tilted accent2 label in 9–11; subhead + CTA in 3–7.
- [Hover tile grid](https://slopless.kuldeep.cc/library/heroes/interactive-grid-hover): `hero.interactive-grid-hover`, interactive. Intro in 1–5 (headline top, subhead + CTA bottom); a 3-column grid of 6–9 bordered tiles (number + label) fills 6–12 and inverts tile by tile under the cursor.
- [Info poster](https://slopless.kuldeep.cc/library/heroes/poster-grid): `hero.poster-grid`, collage. Built like an event poster: a giant numeral or date in 1–4 beside an uppercase headline in 5–12; a large circle under the numeral; a 4-column grid of facts (when, where, price, who) with top rules in 5–12; subhead and CTA last.
- [Interactive 3D object](https://slopless.kuldeep.cc/library/heroes/interactive-3d-object): `hero.interactive-3d-object`, interactive. A draggable 3D object fills 6–12 for the full hero height; eyebrow top-left; subhead + CTA mid-left in 1–4; the display headline sits bottom-left in 1–5, running up to the object's edge; a 'drag to rotate' hint bottom-right.
- [Interactive terminal](https://slopless.kuldeep.cc/library/heroes/interactive-terminal): `hero.interactive-terminal`, interactive. Copy in 1–5 (mono eyebrow, headline, subhead, CTA, install line); a tall terminal window in 6–12 on surfaceAlt: a ruled title bar with the path, 4–7 mono prompt/output rows that type themselves, and a block cursor in the accent.
- [Justified type stack](https://slopless.kuldeep.cc/library/heroes/type-stack-justified): `hero.type-stack-justified`, oversized-type. Two bands of type between 2 px rules, each fitted to the full measure: the site name heavy at step 8, then the headline light at step 5 (one or two lines); a strip above (eyebrow, meta) and a strip below (subhead 1–5, CTA 10–12).
- [Logo only](https://slopless.kuldeep.cc/library/heroes/minimal-logo-only): `hero.minimal-logo-only`, minimal. A full-viewport hero with only the wordmark (site name at step 8) in the optical centre and the h1 as one small line under it; a footer row carries meta (1–4), a scroll cue (6–7) and a text link (10–12).
- [Magazine cover](https://slopless.kuldeep.cc/library/heroes/editorial-cover): `hero.editorial-cover`, editorial. A masthead (site name at step 8, full width) over a dateline rule; the cover photo fills 4–12; cover lines (3–5 numbered teasers) run down 1–3; the headline overlaps the photo's lower-left on a page-colour field.
- [Outline + fill type](https://slopless.kuldeep.cc/library/heroes/type-outline-fill): `hero.type-outline-fill`, oversized-type. Two display lines at step 6: the first solid across 1–12, the second outlined (stroke only) and indented to start at column 3; subhead + CTA sit under them in 1–4, meta bottom-right.
- [Photo crossed by a marquee band](https://slopless.kuldeep.cc/library/heroes/marquee-band): `hero.marquee-band`, collage. Headline (1–8) and subhead + CTA (10–12) above a full-bleed 21:9 photo; an accent marquee band runs across the middle of the photo, edge to edge.
- [Polaroid row](https://slopless.kuldeep.cc/library/heroes/collage-polaroid): `hero.collage-polaroid`, collage. Copy in 1–5; three instant-photo prints overlap in 6–12 on staggered rows: print one in 1–6 of that area, print two lower in 5–10 on top of it, print three high in 8–12. Each is a square photo on a surface-coloured card with a short handwritten-style caption.
- [Product bento](https://slopless.kuldeep.cc/library/heroes/product-bento): `hero.product-bento`, product. The hero is a bento of five tiles: a headline tile in 1–7 (rows 1–2), a tall product tile in 8–12 (rows 1–3), two stat tiles in 1–4 and an accent CTA tile in 5–7 on row 3.
- [Product with flanking specs](https://slopless.kuldeep.cc/library/heroes/product-floating-specs): `hero.product-floating-specs`, product. A square product shot in 4–9 is flanked by spec callouts: 2–3 feature labels in 1–3 and 2–3 numbers in 10–12, each with a top rule; the headline runs 1–8 underneath, price and CTA in 10–12.
- [Product, centred shot](https://slopless.kuldeep.cc/library/heroes/product-centered-shot): `hero.product-centered-shot`, product. Product launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.
- [Scattered collage](https://slopless.kuldeep.cc/library/heroes/collage-scattered): `hero.collage-scattered`, collage. Three photos of different crops are scattered on offset grid rows (4:5 in 1–4, 1:1 in 9–12, 3:4 in 7–9); a slightly rotated display headline crosses them in 2–11; subhead + CTA in 1–5 and a rotated caption in 10–12 close it.
- [Single line](https://slopless.kuldeep.cc/library/heroes/minimal-single-line): `hero.minimal-single-line`, minimal. One sentence as the h1 at step 4, flush left across 1–10 and vertically centred in a 60vh hero; one text link with an arrow in 11–12 on the same line. Nothing else.
- [Split with vertical video](https://slopless.kuldeep.cc/library/heroes/video-split): `hero.video-split`, video. Copy in 1–6 with a 3–4 row chapter list (timestamp + title); a 9:16 vertical video in 8–11 with a small 'now playing' caption under it.
- [Split, diagonal seam](https://slopless.kuldeep.cc/library/heroes/split-diagonal): `hero.split-diagonal`, split. A surface-coloured copy panel in 1–6 meets the image (6–12) on a diagonal seam; the panel holds the headline, one CTA and a row of 2–3 stats.
- [Split, media left](https://slopless.kuldeep.cc/library/heroes/split-media-left): `hero.split-media-left`, split. The image fills columns 1–7 at full hero height; column 8 stays empty; a narrow copy column in 9–12 sits on the bottom edge and ends in a ruled facts list and one CTA.
- [Split, media right](https://slopless.kuldeep.cc/library/heroes/split-media-right): `hero.split-media-right`, split. Copy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.
- [Split, offset stack](https://slopless.kuldeep.cc/library/heroes/split-offset-stack): `hero.split-offset-stack`, split. Three blocks step down the grid and overlap: the image in 5–12 (rows 1–2), a solid headline panel in 1–7 that covers the image's lower-left corner (rows 2–3), and a ruled subhead + link in 9–12 (row 3).
- [Statement, bottom-left](https://slopless.kuldeep.cc/library/heroes/minimal-statement-left): `hero.minimal-statement-left`, minimal. A tall, quiet hero: a mono index top-left and meta top-right on one row, and a two-to-three-line statement as the h1 at step 5 sitting on the bottom-left (1–9), with one underline link under it.
- [Ticker type bands](https://slopless.kuldeep.cc/library/heroes/type-ticker): `hero.type-ticker`, oversized-type. A slim intro row (h1 at step 3 in 1–6, subhead 7–10, CTA 11–12) above three full-bleed marquee bands of huge type: an accent band, a plain band and a surface band, alternating direction.
- [Tilted app screenshot](https://slopless.kuldeep.cc/library/heroes/product-screenshot-tilt): `hero.product-screenshot-tilt`, product. A two-zone intro (eyebrow + headline in 1–7, subhead + CTA in 9–12, bottom-aligned) over a large app screenshot in 3–12 that tilts back in perspective and bleeds past the right edge; a logo row closes the hero.
- [Vertical headline](https://slopless.kuldeep.cc/library/heroes/type-vertical): `hero.type-vertical`, oversized-type. The headline runs vertically up the left edge (columns 1–4) for the full hero height; the image fills 5–9; eyebrow sits top-right and subhead, CTA and meta sit bottom-right in 10–12.
- [Video inset under the headline](https://slopless.kuldeep.cc/library/heroes/video-inset-frame): `hero.video-inset-frame`, video. A full-width display headline at step 6; under it, on one row, a subhead + CTA in 1–4 and a wide 21:9 rounded video window in 5–12 that sits like part of the headline.
- [Whitespace with a single action](https://slopless.kuldeep.cc/library/heroes/minimal-whitespace-cta): `hero.minimal-whitespace-cta`, minimal. Columns 1–7 are left empty on purpose; a small block in 8–11 sits on the bottom edge: eyebrow, a short h1 at step 3 and one large primary button. Column 12 stays empty.

## Signature looks

Running demo, reduced-motion fallback, JS cost and the reviewed skills the agent installs (after asking the user).

- [Blend-mode cursor](https://slopless.kuldeep.cc/library/looks/custom-cursor-blend): `custom-cursor-blend`, cursor, about 28 KB. A circular follower replaces the cursor accent: it trails the pointer with a slight lag, inverts whatever is under it (mix-blend-mode: difference) and grows with a short label over links and media.
- [Film grain overlay](https://slopless.kuldeep.cc/library/looks/noise-grain-shader): `noise-grain-shader`, shader, about 2 KB. A fine, barely visible film grain over the whole page (or the hero), flickering at film speed, to take the digital edge off flat colour fields and photos.
- [Generative flow field](https://slopless.kuldeep.cc/library/looks/generative-flow-field): `generative-flow-field`, generative, about 6 KB. Thousands of fine particle trails follow a seeded noise field and slowly draw an organic pattern in the palette colours behind the hero; the same seed always draws the same picture.
- [Generative grid pattern](https://slopless.kuldeep.cc/library/looks/generative-grid-pattern): `generative-grid-pattern`, generative, about 1 KB. A seeded pattern of grid cells (Truchet tiles, arcs, bars, dots) in the palette colours fills a band or the hero's media slot, generated once as static SVG.
- [Kinetic headline](https://slopless.kuldeep.cc/library/looks/kinetic-headline): `kinetic-headline`, kinetic-type, about 34 KB. The hero headline assembles itself on load: lines and words slide up from a mask in a staggered sequence, then stay still. Built with GSAP and SplitText.
- [Magnetic buttons](https://slopless.kuldeep.cc/library/looks/magnetic-cursor): `magnetic-cursor`, cursor, about 28 KB. Primary buttons and key links pull gently towards the pointer when it comes close, then spring back; the button label moves slightly more than the button.
- [Page transitions](https://slopless.kuldeep.cc/library/looks/page-transitions): `page-transitions`, transition, about 1 KB. Navigating between pages cross-fades and morphs shared elements (logo, page title, hero image) with the View Transitions API instead of a hard cut.
- [Parallax layers](https://slopless.kuldeep.cc/library/looks/scroll-parallax-layers): `scroll-parallax-layers`, scroll, about 45 KB. Images and shapes in the hero and gallery sections drift at different speeds as you scroll, giving restrained depth; text never moves out of sync with its section.
- [Pinned scroll story](https://slopless.kuldeep.cc/library/looks/scroll-pinned-story): `scroll-pinned-story`, scroll, about 45 KB. One section pins to the viewport while the user scrolls through 3–5 steps: copy changes on one side while a media panel cross-fades or transforms on the other. The rest of the page scrolls normally.
- [R3F floating object](https://slopless.kuldeep.cc/library/looks/r3f-floating-object): `r3f-floating-object`, 3d, about 210 KB. A single 3D object (the product or a brand form) floats in the hero, idles with a slow bob and turns towards the pointer; drag to rotate. Built with React Three Fiber and drei.
- [Shader gradient background](https://slopless.kuldeep.cc/library/looks/shader-gradient-bg): `shader-gradient-bg`, shader, about 6 KB. A slow, living mesh-gradient field drawn by a fragment shader in the palette colours, behind the hero or one feature band. Only for styles that allow gradients.
- [Smooth scroll](https://slopless.kuldeep.cc/library/looks/smooth-scroll): `smooth-scroll`, scroll, about 5 KB. Inertial, eased wheel scrolling (Lenis in native mode) so the whole page glides; anchor links ease to their target. Keeps native scrollbar, find-in-page and keyboard scrolling.
- [Text scramble](https://slopless.kuldeep.cc/library/looks/text-scramble): `text-scramble`, kinetic-type, about 31 KB. Short labels and the hero eyebrow decode from random glyphs into their final text, once, as they enter the viewport; links scramble briefly on hover. Terminal and tech flavoured.
- [Variable font wave](https://slopless.kuldeep.cc/library/looks/variable-font-wave): `variable-font-wave`, kinetic-type, about 2 KB. The hero headline's weight (and width, if the font has the axis) ripples letter by letter in a slow sine wave on load and on hover, then settles. Needs a variable heading font.
- [WebGL hero scene](https://slopless.kuldeep.cc/library/looks/webgl-hero-scene): `webgl-hero-scene`, 3d, about 150 KB. A live three.js scene behind or beside the hero copy: a slow-moving abstract form lit in the palette colours, reacting gently to the pointer. Static poster first, canvas mounted after the page is interactive.

## Optional

- [Design library](https://slopless.kuldeep.cc/library): designs people published, newest first.
- [Home](https://slopless.kuldeep.cc/): what Slopless Design is and how to install the skill (npx slopless install).