← Home
ruen

Maker's mark

The wovenlabel.

Good clothes carry the maker's label sewn into a seam. I sew the same into the footer of every website I build. Not a “made by” link, but an object you want to touch.

Hover, click, pull the thread, shake it

Dark footer

© 2026 studio-dark.example

Light footer

© 2026 studio-light.example

Colour footer

© 2026 studio-colour.example

01

Its own weave

The weave pattern and the accent stripe are derived from the domain. No two labels are alike — like a serial number.

02

Care instructions

Click to flip it. The back shows care instructions and real numbers of this page: load time, weight, number of elements.

03

The thread

A loose thread sticks out of the seam. Pull its knot — it stretches out and reveals the maker's link.

04

Easter egg

Shake the label quickly with your cursor — the threads unravel, regroup into YRSLV and weave back in.

05

Mimicry

The label reads the footer colours and adapts: dark fabric on dark sites, cream on light ones, the accent thread in brand colour.

Installation

Any website — one line and a tag:

<script src="https://yarsav.ru/label/v1.js" defer></script>
<yrslv-label serial="004" accent="#af2934" date="2026">
  <a href="https://yarsav.ru" rel="author">Handmade by YRSLV</a>
</yrslv-label>

Next.js / React:

import Script from "next/script";

<Script src="https://yarsav.ru/label/v1.js" strategy="lazyOnload" />
<yrslv-label serial="004" accent="#af2934" date="2026">
  <a href="https://yarsav.ru" rel="author">Handmade by YRSLV</a>
</yrslv-label>

Attributes

serial
Item number, e.g. 004
accent
Accent thread colour (default: the --yrslv-accent CSS variable)
date
When it was “sewn”, e.g. 2026
size
s — compact label
lang
ru or en (default: page language)
href
Link target (default: the portfolio with UTM tags)

Zero-dependency web component · ≈7 KB gzip · Shadow DOM · keyboard accessible · respects prefers-reduced-motion · the link is visible to crawlers and without JavaScript