Hoe je een website laat aanvoelen als textiel.

Begin met materiaalgedrag, niet met een moodboard.

De ontwerpvraag was: wat kan een webpagina doen dat alleen bij een experimenteel textielatelier past? Het antwoord werd een levende ketting waarin de bezoeker zelf één inslag toevoegt. Alle volgende keuzes volgen daaruit: langgerekte typografie, labels uit de weverij, harde kleurbanen en secties die als stalen werken.

Drie concepten zijn vooraf vergeleken. Een vervormende catalogus en een digitale verfbak vielen af omdat ze minder specifiek waren. De levende selvage won door haar tastbaarheid en door de persoonlijke draad die als herinnering door de volledige pagina loopt.

De technische stapeling.

1. Astrolevert statische HTML voor elke route en houdt de basis direct bruikbaar.
2. CSStekent de fallback-weving, materiaalstalen, rails, type en scrollchoreografie.
3. Canvas 2Dtekent 46 kettingdraden en 58 inslagen, plus pointerspanning en de persoonlijke draad.
4. Session storagebewaart kleur, fase en activatie zolang het browsertabblad open blijft.
5. Cloudflare Pagesserveert de gebouwde bestanden vanaf de edge met een strikte CSP.

De Canvas-laag muteert geen DOM-styles. Interfacetoestand wordt met data-attributen gedeeld. CSS koppelt die beperkte toestanden aan vaste kleuren; Canvas gebruikt dezelfde vier hexwaarden om de eigen pixels te tekenen. Zo blijft de productie-CSP streng.

Reproduceer het patroon in zes stappen.

1. 01

   Schrijf één gedragsthese. Voor dit project: stof bewaart spanning en aanraking.

2. 02

   Lock eerst kleur, type, ruimte, motionwoorden, fallbacks en verboden patronen in een designbestand.

3. 03

   Bouw een volledige statische compositie. JavaScript mag alleen verrijken, nooit inhoud leveren.

4. 04

   Teken de ketting als verticale paden en de inslag als horizontale paden. Voeg sinusruis klein toe.

5. 05

   Laat pointerafstand de lokale afwijking bepalen en laat een impuls exponentieel uitdoven.

6. 06

   Bewaar alleen eindige toestanden, test 320 tot 1440 px, reduced motion en zonder JavaScript.

offset = sin(y * 0.014 + x * 0.018 + time * 0.00032)
pull = distance < 170 ? (1 - distance / 170) * dx * -0.1 : 0
strandY = fieldTop + fieldHeight * (0.57 + phase * 0.035)

Toegankelijkheid en performance zijn deel van de vorm.

• Reduced motion: één afgewerkt Canvas-frame, geen renderlus, alle inhoud zichtbaar.
• Zonder JavaScript: een CSS-weefsel en vermiljoenen geheugendraad vullen dezelfde compositie.
• Zonder Canvas: de fout blijft geïsoleerd; tekst, actie en statische textuur blijven bruikbaar.
• Toetsenbord: kleurkeuzes zijn radio-inputs en de shuttle is een native button van minstens 44 px.
• Contrast: alle tekstparen zijn vooraf gemeten. Pollen wordt nooit als kleine tekst op porselein gebruikt.
• Payload: geen rasterbeelden, video, WebGL-bibliotheek of framework-runtime. Alleen twee lokale variabele fonts.

Voor publicatie worden lint, Astro typecheck, productiebuild, axe, Lighthouse, console, CSP, viewports en interactiestaten automatisch en handmatig gecontroleerd. Drie visuele iteratiepasses volgen pas na de eerste volledige build.

Provenance.

Alle zichtbare vormen zijn voor deze site geschreven in HTML, CSS, SVG en Canvas. Er zijn geen stockfoto’s, Pinterest-assets, gegenereerde beelden, video’s of gekopieerde componenten gebruikt. Anybody en Manrope worden lokaal geleverd via Fontsource en vallen onder de SIL Open Font License.

De volledige promptstatus staat op de promptroute. De zaak, het adres, het werk en de beschikbaarheid zijn fictief. De site is een demonstratie van webdesign en geen commercieel aanbod.