Fair Isle Knit

About this style

Fair Isle knitting comes from Shetland and is named after Fair Isle, a small island between the Shetland mainland and Orkney. It is stranded colorwork: each row uses only two colors, the one not in use carried loosely across the back, while the colors change every row or two so the same motifs shade through many tones, from small peerie bands to large OXO and star patterns. It became fashionable in the 1920s after the Prince of Wales wore a Fair Isle sweater, and it is traditionally knitted in the round in Shetland wool. Knitters and fashion labels around the world still knit and reinvent it.

Make a 10-second Fair Isle knitting film: a stranded colorwork band is knitted row by row, stitches forming at the needle in two colors per row, and the camera pulls back from single stitches to the whole patterned band beside its chart.

<inputs>
If I don't give you something, use the default and don't ask.
- Maker: Skerrywick Knitwear, Shetland (fictional).
- Title: "Two colors a row"
- Line: "A Fair Isle band, 96 stitches by 41 rows, in nine Shetland shades."
- Bands, bottom to top: 5-row peerie · 11-row OXO · 5-row peerie · 15-row star · 5-row peerie (41 rows).
- Length: 10 seconds.
</inputs>

<direction>
- Look: macro photography of real knitting: heathered Shetland wool with a soft halo of fibers, plump V stitches, two strands running to a steel needle, and a chart on squared paper beside the work.
- Palette: the nine shades are natural white #EEE7D7, fawn #C9B08C, moorit #6F4A33, shaela #5D5652, Shetland black #2A2522, madder #A33A2E, gold #CF9B3B, indigo #34497C and sea green #4E7C6C. Backdrop heather #6B5B7B with a fine wool-blanket texture; chart paper #F1EBDD with grid lines #C9BFAE and ink #3A3036; needle steel #C5C9CD; type #F3EEE6, secondary #D2C6DC, accent gold.
- Color logic, which is what makes it Fair Isle: every row uses exactly two colors, a background and a pattern color, and the pair changes every row or two so each motif shades through tones, symmetric about its band's center row. The peerie bands are dark on light: moorit on white, then madder on fawn, then Shetland black on white with a gold center row. The OXO band steps its background fawn → white → fawn while its pattern steps moorit → madder → gold → madder → moorit. The star band is light on dark: white and gold stars on indigo, then shaela, then indigo, with sea green in its center row. Against the heather backdrop the gold and white read brightest.
- Charts: a 6-stitch × 5-row peerie repeat (small diamonds and dots); a 24 × 11 OXO repeat (a round lozenge alternating with an X lattice); a 24 × 15 eight-point star repeat. Each is symmetric about its center row and stitch, no row holds more than two colors, and no float runs longer than 7 stitches, as Fair Isle knitters keep them. 96 stitches is exactly four of each large repeat and sixteen peerie repeats.
- Stitches: stockinette Vs, each stitch 1.0 wide and 0.85 tall in stitch units, every row overlapping the one below by 15%. Each leg is a plump plied strand: a tapered lobe leaning in, with three diagonal ply grooves, a soft highlight along its upper side, darker where it dives under the next row, a halo of 6–10 fine hairs (1px, 30–50%) and heather flecks (3% of its pixels in two neighboring shades). Pre-render sprites for each shade in six variants with seeded tension differences (±4% size, ±2° lean), so the fabric looks hand-knit, not printed.
- At the needle: the live stitches sit as loops along a steel needle across the top edge of the work; two strands, the row's background and pattern colors, run from the working point up and out of frame to the right, the one in use pulled taut and the other slack. Each new stitch forms as the point passes: a loop appears on the needle while the V below it draws in leg by leg, and the strand in use gives a small 2px tug. The row grows from right to left, as knitting does, and rows stack upward toward the needle.
- Pace: row 1 takes until 2.0 s, its stitches quickening from 12 to about 90 a second; row 5 is done at 3.0 s and row 16 (the end of the OXO band) at 4.6 s; knitting pauses while the work is turned over; row 26 is done at 6.0 s and row 41 at 7.4 s. Interpolate smoothly between these anchors (a monotonic curve) and precompute every one of the 3,936 stitches' formation times. Once rows pass faster than 3 a second, whole rows appear in turn, still right to left, rather than single stitches.
- The back: at 4.6 s the work turns over (it scales through zero about its vertical center over 0.2 s, shading as it turns) and shows its wrong side for 0.3 s, purl bumps in every row and the unused colors carried as horizontal floats of 2–7 stitches, then turns back over 0.2 s.
- The chart panel: at x 1424–1800, y 330–904, one 24-stitch repeat of all 41 rows as colored squares 14px across on the squared paper, beside a column of paired swatches showing each row's two colors; a 2px gold bar marks the current row and climbs with the knitting; the band names (Peerie, OXO, Peerie, Star, Peerie) in Alegreya Sans 500, 20px, chart ink, beside their rows.
- Camera: opens at 6× on the working point of row 1 (each stitch about 78px wide), tracking the point as it moves, the chart out of frame; it pulls back on cubic-bezier(0.45, 0, 0.15, 1) through 2.4× at 4.6 s to 1.0× at 7.6 s, where the work spans x 120–1368 (13px stitches), with the needle along its top at y 390, the cast-on edge at y 860 and the chart at right.
- Bind-off: from 7.4 s a chain of bound-off loops runs along the top edge from right to left, the needle slides out to the left, and the two strands are cut.
- Type (HTML over the canvas): kicker "SKERRYWICK KNITWEAR · SHETLAND" in Alegreya Sans 700, 20px, tracked 0.18em, accent, at (120, 96); title Alegreya 700 italic, 80px, #F3EEE6, beneath it; the line in Alegreya Sans 500, 26px, secondary, at bottom left on baseline 960; above the chart, "Row 1 of 41" in Alegreya Sans 600, 24px, tabular figures, counting with the knitting. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: stitches that look like wool (plied, haloed, heathered, each a little different), two strands in play, rows that grow right to left and upward, colors that shade band by band, and floats on the back. Cheap: a pixel grid of colored squares, or a flat sweater texture scrolling past.
Banned: printed or flat patterns, smooth vector Vs, more than two colors in any row, floats longer than 7 stitches, cartoon yarn balls, kittens, hands or people, knitting without needles, motion blur, glow, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–2.0s: macro at the needle: row 1 forms stitch by stitch from right to left, the strands tugging and the fibers catching the light.
- 2.0–4.6s: the rows speed up as the camera pulls back: the first peerie band and the OXO band grow upward, shading through their color steps; the chart slides in at 3.0 s with its row bar climbing and the row counter running.
- 4.6–5.3s: the work turns over to show its floats and purl bumps, then turns back.
- 5.3–7.4s: the second peerie, the star band and the last peerie race up to row 41 as the camera keeps pulling back (the 6.0 s frame: the OXO band and the second peerie complete, the star band starting under the needle, the chart beside it).
- 7.4–8.2s: the bind-off runs along the top; the needle slides out and the strands are cut; the kicker, title and line rise in.
- 8.2–10.0s: hold.
For other lengths, stretch the accelerating rows; keep the macro opening, the turn-over and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Text is HTML over the canvas.
- At load, chart the band, precompute every stitch's formation time from the anchors, and pre-render the stitch, purl and float sprites for each shade; each frame draws only the stitches formed by t (culled to the view) through the camera transform, with the forming stitch, the needle loops and the strands drawn on top.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every row has exactly two colors and matches the chart, rows grow right to left and stack upward, the forming stitch is always under the needle's working point, the back shows floats no longer than 7 stitches, stitches read as wool at both 6× and 1×, the row counter and the chart bar agree with the knitting, the needle slides out after the bind-off, and the type stays off the work. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…

Bauhaus Geometry

Made by us

A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…

Constructivist Poster

Made by us

A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…