Рецепта · сайт
BoostWorkers · Кинетика — думата Boost наистина набира тегло
Тенденции: Кинетична променлива типография + Зърнести mesh градиенти. Концепция на Better Mechanics по рецептата — не е официалният сайт на марката.
Доказателството
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 — няма адреси в бранд проекта.