TL;DR

  • 웹 페이지에 191개의 애니메이션 ASCII 아트를 추가하는 무료 라이브러리로, 설치 없이 쓰는 HTML부터 React, Next.js, Astro, TypeScript까지 지원함.
  • 작품은 3D 도형, 물리 시뮬레이션, 생물, 로더, 차트, 타이포그래피를 비롯해 장면 13개, 프로그래밍 언어 로고 27개, 리눅스 배포판 22개로 구성됨.
  • 각 작품은 의존성 없는 소규모 TypeScript 모듈이며, 색상 작품은 캔버스에, 그 외 작품은 <pre> 요소에 표시할 수 있음.
  • HTML 방식은 ascii.js가 작품을 불러와 화면에 보일 때 재생하며, 움직임 감소 설정을 선호하는 사람에게는 첫 프레임을 유지함.
  • 라이브러리는 MIT 라이선스로 무료 사용과 수정이 가능함.

작품 모음

  • 애니메이션 ASCII 아트 191개를 제공하며, 종류에는 3D 도형, 물리 시뮬레이션, 생물, 로더, 차트, 타이포그래피가 포함됨.
  • 세부 묶음으로 장면 13개, 프로그래밍 언어 로고 27개, 리눅스 배포판 22개가 포함됨.
  • 장면에는 산과 호수, 오로라, 산호초, 우주, 도시 풍경 등이 있으며, 단색 또는 컬러로 표현됨.
  • GitHub에서 프로젝트를 확인할 수 있으며, 페이지에는 어두운 테마 전환 항목도 있음.

HTML에서 사용

  • 페이지에 https://ascii.rest/ascii.js를 모듈 스크립트로 불러온 뒤 <ascii-art piece="donut"> 태그를 넣으면 됨.
  • 설치와 빌드 단계가 필요하지 않으며, ascii.js가 <ascii-art> 태그를 정의하고 ascii.rest에서 작품을 가져옴.
  • 작품은 화면에 표시되는 동안 재생되며, 운영체제의 움직임 감소 설정을 사용하는 경우 첫 프레임을 유지함.

React와 Next.js에서 사용

  • github:bas3line/ascii 패키지를 설치하고 ascii.rest/react에서 Ascii, ascii.rest/pieces에서 작품 모듈을 가져와 사용함.
  • Ascii는 클라이언트 컴포넌트로, Next.js 앱 라우터에서 바로 동작함.
  • 작품 모듈을 직접 전달하는 대신 piece="donut"처럼 이름을 전달하면 컴포넌트가 마운트될 때 작품을 가져옴.

Astro에서 사용

  • github:bas3line/ascii 패키지를 설치하고 ascii.rest/astro에서 Ascii를 가져와 컴포넌트에 작품 이름을 지정함.
  • 서버에서 첫 프레임을 렌더링하므로 스크립트가 실행되기 전에도 페이지가 완성된 상태로 표시되며, 작품이 로드되면 재생함.

TypeScript에서 사용

  • ascii.rest의 mount 함수와 ascii.rest/pieces의 작품 모듈을 가져와 mount에 <pre> 요소와 작품을 전달함.
  • mount는 일반 작품을 <pre>에, 컬러 작품을 <canvas>에 재생하고 정지 함수를 반환함.
  • 모든 작품, 옵션, 프레임에 타입이 지정됨.

라이선스

  • 프로젝트는 MIT 라이선스로 제공되며 무료로 사용하고 수정할 수 있음.