Метка мастера

Вшитаябирка.

В хорошей одежде в шов вшита бирка мастера. Я вшиваю такую же в футер каждого сайта, который делаю. Это не ссылка «сделано такими-то», а вещь, которую хочется потрогать.

Наведите, кликните, потяните нитку, потрепите

Тёмный футер

© 2026 studio-dark.example

Светлый футер

© 2026 studio-light.example

Цветной футер

© 2026 studio-colour.example

01

Своё плетение

Узор переплетения и полоса акцентной нити вычисляются из домена. Двух одинаковых бирок не бывает — как серийный номер изделия.

02

Инструкция по уходу

Клик переворачивает бирку. На обороте — уход за изделием и настоящие цифры этой страницы: время загрузки, вес, число элементов.

03

Нитка

Из шва торчит нитка. Потяните её за узелок — она вытянется, и появится ссылка на мастера.

04

Пасхалка

Быстро потрепите бирку курсором — нитки распустятся, сложатся в YRSLV и вплетутся обратно.

05

Мимикрия

Бирка читает цвета футера и подстраивается: тёмная ткань на тёмных сайтах, кремовая на светлых, акцентная нить — в цвет бренда.

Установка

Любой сайт — одна строка и тег:

<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">Сшито вручную — 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">Сшито вручную — YRSLV</a>
</yrslv-label>

Атрибуты

serial
Номер изделия, например 004
accent
Цвет акцентной нити (по умолчанию — CSS-переменная --yrslv-accent)
date
Когда «сшито», например 2026
size
s — компактная бирка
lang
ru или en (по умолчанию — язык страницы)
href
Куда ведёт ссылка (по умолчанию — портфолио с UTM-метками)

Веб-компонент без зависимостей · ≈7 КБ gzip · Shadow DOM · работает с клавиатуры · уважает prefers-reduced-motion · ссылка видна поисковикам и без JavaScript