Logo blur swap

Плейграунд для блоку «S : Clients». Крути параметри, внизу готовий код з поточними значеннями.

Пресети

Сценарій

Режим

Порядок хвилі

Пауза між свапами

Затримка між слотами

Пауза при наведенні

Перехід

Тривалість

Блюр

Scale прихованого стану

Зсув X (вхід)

Зсув X (вихід)

Зсув Y (вхід)

Зсув Y (вихід)

Перекриття вхід/вихід

Easing

Адаптив

Рядів

Колонок, desktop (≥ 960)

Колонок, tablet (600 до 959)

Колонок, mobile (360 до 599)

Колонок, small (< 360)

Тривалість переходу між брейкпоінтами

Easing адаптиву

Вигляд

Колір лого

Фон

Код

Файли лежать у logo-wall/: logo-wall.css, logo-wall.js, папка logos/ з окремими SVG, demo.html, README.md. Вкладка index.html показує ініціалізацію з поточними значеннями.

Short answer

Плейграунд для блоку «S : Short answer». Вердикт зліва, варіанти справа, між ними живі конектори: лінії малюються при появі, далі імпульс іде від вердикту до карток. Гілка до нейтрального варіанта гасне на півдорозі, гілка до акцентного доходить і підсвічує картку.

Пресети

Імпульс

Пускати імпульси

Пауза між імпульсами

Час у дорозі

Довжина голови

Товщина імпульсу

Світіння голови

Куди доходить нейтральна гілка

Підсвітка картки після приходу

Easing імпульсу

Наведення на картку пускає імпульс по її лінії

Поява

Малювати блок при вході на екран

Тривалість кроку

Затримка між лініями

Easing появи

Лінії

Товщина лінії

Крутизна S-кривої

Прозорість нейтральної лінії

Промінь по рамці кнопки

Адаптив

Стек під ширину контейнера

Вигляд

Акцент

Фон

Код

Файли лежать у short-answer/: short-answer.css, short-answer.js, demo.html, README.md. Логотипи Trello і Worksection вшиті в JS. Промінь на кнопці зроблений на CSS conic-gradient замість WebGPU-шейдера з Figma.

Float actions

Плейграунд для кнопок support і ringostat поверх сайту. Сайт тут скелет із прямокутників, сторонній віджет теж: клік вантажить його (спінер на кнопці), потім кнопка стає хрестиком. Скроль у рамці, наводь, клікай, дочекайся нуджу.

Пресети

Сценарій

Клік і сторонній віджет

Час завантаження віджета (імітація)

Інші кнопки, поки віджет відкритий

Те саме на мобільному

Поява

Показати після скролу (0 = одразу)

Затримка появи

Easing появи і розкладання

Скрол

Складати при скролі вниз, розкладати при скролі вгору

Гістерезис: px в один бік до перемикання

Скільки визирає складена

Розкладати після зупинки (0 = лише при скролі вгору)

Коли футер на екрані

Наведення і клік

Підпис при наведенні

Затримка підпису

Scale при наведенні

Нудж

Нагадати про себе, якщо не чіпали

Через

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

Адаптив

Компактний режим під ширину

Вигляд

Розмір кнопки

Відступ між кнопками

Відступ від кута

Колір

Код

Файли лежать у float-actions/: float-actions.css, float-actions.js, demo.html, README.md. Модуль не знає, що за віджет за кнопкою: в onAction вантажиш свій скрипт і перемикаєш стани loading → active → idle. На сайті кнопки монтуються в body; тут вони в рамці, тому в коді немає fixed: false і scroller.