TITLE Cross-Stitch Studio PROMPT A pattern editor for cross-stitch embroidery in which the pattern is not a pixel grid but rendered thread: every cell the viewer fills becomes two crossed stitches of twisted floss on woven aida cloth, with highlights, shadow and slight irregularity, inside a wooden embroidery hoop. Concept: a genuinely usable tool whose output looks like the finished object. Mood: homely, sunny, meticulous. Palette: aida cloth cream #F4EEDD (with weave holes and a slightly darker thread shadow #D9CFB8), default floss set: turkey red #C0392B, delft blue #2C5F8D, moss green #3F7D4E, marigold #E3A72F, charcoal #2B2B2B, plus a second row of softer flosses (rose #D98C9A, sky #8DB7D6, sage #A3B899, cream-white #FBF7EC, walnut #6B4A2F). Light page on a pale linen-textured table (#E9E2D0) with a wooden hoop (beech tones #C9A26B / #A47B45) and brass screw. Canvas rendering: the fabric is drawn as a real even-weave: a grid of small square holes with woven thread bundles between them. Each stitch is drawn as two diagonal strands (the lower "/" first, the upper "\" on top) with rounded ends entering the holes, each strand shaded with a lighter centre line and darker edges to look twisted, a faint drop shadow on the cloth, and ±1px jitter and slight thickness variation per stitch so the work looks hand-made. Half stitches (chosen with a stitch-type toggle in the tray: full cross, rising half, falling half) and backstitch outlines (thin single lines along cell edges, for lettering and outlines) are supported. The hoop ring overlaps the cloth with a shadow, and the cloth outside the hoop is slightly slack and darker. Pattern grid: 48×48 cells at every screen size (phones start zoomed out and pinch in), with a bolder guide line every 10 cells as in printed charts (toggleable). Tools (drawn as objects in a sewing-box tray, with tooltips and keyboard shortcuts): needle (stitch one cell; drag to stitch a run), seam ripper (remove), flood-fill ("fill area"), backstitch line tool (click two points on grid intersections), colour picker, mirror mode (vertical, horizontal, both: for symmetrical folk motifs), move/pan, zoom in and zoom out (plus mouse wheel), undo/redo (Ctrl/Cmd+Z, shift for redo). A floss palette shown as wound skeins/bobbin cards with numbers ("No. 321 turkey red"). A starter library of motifs designed for the page as cell data that can be stamped onto the cloth: a folk heart, an eight-pointed star, a strawberry, a small bird, a house, a tree, a border repeat, and a complete 5×7 pixel alphabet for stitching text typed by the viewer ("stitch these words" input). On first load, a charming sampler is already on the cloth (a border, the alphabet's first letters, two birds facing a tree, the current year flanked by two small hearts and underlined in backstitch), stitched in by an animated needle over the first three seconds: each stitch appears in sewing order with the two strands laid down one after another. Signature moments: (1) every placed stitch animates as thread being pulled through: the strand draws from hole to hole with a tiny tightening bounce; (2) "Turn it over": the hoop flips in 3D to show the back of the work: the same pattern mirrored but rendered as the messy reverse: short vertical/horizontal travelling stitches, long thread carries between distant areas, knots and tails: computed from the actual stitch order; (3) "Chart view" toggles to a printable-style symbol chart (each colour as a symbol in a grid, with a key and thread lengths estimated in metres). Side panel in tidy type: project name (editable), stitch count by colour with estimated floss length, finished size at 14-count in cm and inches, time estimate at "a comfortable 300 stitches an hour". Buttons: "Save as picture" produces a PNG of the hoop via canvas.toBlob and a download link (no network); "Clear cloth" (with an in-page confirmation styled as a paper note, not a browser dialog); patterns persist for the session in memory only. Typography: title in a cross-stitch lettering drawn from the same pixel alphabet as actual stitches on the page header ("CROSS-STITCH STUDIO"), body UI in a warm humanist sans ("Gill Sans"/"Trebuchet MS"/system-ui) small and neat, numbers tabular. Touch: one finger stitches, two fingers pan/zoom; tool tray collapses to a bottom strip at 360px with large targets. Keyboard: arrows move a cell cursor, Space stitches, 1–9 choose floss. Reduced motion: stitches appear without pull animation; no flip (cross-fade to the back). DESCRIPTION A sunlit sewing table seen from above: a beech embroidery hoop with a brass screw holds a square of cream aida cloth, and on it a small sampler stitches itself in over the first three seconds while a steel needle darts from stitch to stitch. Everything the viewer places is rendered as real thread: two crossed strands of twisted floss with sheen, shadow and hand-made irregularity, pulled from hole to hole with a little tightening bounce. To the left sit a stitched fabric title label, a wooden sewing-box tray of tools, ten bobbin cards of floss and a library of stamped motifs with a "stitch these words" field; to the right a paper pattern card keeps the project name, floss usage in metres, finished size and time. The hoop can be turned over in 3D to reveal the honest, messy back of the work, computed from the true sewing order, or swapped for a printable symbol chart with a key. VISUAL TECHNIQUES - Layered 2D canvas scene: procedurally woven aida tile (thread bundles, corner holes), grain noise, slack darker cloth with folds and a stitched hem outside the hoop - Each stitch drawn as shaded strands: dark edge, floss body, slanted twist plies, off-centre sheen, drop shadow, crossing shadow, seeded jitter and thickness variation - Thread-pull animation per strand: eased draw from hole to hole, sagging and fat while loose, then a damped tightening bounce - Wooden hoop with gradient lighting, concentric grain arcs, bevels, cast shadow, split lugs and a knurled brass screw - Reverse side generated from the actual stitch order: short travelling stitches, sagging long carries, knots with tails and frayed loose ends, mirrored - 3D flip of the whole hoop with a perspective transform and an overshooting settle; cross-fade under reduced motion - Symbol chart drawn to canvas: tinted cells, one symbol per floss, bold tens, centre arrows, backstitch lines and a generated key - Title lettered in real cross-stitch from the page's own 5x7 alphabet on a pinked fabric label pinned with brass pins - Tools drawn as inline SVG objects in a CSS wooden tray; floss as CSS bobbin cards; running-stitch dashed borders as the interface motif - Linen table texture and a soft-light window-light overlay; canvas toBlob export of the hoop as a PNG INTERACTION MODEL Drag with the needle to stitch a run of crosses (one finger on touch); two fingers or the mouse wheel pan and zoom, and the move tool drags the cloth. The tray also holds a stitch-type toggle (full or half stitches), seam ripper, thimble flood-fill that ripples outward, a two-click backstitch line tool with a pin and thread preview, a colour-picking pin, mirror mode (left-right, top-bottom, both), zoom in and out, undo and redo. Floss is chosen from the bobbin cards or keys 1-9 and 0; motifs and typed words become a translucent stitched ghost that is stamped where the viewer clicks. Arrow keys move a cell cursor, Space stitches, and letter shortcuts (N, H, E, F, B, I, M, V, G, T, C, Ctrl/Cmd+Z with Shift for redo, Esc) drive everything else, with tooltips on hover and focus. "Turn it over" flips the hoop to the back of the work, "Chart view" slides in the symbol chart, the guide-line checkbox toggles the lines every ten cells, "Save as picture" builds a PNG with a thumbnail and download link, and "Clear cloth" asks for confirmation on a pinned paper note; the stitch counts, floss lengths, finished size and time estimate update live.