performative-ui: бібліотека React, що пародіює лендінги AI-стартапів

performative-ui — це бібліотека React-компонентів, яка відтворює візуальну мову лендінгу AI-стартапу і робить це як комедію. Її власний слоган звучить так: «AI-native React-компоненти, що показують, наскільки перепідписаний ваш інвестиційний раунд».

Каталог дизайнерських штампів

Опублікований на GitHub Pages і npm, проєкт збирає понад 30 компонентів, згрупованих за тим, яку частину маркетингової сторінки вони займають: Heroes, Menus, Social Proof, Atoms, Primitives, Banners, Backgrounds, Surfaces, Conversation і Pricing & Conversion. Кожен запис має однорядковий опис, який прямо називає шаблон, який він пародіює. StickyBanner — «новини про фінансування, замасковані під корисну функцію». StatusDot — «завжди зелений, навіть коли це не так». Popover — «створений для конверсії, а не для згоди». WaitlistForm пропонує «попит, який ми самі й вигадали», а Prompt — «textarea, який кожен AI-розробник додає замість того, щоб пояснити, що робить його продукт».

Про що насправді говорять ці компоненти

Частина жартів вказує на конкретні звички сучасного стартап-стеку. MockIDE обіцяє: «справжній код буде. Це лише трейлер». TokenStream зауважує, що «server-sent events (SSE) додали до специфікації HTML5 ще 2008 року, але не використовували до 2025-го». Aurora зводить ціле покоління візуальної ідентичності до «трьох плям». SlippyWords описано як «слова, що фізично рухаються під час скролу. Дизайн руху, нібито», а LogoMarquee стверджує, що йому «довіряють усі, про кого ви чули, зокрема ті, хто не підписався».

Решта каталогу доповнює жанр: п'ять варіантів hero-секції (AsciiHero, Goldeneye, Rotator, WordRoll, PromptHero), меню Temperature, що «доходить до одинадцяти», лічильники статистики, бейджі спільноти, GlassCard з описом «backdrop-filter: амбіція», чат-бульбашки, WibblingSpinner і сяючий середній тариф.

Встановлення та порти

Бібліотека публікується в npm під назвою performative-ui, поточна версія — 0.7.0, ліцензія MIT. Вона підтримує React 18 і 19, написана на строгому TypeScript, а README заявляє бандл приблизно на 30 КБ. Документація та живі демо розміщені поруч із каталогом, і в проєкту є два спільнотні порти Svelte 5 для того ж списку компонентів. На Hacker News, де він з'явився як пост Show HN, він зібрав понад 1100 балів.