BetterMech PUBLIC · REV 0.1
Рецепта · сайт

BoostWorkers · Кинетика — думата Boost наистина набира тегло

Тенденции: Кинетична променлива типография + Зърнести mesh градиенти. Концепция на Better Mechanics по рецептата — не е официалният сайт на марката.

Отвори сайта на живо →
Началото на сайта „BoostWorkers · Кинетика — думата Boost наистина набира тегло“

Доказателството

WEB · BOOSTWORKERS-KINETIKAREV 0.1
axe serious
0
overflow 360
0 px
weight
183 KB
h1
1
lang
bg
date
2026-10-19
провереноaxe (WCAG 2.2 AA) в светла и тъмна тема · 360 px · автоматично; ръчният преглед предстои

(а) Многократният промпт (EN, неутрален към марката)

Build a one-page homepage concept for <BRAND> where the brand's key verb LITERALLY does what it says.
The verb (e.g. "Boost", "Grow", "Lift") is set huge in a variable font and its weight axis reacts to the
visitor: letters near the pointer swell to the maximum weight while the rest thin out; scrolling through
the hero pushes the whole word heavier. Behind it sits a grainy mesh gradient made from the brand's own
colours (CSS radial blobs + a static SVG feTurbulence grain), drifting a few dozen pixels with pointer and
scroll only — never on an idle loop.

Trends: kinetic variable typography (1 axis: wght) + grainy mesh gradient (CSS/SVG first, no WebGL).

Layout (desktop):
+--------------------------------------------------------------+
| [logo] Brand                       Services  Who   [CTA pill] |
|                                                   ~~mesh~~    |
| EYEBROW · brand fact                             ~~ blobs ~~  |
| We                                                            |
| B O O S T   <- one line, variable weight, fitted to width     |
| · You Grow  <- second key word grows with the first           |
| one-line promise              [ live meter: wght 478 ▮▮▮▯ ]   |
| [CTA] [secondary ↓]           [ toggle: Kinetics on/off ]     |
|================ brand gradient strip (6px) ===================|
| 01 — Services        | short intro                            |
| 01  SERVICE NAME (huge, thin → bold when centred) | local name |
| 02  ...  (row closest to viewport centre is "on":             |
|          weight 820, gradient underline grows)                |
|--------------------------------------------------------------|
| 02 — Who it is for (tinted second background, grain)          |
| "A partner who / acts, / measures / and improves."            |
|   -> each verb gains weight in turn as you scroll             |
| [audience card A]  [audience card B]                          |
| • location line                                               |
|--------------------------------------------------------------|
| 03 — Meeting (mesh again, warm-heavy)                         |
| BOOK A / MEETING ↗  <- giant mailto link, letters swell       |
|                       under the pointer                      |
| real e-mail  [Copy address → "Copied ✓" + aria-live]          |
|--------------------------------------------------------------|
| footer: wordmark, slogan, legal owner, concept label          |
+--------------------------------------------------------------+
Mobile: same order, one column; blobs move to the top, scrim turns vertical.

MUST
- Real HTML text for every animated word (visually hidden full phrase for screen readers; letter
  spans aria-hidden). One h1. Only ONE axis animated (wght). Each kinetic word on its own nowrap line
  with fixed line-box height, so nothing below it ever reflows.
- Fit the hero word with JS: measure it at MAX weight in the display font (after document.fonts.load)
  and size it to ~98% of the column — it must never overflow at 360 px.
- One-time "ignition" on load (thin → medium, ~1.3 s), then motion only in response to pointer/scroll.
  rAF loop stops itself when values settle.
- A visible "Kinetics" switch (aria-pressed) and prefers-reduced-motion: both freeze every word at a
  readable static weight, mark all list rows active, and stop the mesh.
- Grain: static SVG noise tile, opacity ~0.15, blend overlay. A quiet dark scrim keeps a high-contrast
  zone behind all text (WCAG 2.2 AA).
- Brand colours only; add a warm third colour only if it comes from the brand's own logo.
- Button states: hover (weight up + arrow nudges), active (press), focus-visible (3px ring in an accent
  colour). Copy-to-clipboard with fallback and a polite live region.
- Self-hosted fonts with Bulgarian locl (lang="bg"), no CDN, no external images, < 1 MB without fonts.

FORBIDDEN
- Text as image/canvas; continuous/looping animation; letter-by-letter on paragraphs; jumping lines;
  the generic purple-blue AI gradient; coarse grain; WebGL for decoration; centred hero + three cards;
  invented clients, numbers, results, testimonials or prices.

(б) Брифът за BoostWorkers

  • Език: страницата е lang="bg"; слоганът, имената на услугите и призивът са на английски (lang="en"), както са в бранд кита; обясненията са на български.
  • Герой: „We Boost · You Grow“ — Boost е кинетичната дума (Unbounded 200–900); Grow наддава тегло и мащаб заедно със средното тегло на Boost. Над думата: „BoostWorkers · марка на КАГАМИ“. Под нея: „Енергично и практично — за хора и екипи, които искат да растат.“ (от Глас). Малък уред показва текущото wght, така тенденцията става видима.
  • Услуги (6): Business Analysis · Vision & Brandbook · Marketing Strategy · Storytelling · Web Development · Social Networks, с български превод до всяка.
  • За кого: „Партньор, който действа, измерва и подобрява.“ + двете публики: малки и средни фирми, които искат истинско дигитално присъствие; основатели и мениджъри. Локация: Варна и България · онлайн в цяла Европа.
  • Призив: „Book a meeting“ → mailto:office@boostworkers.com + бутон „Копирай адреса“.
  • Цветове (tokens.json): фон #1A1030, втори фон #2A1850, текст #FFFFFF, второстепенен #D9CFF0, акцент/CTA #F472B6, втори акцент #8B5CF6, текст върху CTA #1A1030, лента linear-gradient(90deg,#8B5CF6,#F472B6). Трети, топъл цвят #F0A020 — взет от стрелката в знака (логото), за да не излезе „лилаво-синият AI градиент“.
  • Шрифтове: Unbounded (заглавия, кинетичната дума) + Manrope (текст; шрифтът на марката) от ../_obshto/fonts/. JetBrains Mono от бранд кита не е ползван (забранен по заданието); етикетите са Manrope 700 с разредка.
  • Тема: само тъмна, защото токените на марката са еднакви за двете теми.
  • Отпаднали: плановете с цени (Standard/Extra/Premium в extensions.json) — по указание „без цени“; каналите LinkedIn/Facebook — няма адреси в бранд проекта.