Grants.VarnaHub · Tell us who you are and what you do

(a) The reusable prompt (EN, brand-neutral)

Build a one-page homepage for a FUNDING / OPPORTUNITY DIRECTORY that asks the visitor ONE
natural question ("Tell us who you are and what you do") and re-orders itself, live, around
the answer — explaining WHY each item moved. Everything runs locally in the browser.

TRENDS
1. Contextual personalisation with a conversational input — explicit, opt-in, explainable,
   rule-based (no model, no server, no storage, no fingerprinting).
2. View Transitions API (document.startViewTransition) to morph the list into its new order.

LAYOUT (desktop: two columns, the question column is sticky; phone: stacked + bottom bar)
+--------------------------------------------------------------------------+
| wordmark                                   [How we rank] [Live site ->] [theme]
+------------------------------------+-------------------------------------+
| EYEBROW                            |  +-------------------------------+  |
| HUGE H1: the question, last words  |  | RADAR SVG      | summary line |  |
| in accent with drawn underline     |  | blips glide to | "N fit what  |  |
| +--------------------------------+ |  | the centre by  |  you said"   |  |
| | textarea: "in your own words"  | |  | rank, numbered | legend       |  |
| +--------------------------------+ |  |                | [Show all]   |  |
| "We understood:" token chips (x)   |  +-------------------------------+  |
| "Not linked to anything: ..."      |  H2 What's in the radar             |
| chip groups (fieldsets):           |  ol: cards in a 2-col grid;         |
|  type (single) · field (multi)     |  matched cards span both columns,   |
|  size (single) · place (single)    |  get a rank badge and a             |
|  needs (multi)                     |  "Shown because..." box; a divider  |
| privacy note: nothing is sent      |  "the rest are here too" separates  |
+------------------------------------+-------------------------------------+
| H2 "How we rank — no black box": 3 principles + full rules table          |
+--------------------------------------------------------------------------+
| footer: operator · data licence · concept label                          |
+--------------------------------------------------------------------------+

HOW IT WORKS
- Build step: a small generator writes ALL cards as static HTML (crawlable, no-JS complete)
  plus one JSON block of signals: {id, group, label, roots[], effects[[cardId, weight,
  reason]]}. Chips and free text map to the same signals.
- Free text: lowercase, tokenise with \p{L}, match word STEMS by prefix (and multi-word
  phrases by substring) in the site's own language. Show every recognised word as a
  removable token ("word -> label  x"); list unrecognised words honestly.
- Score = sum of effect weights of active signals; negative weights push items back and
  say why. Sort: matched first by score, then canonical order. Nothing is ever hidden.
- Apply inside startViewTransition when supported and motion is allowed; every card has
  a unique view-transition-name; root old/new animation: none so live parts (radar blips
  with CSS transform transitions) keep moving. Skip the transition if the order and the
  reasons did not change (signature compare).
- Radar: angle fixed per item, radius by rank (matched -> near centre, pushed back ->
  beyond the outer ring), numbers match the card rank badges, a slow conic sweep.

MUST
- Opt-in only: personalisation comes from what the visitor typed or pressed. A visible
  "nothing is sent, nothing is stored" note; no localStorage, no cookies, no requests.
- "Show all / reset" always available; complete default page without JS (<noscript> note).
- A "Shown because..." explanation on every moved item, quoting the visitor's own word or
  choice, and a public rules table generated from the same data.
- Chips are <button aria-pressed> inside <fieldset><legend>; live region for the summary.
- One h1, lang set, self-hosted fonts with correct locale forms, AA contrast in light and
  dark, 44px targets, visible focus, no horizontal scroll at 360 px, reduced-motion stops
  the sweep, pings and transitions.
- Only real content: item names, descriptions and statuses come from the site's data;
  if a field is missing, do not show it.

FORBIDDEN
- Inventing programmes, deadlines, amounts, success rates or counts.
- A chatbot instead of navigation; inferred or sensitive traits; fingerprinting;
  different content for search engines.
- Purple gradients, glass for its own sake, centred hero with three cards.
- External CDNs, web-font services, stock photos.

---

(b) The brief for Grants.VarnaHub

The idea. The Radar already has profiles, themes and filters — but the NGO doesn't think in filters. The page asks one question in capital letters and listens to a plain answer (“an association from a village near Varna, a theatre for children, we are only volunteers, we have no co-financing”). As the person types, the Radar's 25 categories rearrange using View Transitions, the Radar points fly towards the centre, and under each card it says “We are showing this because — you wrote ‘village’ — WOMR: …”. The sorting is calculated entirely in the browser and the page displays it prominently.

Content (only from the live mirror): - The 12 themes — names literally from TEMI; the English words used by EU calls — from the dictionary REChNIK (as whole words). - The paths: ISUN 2020 / EC portal / cascading funding / Horizon Europe / ITI–WOMR / no co-financing — sentences literally from the rules in analiz.js and the notes vomrBel, itiBel in obshto.js; the machine translation note — from index.html. - The help: in-depth analysis (text from akcenti.json, “NGO — free (East Accelerator Foundation)” from analiz.html), partners (partnyori.html), newsletter (byuletin.html), eligible costs (razhodi.html; “70 types” from kategorii_razhodi.json), “The Radar under your brand” (akcenti.json, without price). - The credits: tools addressed to “Social Enterprises” and “Municipalities” — names and statuses literally from instrumenti.json (status values from _obyasnenie, „checked on 15.10.2026“ by proveren). - No invitation, deadline, amount or percentage — the mirror has no danni/pokani.json. Links lead to the live pages (karta.html?profil=npo&tema=…, radar, analysis). - The Rules (what signal moves what) are on the page, generated from the same data.

Colours (from stil.css the live site, VarnaHub tokens): dark — background #060d1f · surface #0b1224 · text #e2e8f0 · secondary #94a3b8 · accent #22d3ee; light — background #f6f8fc · text #0b1224 · secondary #475569 · accent #0e7490 (darkened by #0891b2 due to AA). Card types: theme = accent, path = violet (#a78bfa / #6d28d9, solid, no gradient), help = green, credit = amber.

Fonts: the live site is on Inter (forbidden for the showcase) → Unbounded (the question, the brand, the numbers) + Geologica (text), from ../_obshto/fonts/, with locl BGR.

Movement: the underlining of „what you do.“ is pulled once; the radar moves slowly; with every change, the cards rearrange (View Transitions, 0.6 s), matching ones expand to a full row, dots fly towards the centre and the first three pulse. At prefers-reduced-motion — nothing moves, the layout changes instantly.

---