How Woven Carpet & Flooring Co. was built

01 — Concept

Carpet cleaning and flooring installation are usually sold with stock photography of smiling technicians and generic before/after sliders. The brief here was the opposite instinct: treat flooring as a material — the same way a textile studio or an interior magazine would — and let the site's design vocabulary come from weaving itself, not from "local service" templates.

That decision shaped almost everything downstream: the imagery is macro and tactile rather than wide and staged; the palette is a warm neutral wool-cream with terracotta and ink-navy rather than the blue/white "trust" palette most trade sites default to; and the signature interaction is a literal woven-thread canvas, because the brand's whole thesis is "we think about fiber."

Palette

Typography

Fraunces (variable, optical-size axis) for all display type — a warm, slightly rounded serif with soft ink-trap curves that reads as boutique/editorial rather than corporate. Manrope for body copy and UI — a clean humanist sans that keeps long-form text and form labels legible without fighting the serif for attention. Both load from Google Fonts as a single combined request.

02 — Imagery: art direction

Eight images were generated with Higgsfield's nano_banana_pro model at 2K resolution, then converted to compressed JPEGs (sips -s format jpeg -s formatOptions 78) to keep the asset folder under 10MB total. Each image was generated from a carefully art-directed brief specifying the framing, light quality, palette, and mood — the brand colors and macro/editorial framing named explicitly, with a specific light treatment (raking, backlit, or golden-hour) per shot — and iterated until the set read as one coherent shoot rather than a stock grab-bag. The full prompt library is proprietary and available to clients on request.

03 — The woven-thread canvas (signature motif)

The recurring visual signature is a hand-rolled canvas animation in assets/weave.js, reused three times with different palettes and densities: as a soft overlay across the hero (blended with mix-blend-mode: soft-light), as a large ambient backdrop behind the "Process" section, and as a small decorative corner on the contact form.

How it works

• True interlace, not a texture image. The canvas draws a grid of vertical (warp) and horizontal (weft) threads directly with CanvasRenderingContext2D, offsetting every thread with a sine/cosine phase so each line visibly weaves over and under its neighbors instead of just crossing in a flat grid.
• Ambient float. A slow per-frame time accumulator (t += 0.016 inside requestAnimationFrame) drives a small continuous sine wobble on every thread, so the weave never sits perfectly still even with no user input.
• Scroll-driven tightening. A GSAP ScrollTrigger with scrub: true feeds a 0–1 progress value into setProgress(), which widens the weave amplitude as the section scrolls through — the pattern visibly "tightens" as you scroll into the hero and the process section.
• Mouse-proximity ripple. On pointer move, threads within a 140px radius of the cursor are pushed outward with an eased falloff (force*force), so hovering over the hero or the contact-form corner physically parts the weave — like fingers passing through a loom. This is the "genuinely delightful, non-generic" interaction called for in the brief; it is deliberately tactile rather than a generic parallax or fade.
• Accent threads. Every 6th–8th thread renders in the muted-gold accent color at higher opacity, echoing the single gold thread in the weave-macro.jpg photograph so the canvas motif and the photography reinforce each other.

The same module is reused with only a settings object changed per instance (spacing, colors, whether it's interactive) — no per-section rewrite, which keeps the "recurring visual signature" consistent rather than three different effects that happen to look similar.

04 — Build techniques

Responsive approach

Layout is fluid-first: most spacing uses clamp() against viewport width instead of fixed breakpoint values, so type and section padding scale continuously. Hard breakpoints (900px, 700px, 480px) exist only where the grid structure itself needs to change — services grid 4→2→1 columns, gallery mosaic 6→2 columns, nav collapsing into a slide-in drawer with a hamburger toggle below 900px. Verified at 375px (mobile) and 1440px+ (desktop).

05 — Stack & deployment

No build step. The site is plain HTML/CSS/JS: index.html + assets/style.css + assets/weave.js + assets/main.js, with GSAP and ScrollTrigger loaded from the jsDelivr CDN and Fraunces/Manrope loaded from Google Fonts. There is nothing to compile.

To deploy: drag the woven-carpet/ folder onto Netlify Drop, or connect the repo/folder to Netlify as a static site with no build command and a publish directory of woven-carpet/. Every asset path in the HTML/CSS is relative (assets/…), so the folder works from any host or subpath without edits.