Playground.
Восемь инструментов, которые мы собрали для себя и открыли всем. Крутите настройки, загружайте свои изображения, копируйте CSS и забирайте результат. Всё работает локально в браузере — ни один файл не уходит на сервер.
Один бит —
много смысла.
Превращает изображение в честную чёрно-белую графику: Флойд–Стейнберг, Аткинсон, упорядоченный Байер или жёсткий порог. Цвет исчезает — остаётся структура.
Изображение обрабатывается в браузере и не покидает устройство.
Точка
становится тоном.
Классическая растровая печать: картинка разбирается на повёрнутую сетку точек, размер которых передаёт свет. Меняйте частоту, угол и форму растра — от газетного до плакатного.
Печатный растр: чем темнее участок, тем крупнее точка.
Текст
вместо пикселей.
Раскладывает картинку на символы: чем светлее участок, тем «плотнее» знак. Подберите ширину и набор символов — и получите портрет, который можно скопировать в текстовый файл.
Загрузка…
Совет: для портретов берите ширину 90–140 символов и тёмный фон.
Поток,
который слышно.
Тысячи частиц движутся по векторному полю из синусоид. Курсор притягивает поток, клик добавляет импульс. Настройте плотность, скорость и длину следа.
Курсор притягивает частицы. Клик по полю — импульс. Цикл останавливается вне экрана.
Кривая
со смыслом.
Редактор cubic-bezier(): тяните контрольные точки или двигайте ползунки. Смотрите, как ведёт себя движение, и забирайте готовую кривую в CSS.
(0.16, 1, 0.3, 1)
Кривая с выбросом (Back) выходит за пределы 0–1 — это нормально для CSS.
Проверьте
шрифт на прочность.
Четыре гарнитуры, которые работают на этом сайте. Меняйте размер, вес, трекинг и интерлиньяж — и копируйте готовый CSS одной кнопкой.
Нажмите на образец, чтобы редактировать его прямо на макете.
Строка,
которая едет.
Кинетическая типографика без библиотек: две строки, скорость, направление и обводка. Потяните сцену мышью, чтобы подтолкнуть строку.
Строка бесконечно повторяется и не упирается в край сцены.
Один бит
на клетку.
Холст 1-bit: рисуйте мышью, пальцем или стилусом. Сетка, ластик, инверсия, случайный узор и экспорт в PNG — всё в браузере, без сохранения на сервере.
Undo хранит последние 40 штрихов. Экспорт — 1024 × 1024 px.
Под капотом
Ноль зависимостей.
Ноль запросов
на сервер.
Все восемь экспериментов написаны на нативном JavaScript, Canvas 2D и SVG. Никаких фреймворков, тяжёлых шрифтовых CDN и внешних API: изображения обрабатываются целиком в браузере, а настройки живут только в этой вкладке.
Мы уважаем системные настройки: при включённом «уменьшении движения» анимации останавливаются, а результат сразу отрисовывается статично. Циклы рендера засыпают, когда сцена уходит за пределы экрана — батарея ноутбука скажет спасибо.
Эти же приёмы мы используем в клиентских проектах: от hero-сцен до интерактивных конфигураторов и визуализаций данных.
Нужен такой же уровень
интерактива на сайте?
Соберём сцену под вашу задачу: от лёгкой анимации до полноценного симулятора в браузере.