Вау-набір для показу

Клієнт бачить свій бізнес

Логотип, назва, реальні цифри й документи клієнта в першому кадрі. Шаблон з «Компанія X» не показуємо.

Агент працює на очах

Справжні документи клієнта в 3D-студії: агент читає рядки, цифри летять у таблицю, протокол з печаткою. Живі лічильники поруч із заголовком, «Запустити» і «Ще раз».

Кінематографічний вхід

Предмет роботи агента під одним світлом, глибина різкості, проліт камери, велика типографіка по ритму. Кадр як функція часу __draw(t), звук з того самого таймлайну, MP4 без відмінностей від живого показу.

Обʼєкт продукту в просторі

kit/stage3d.js: сцена Three.js зі світлом, тінню, відбиттями, HTML-підписами з 3D-точки, імпульсами по кривих, кінцевим кадром для reduced-motion, ?t=12 для скрінів і ?rec для MP4.

Прокрутка веде сюжет

story(sec): кроки [data-step] перемикають сцену; з GSAP ScrollTrigger працює він, без нього IntersectionObserver.

Лічильники й графіки ростуть

data-count рахує від нуля за 1,4 с, .w-grow-y наливає стовпці від основи, .w-draw малює лінію. Кінцевий кадр без руху для reduced-motion.

Документи летять між вузлами

svg[data-flow] з шляхами path[data-lane] і вузлами [data-node]: документ летить кривою, вузол пружинить на прибутті, лічильник рахує оброблені.

Оброблено: 0

До і після одним жестом

[data-ba]: перетягування, клавіші ← →, підказка рухом при першій появі. Ліворуч як зараз, праворуч з агентом.

Калькулятор на цифрах клієнта

form[data-calc] з полями docs, min, rate, share і виходами [data-out]. Рахує вигоду клієнта; нашу ціну показуємо лише погоджену власником.

Інтерфейс відповідає дотику

Магнітна кнопка .w-mag, натиск 0,97, відблиск 700 мс, вібровідгук haptic(), шимер-скелет .w-sk, святкова анімація burst(el), плавна зміна стану vt(fn) через View Transitions.

Швидкість теж вау

Перший екран до 1 с: до першого кадру лише HTML, шрифт і постер, 3D і GSAP ліниво; 60 кадрів за рахунок transform і opacity; Lighthouse від 95; кожен рух з кінцевим кадром для reduced-motion.

Скляні мітки з даними

Мітки тримаються 3D-точок, цифри приходять з JSON чи fetch кожні 3 секунди, стовпці ростуть слідом.

liveTags(stage, tags, { source, every }) columns(stage, items)

Предмети одним світлом

Дванадцять ізометричних предметів inline SVG: світло зверху ліворуч, тінь вниз праворуч, акцент параметром.

iso('court', { size, accent }) з kit/iso.js

Картки, що рухаються самі

Відео без звуку грає лише у видимій зоні й стає на паузу поза нею. З reduced-motion лишається постер.

loopVideo(video) canvasLoop(canvas, draw)

Кабінет відкривається прокруткою

MacBook і iPhone на CSS 3D, екран це живий HTML з даними клієнта. Кришку відкриває прокрутка.

device(el) і змінна --p від 0 до 1

Клієнти на мапі України

Точки з даних пульсують, цифра на наведення, фокус і дотик. Контур з Кримом і межами областей.

uaMap(el, points) і kit/data/ua.js

План, що програється

Смуги ростуть за курсором часу. Пауза, перетягування курсора і стрілки клавіатури.

gantt(el, { tasks, weeks, today })

Поговорити з агентом голосом

Розпізнавання й синтез мовлення браузера, поруч текстове поле. Відповіді беруться зі сценарію, сервер для демо зайвий.

voice(el, { script, hints })

Телефон як пульт показу

Слайди на весь екран, стрілки, пульт у другій вкладці за кодом з 4 цифр через BroadcastChannel.

present(deck) remote(el, { code })

Вручну проти агента

Дві доріжки і два таймери: агент фінішує першим, чіп показує, у скільки разів швидше. Звірка одного акту.

race(el, { manual, agent })

Один словник руху

Тривалості, криві й пружини однакові в CSS і JS. Натисніть криву, щоб побачити її хід.

import { DUR, EASE, SPRING } from './motion.js'

Звуковий логотип з перемикачем

Три ноти синтезом WebAudio лише після жесту людини. Вибір звуку памʼятається.

soundToggle(btn) playLogo()

Справжні фото і логотипи

Фото з місця і логотипи систем клієнта з simple-icons через jsDelivr, у кожного alt.

logos(el, items) і .u-photo

Тридцять секунд до першої дії

Три підказки поверх інтерфейсу і порожній стан з однією кнопкою, яка веде до першого результату.

coach(box, steps) emptyState(el, opts)

Ctrl K знаходить усе

Нечіткий пошук по розділах і діях: стрілки, Enter, Esc. На телефоні велика кнопка пошуку.

palette({ items, buttons }) fuzzy(q, s)

Одна головна дія на екран

Цілі від 48 px, нижня навігація до 640 px ширини, вкладки зі стрілками і вібровідгуком.

appNav(app) і .u-app з container queries

Скасувати замість «Ви впевнені?»

Дія виконується одразу, тост дає 5 секунд на скасування. Ctrl Z теж повертає.

undoToast(text, { onUndo, onCommit })

Висновок агента з джерелами

«Чому так» розкриває джерела, кожне веде до точного рядка документа.

why(el, { sources, onOpen })

Що змінилось з вашого візиту

Час візиту лежить у localStorage, зміни з лічильниками, кожна веде до свого списку.

digest(el, { key, changes })

Продовжити з того самого місця

Стан у посиланні й сховищі: банер повертає на крок, посилання відкриває його на іншому пристрої.

resume(el, { read, apply, describe })

Контраст AA і видимий фокус

Пари токенів перевіряються наживо, кільце фокусу 3 px, пропуск до змісту, кінцеві кадри без руху.

a11yReport(el, pairs) contrast(a, b)

Шанс стрілкою і діапазоном

Дуга наливається, стрілка пружно стає на значення, на кінці дуги мʼяке світло. Смуга показує діапазон 80%.

barometer(el, { value, lo, hi }) set(v, { lo, hi }) з kit/dataviz.js

Що тягне вгору і вниз

Чинники зі знаком і вагою, коромисло нахиляється до суми. Натисніть чинник, щоб побачити шанс без нього.

scales(el, { factors, base }) toggle(i)

Дані як фізичні предмети

Металевий стрижень значення в скляній колбі діапазону, відбиття студії з RoomEnvironment. Скло без transmission: на слабкому GPU воно біліє.

solid(fig, { items })

Тихий фон і клік цифри

Фон вмикається лише кнопкою, тихий клік звучить на кожну зміну цифри. Вимикач спільний з перемикачем звуку набору.

soundBed() clickOn(el) і подія dv-tick

Мініатюра 300 px без провалів

Заголовок від 14 px, перший кадр без темряви й розмиття, контраст тексту. Той самий аналіз робить ops/thumb_check.mjs.

thumbCheck(src) thumbPanel(el, r)

Графіка перевіряє себе сама

Контраст від 4,5, шрифт від 12 px на 390, нічого не обрізано. CLI проходить 390 і 1280 і дає JSON із селекторами.

gcheck() з kit/gcheck.js і ops/graphics_check.mjs