ИИтог

ascii.rest: 191 анимированный ASCII-рисунок для веб-страниц под MIT

инструментыРедакция ИИтогHacker News🔥52Рейтинг ИИтог52Влияние20Новизна30Релевантность60Неожиданность40Участники5Достоверность70

ascii.rest, набор анимированного ASCII-арта для веб-страниц. На странице проекта автор указан как @bas3line, а репозиторий называется bas3line/ascii. В библиотеке 191 рисунок, разбитый на 14 категорий.

Каждый рисунок, небольшой типизированный модуль на TypeScript без зависимостей. Подключать его можно в React, Next.js, Astro или в обычном HTML. Рисунок анимируется, пока находится на экране, а для пользователей, которые предпочитают уменьшенное движение, показывает статичный первый кадр.

Способы подключения по описанию на странице. В обычном HTML нужно загрузить скрипт https://ascii.rest/ascii.js и использовать пользовательский тег ascii-art с атрибутом piece; установка и сборка не требуются. Для React пакет ставится прямо с GitHub командой npm install github:bas3line/ascii. В Astro первый кадр отрисовывается на сервере. В TypeScript функция mount() работает с элементом pre (для цветных рисунков, с canvas) и возвращает функцию, которая останавливает анимацию.

Категории и число рисунков в них: сцены (13), полноцветные анимированные пейзажи и небо; компоненты интерфейса (12); данные (10); шрифт (9); логотипы (27), логотипы языков программирования, в цвете или одним цветом, от C до Zig; дистрибутивы (22), логотипы дистрибутивов Linux; фигуры (12), трёхмерные формы; космос (11); физика (14); природа (16); существа (10); предметы (14); генеративные (13); эффекты (8). В сумме получается 191.

Проект можно свободно использовать и изменять по лицензии MIT.

Ключевые факты

  • ascii.rest, библиотека анимированного ASCII-арта для веб-страниц от автора @bas3line (репозиторий bas3line/ascii).
  • В наборе 191 рисунок в 14 категориях; самые крупные, логотипы языков программирования (27) и дистрибутивов Linux (22).
  • Каждый рисунок, небольшой типизированный модуль TypeScript без зависимостей; работает с React, Next.js, Astro и обычным HTML.
  • В HTML достаточно подключить скрипт ascii.js и тег ascii-art с атрибутом piece, установка и сборка не нужны.
  • При настройке уменьшенного движения показывается статичный первый кадр; лицензия MIT.

Почему это важно

Это небольшая нишевая новинка для фронтенда, без связи с нейросетями и без заметного влияния на отрасль. Интерес в том, что готовый каталог из 191 анимированного рисунка подключается без установки и сборки и учитывает пользователей с настройкой уменьшенного движения.

Кому это важно

Разработчикам лендингов, личных сайтов и документации, которым нужен декоративный ретро-элемент в стиле терминала. Отдельный плюс для тех, кто работает с React, Next.js или Astro, и для любителей ASCII-графики вообще.

Как это применить

Самый простой путь, обычный HTML: загрузить скрипт https://ascii.rest/ascii.js и поставить на страницу тег ascii-art с атрибутом piece, указав нужный рисунок. Для React на странице проекта указана установка напрямую с GitHub: npm install github:bas3line/ascii. В TypeScript функция mount() подключает рисунок к элементу pre (или canvas для цветных) и возвращает функцию остановки анимации. Лицензия MIT позволяет свободно использовать и менять код; других условий и цен на странице не приводится.

Можно ли доверять

Все сведения взяты со страницы самого проекта, это самоописание автора. Из неё не видно ни даты выпуска, ни версии, ни истории изменений. О самом авторе известен только ник @bas3line. Данных о размере, производительности и поддержке браузеров нет, поэтому заявления об отсутствии зависимостей и работе с фреймворками стоит проверить на практике. Получен усечённый вид страницы, так что описания отдельных рисунков за пределами списков категорий могли не попасть в пересказ.

Риски и подводные камни

Для React пакет ставится прямо с GitHub, а не описан как пакет из реестра npm, поэтому стабильность версий зависит от репозитория. Сведений о весе библиотеки, нагрузке на процессор при множестве анимаций и поддержке браузеров нет, так что на страницах с большим числом рисунков производительность придётся проверять самим. Для пользователей с уменьшенным движением предусмотрен статичный первый кадр, но проверить доступность в вашем проекте всё равно стоит.