REFERENCE
- Gallery page: https://magpui.com/en/i/typed-text-knitted-into-a-sweater-0f71dd
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/typed-text-knitted-into-a-sweater-0f71dd/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/typed-text-knitted-into-a-sweater-0f71dd/clip.mp4
- Original post: https://x.com/TONASY99/status/2115760640329728486 by @TONASY99
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a full-screen interactive piece where the whole viewport is a close-up of knitted wool and the text the user types is knitted into it. The fabric starts plain; a pair of Nordic jacquard bands knit in, then the typed message appears inside them stitch by stitch, row by row, as if a machine were knitting it live. Typing new text unravels the old message and knits the new one, and the yarn color can change. It should feel warm, tactile and real, like a winter sweater filling the screen.
DESIGN SYSTEM: Full-bleed canvas. Base yarn cream/greige #CFC8BE with darker crevices #8F877C. Pattern yarn sage green #5E7A64 or brick red #C0574A. Fabric of stockinette V stitches about 14px wide and 16px tall at 1x, slightly irregular. Two horizontal jacquard bands about 120px apart vertically from the center: each band is two 1-stitch lines framing a row of small diamond and dot motifs. The message sits between the bands, centered, set in a blocky pixel font (each letter about 7 stitches wide, 9 stitches tall), supports multiple lines and non-latin glyphs (e.g. Japanese kana). Small label card top-left: white rectangle with 8px padding, piece title in 12px monospace and a 10px gray number/date line. Soft vignette and a gentle diagonal light.
MOTION: Intro: a single colored line knits across the fabric left to right (about 600ms), then the two bands build from the center line outward, row by row (each stitch row about 30ms, linear). Typing: letters are rasterized to the stitch grid and revealed in knitting order, bottom row to top row, left to right, about 12ms per stitch; a newly placed stitch eases its color in over 120ms with a tiny 1.05 scale settle. Clearing: stitches return to base yarn in reverse order at twice the speed. Color switch: the bands and text recolor row by row from top to bottom in about 500ms. Idle: fabric has a very slow breathing displacement (amplitude 1-2px, 6s loop) and the pointer pushes a soft bulge (radius about 120px) with stronger light on the raised stitches.
SECTIONS: Parts and states: fabric background (idle, pointer bulge); jacquard bands (hidden, knitting, done); message (empty, knitting, done, unravelling); hidden text input that captures typing; title label card; optional color toggle (green or red yarn).
IMPLEMENTATION: TypeScript + WebGL2 with a custom GLSL fragment shader on a full-screen quad (or three.js ShaderMaterial). Compute the stitch grid in the shader: for each cell draw two slanted rounded loops forming a V, add fiber noise (fbm stretched along the loop direction), ambient occlusion between loops and a fuzzy halo, and light with a fake normal from the loop profile. Pass the pattern as a small data texture (one texel per stitch: 0 base, 1 pattern color, plus a reveal time), updated from a 2D canvas where text is drawn with the pixel font; the shader blends each stitch by its reveal time. Keep a real visually hidden input focused for typing and screen readers, with an aria-live mirror of the message. prefers-reduced-motion: show the finished knit instantly, no breathing or bulge. Cap devicePixelRatio at 2, target 60fps, pause when the tab is hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Typing a word knits it into the fabric stitch by stitch inside the two jacquard bands, and changing the text unravels and reknits it.
- The wool texture reads as real stitches at full screen, with fiber detail and shading, without any image files.
- Reduced motion shows the final knitted text with no animation, and the text stays readable by assistive tech.
