VarnaHub · Виж как Варна наистина работи

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

Build a one-page homepage for a city/regional ECOSYSTEM DIRECTORY (organisations grouped
into sectors, with membership links between them). The page tells one story while the
visitor scrolls: an ecosystem map that BUILDS ITSELF.

TRENDS
1. Native CSS scroll-driven animations (animation-timeline: view() / named view-timeline)
   as progressive enhancement.
2. View Transitions API (document.startViewTransition) for a sector filter that
   re-arranges an orbit diagram.

LAYOUT (desktop; on phones the map is sticky on top and the steps are cards over it)
+--------------------------------------------------------------+
| logo                      nav (anchors)        [+ Add org]   |  sticky header
+--------------------------------------------------------------+
| EYEBROW                                         .  o   .     |
| HUGE HEADLINE with one accent word         o----( )----o     |  hero; decorative orbit
| one-sentence promise                            '  o  '      |  rotates as hero exits
| [Primary CTA ->] [Ghost: how it works]                       |
+-------------------------+------------------------------------+
| step 1  centre           |                                   |
| step 2  sectors          |   STICKY SVG MAP (100vh)          |  ONE named view-timeline
| step 3  organisations    |   centre -> spokes -> sector ring |  on the section drives
| step 4  links            |   -> dots -> zoom -> links ->     |  every layer of the map
| step 5  meaning          |   pulse                           |  via animation-range
+-------------------------+------------------------------------+
| H2 "Explore by sector"          | panel: name, description,  |
|  orbit of sector nodes          | link to the sector page    |  View Transitions:
|  (click -> selected node flies  | chip list (all + sectors)  |  each node has its own
|   to centre, city pill to corner)|                           |  view-transition-name
+--------------------------------------------------------------+
| H2 "Every record passes a human"  three-step ruled timeline  |
| two notes (what is NOT published · how AI is used/labelled)  |
+--------------------------------------------------------------+
| BIG "The data is open" + licence text | attribution card     |
|                                       | [Copy attribution]   |
+--------------------------------------------------------------+
| footer: operator · data licence · concept label              |
+--------------------------------------------------------------+

HOW THE MAP IS BUILT
- Static inline SVG generated at build time (works with JS off). viewBox 1400x1000,
  centre node, sectors evenly on a ring, a small cluster of dots per sector, thin lines
  dot->sector, curved links between dots of different sectors (control point pulled
  toward the centre).
- The DOTS ARE ABSTRACT: never encode real counts. Say so in a caption.
- Section: `view-timeline: --story block`. Each SVG element gets
  `animation-timeline: --story` and an inline `animation-range: contain X% contain Y%`,
  staggered per element. Ranges: centre 0-9%, spokes/sector nodes 16-39%,
  dots 38-61%, a camera zoom on one cluster 34-68% (transform on a <g> with
  transform-box: view-box), links 62-86%, final pulse 84-100%.
- Spokes "draw" with scale() from the centre (transform-origin = centre in view-box
  units), so only transform/opacity are animated.
- Step cards highlight with view() (opacity + translate) - full opacity by default.

MUST
- Everything visible by default; all scroll animation inside
  @supports (animation-timeline: view()) AND @media (prefers-reduced-motion: no-preference).
- Animate only transform and opacity. No scroll hijacking, no scroll-snap traps.
- View Transitions only as enhancement: feature-check, skip under reduced motion,
  unique names per node, short (~0.5 s) easing; chip buttons with aria-pressed are the
  accessible control; orbit nodes are pointer-only duplicates (aria-hidden, tabindex -1).
- One h1, lang set, real HTML text, visible focus ring, 44px targets, AA contrast,
  no horizontal scroll at 360 px, self-hosted fonts with the right locale forms.
- Only real content from the brand; if a fact is missing, drop the section.

FORBIDDEN
- Counters and numbers you cannot defend (no "N organisations").
- Purple gradients, glassmorphism without reason, centred hero + three cards.
- Text as images/canvas; content that appears only after animation; pinning the whole page.
- External CDNs, web-font services, stock photos.

---

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

Идея. Заглавието на живия сайт — „Виж как Варна наистина работи" — става буквално: докато човек скролва, картата на екосистемата се построява пред очите му (Варна → браншовете → организациите → връзките → видим град). После той сам я пренарежда по бранш.

Съдържание (всичко от живия сайт varnahub.com, без броеве): - Герой: надзаглавие „Жива карта на екосистемата на Варна"; h1 „Виж как Варна наистина работи"; изречението от „За проекта". - Петте стъпки на историята — перифраза на мисията и четирите принципа от „За проекта" („Направи я видима", „Позволи изследване", „Стимулирай връзки", „Движи въздействието") и на „Как събираме данните" (членствата от публичните списъци на клъстерите). - Браншовете — имената и описанията дословно от llms.txt; връзка към /sectors/<id>. - „Всеки запис минава през човек" — от /metodika: предложено → проверено → одобрено; без телефони, имейли и лица за контакт; обозначен ИИ, локално във Варна. - Отворени данни — CC BY 4.0, позоваване „VarnaHub (varnahub.com)"; наименованията, марките и логата не влизат в лиценза. - Без нито едно число за организации, членства и сектори (каталогът е в преглед). Точките са условни и това е написано под картата и в стъпка 3.

Цветове (tokens.json, тъмна тема — марката има само тъмна): фон #070c18 · втори фон #0f2534 · текст #e2ebf3 · второстепенен #a0a8b1 · акцент #1fd9f9 (възли, точки, фокус) · CTA #9b77f8 (бутони и връзките между браншовете; плътно, без градиенти).

Шрифтове: марката е на Inter (забранен за витрината) → Unbounded (заглавия, марката, „Варна" в центъра) + Manrope (текст), и двата от ../_obshto/fonts/, с locl BGR.

Движение: скролът гради картата; камерата влиза в един клъстер и излиза; накрая центърът пулсира. Филтърът — View Transitions: избраният бранш лети в центъра, „Варна" се свива в ъгъла.

---