How LOOM was woven

1 · The Concept

Nomadic Owls' first service is Affiliate Marketing — "Connecting the Dots." LOOM takes that line literally. A weaving studio is the one place where connecting separate strands is the entire craft: warp threads held under tension, a weft carried across them, and suddenly loose fiber is cloth. The site is built as that cloth.

A single madder-red thread — one continuous SVG path — enters at the top selvedge and is sewn through the whole page by your scroll. It underlines the hero, slips around the video frame, zigzags between the six service strips, tacks each project swatch in place, and finally knots itself beside the contact button. Nothing on the page is connected by layout alone; everything is literally strung on the same thread.

The material honesty matters as much as the metaphor: undyed-linen backgrounds carry a real crosshatch weave, the page has selvedge edges running down both sides, headings are underlined with running stitches that sew themselves in, and loose thread ends hang in the hero, swaying on rope physics when your cursor brushes them.

2 · Cited References

• Bucks Sauce

  Physics-drifting cutout elements → adapted into the loose thread ends: three verlet-integrated ropes pinned at the top of the hero, with gravity, damping, a slow sinusoidal wind and cursor repulsion.

• Estudio Niksen

  Honest material texture (scan grain, fold lines) → adapted into honest cloth: layered repeating-gradient crosshatch as the weave of the linen ground, woven selvedge borders fixed to both page edges, and pinking-shear zigzag cuts on the project swatches.

• Huts

  Hand-drawn scribble underline accent → adapted into embroidered running-stitch underlines: dashed madder rules that reveal stitch-by-stitch (a stepped clip-path transition) when a heading enters the viewport.

3 · Design System

Dye lot

• Undyed linen #F2EDE4
• Walnut loom brown #4A3728
• Madder red #B4432F
• Indigo #2C4A6E
• Marigold #D9A03F

Type

Fraunces Variable — warm, soft-serifed display with the WONK axis on, for headings and the wordmark.

Karla Variable — plainspoken grotesque for body, labels and UI. Both self-hosted via @fontsource-variable.

Spacing logic

A 6-step scale (0.5 / 1 / 2 / 3.5 / 6 / 9 rem) sets vertical rhythm; sections sit in a 78rem cloth width with clamp()-fluid inline padding. Body copy is capped at a 62ch measure. Accent colors rotate madder → indigo → marigold in strict order, the way a weaver repeats a stripe sequence.

4 · Tech & Motion

• The continuous thread. Elements carry a data-thread attribute (start / end / center, with optional dy offsets). On load, their document positions become anchor points; a Catmull-Rom spline converted to cubic Béziers produces one smooth path in a full-page SVG. The path's total length becomes its stroke-dasharray; scroll maps the viewport's 72% line to a length along 700 pre-sampled points, and a lerped stroke-dashoffset draws the thread with a trailing needle (positioned via getPointAtLength, rotated to the local tangent). Rebuilt on resize and font load; pre-drawn in full under reduced motion.
• Warp & weft services. The six strips sit on a background of vertical warp lines. Odd strips slide in from the left, even from the right (IntersectionObserver + cubic-bezier(0.22, 1, 0.36, 1)); each strip is crossed by a warp band that renders over the odd strips and under the even ones — a true over/under weave in z-index.
• Loose thread ends. Canvas verlet ropes: 16 nodes per rope, 4 constraint iterations per frame, gravity 0.42, damping 0.985, cursor repulsion within 60px. DPR capped at 2; the loop pauses when the hero leaves the viewport or the tab is hidden, and never runs under reduced motion.
• Running stitches. A repeating-gradient dashed rule revealed by clip-path: inset() animated with steps(14, jump-end) — the underline appears stitch by stitch, not as a smooth wipe.
• Fabric swatches. Project cards are clipped with a pinking-shears polygon on a wrapper whose parent carries filter: drop-shadow(), so the cloth shadow follows the zigzag edge; hover lifts and slightly rotates the swatch.

5 · AI Assets

Four assets, generated centrally and integrated here (PNG → WebP, MP4 re-encoded to 380 KB with libx264 CRF 30). Prompts verbatim:

• weave-macro.png

  GPT Image 2 (via Higgsfield CLI) · aspect-ratio 16:9 · quality high · resolution 2k

  “Extreme macro of handwoven linen textile on a loom, visible warp and weft threads in undyed cream with stripes of madder red, indigo blue and marigold yellow, natural fiber texture, warm soft daylight, craft photography, no text”

• thread-spools.png

  GPT Image 2 (via Higgsfield CLI) · aspect-ratio 3:4 · quality high · resolution 2k

  “Six wooden spools of thread standing on a walnut weaving bench, colors: cream, madder red, indigo, marigold, sage, walnut brown, loose thread ends trailing and connecting between spools, warm window light, textile studio photography, no text”

• loom-shuttle.png

  GPT Image 2 (via Higgsfield CLI) · aspect-ratio 16:9 · quality high · resolution 2k

  “A polished wooden weaving shuttle resting on taut warp threads of a traditional loom, warm afternoon light raking across the threads casting long thin shadows, shallow depth of field, artisan workshop photography, no text”

• shuttle-pass.mp4

  Kling (kling2_6, via Higgsfield CLI) · aspect-ratio 16:9 · duration 5 · sound false

  “Close-up of a wooden shuttle passing through taut warp threads on a traditional weaving loom, threads lifting and crossing, warm natural window light, slow deliberate craft motion, shallow depth of field, static camera”

6 · How to Reproduce

1. Scaffold Astro v5, static output: npm create astro@latest.
2. Install the two families: npm i @fontsource-variable/fraunces @fontsource-variable/karla.
3. Generate the four assets with the prompts above; convert stills to WebP and compress the Kling clip (ffmpeg -an -vcodec libx264 -crf 30 -vf scale=1280:-2).
4. Build the page thread: mark anchors with data-thread, spline them, drive stroke-dashoffset from scroll as described in section 4.
5. Add the weave ground, selvedges, stitch reveals and verlet ropes; wire every effect to prefers-reduced-motion.
6. npm run build · deploy the dist/ folder.