의존성 없는 TypeScript 모듈 191개로 웹페이지에 애니메이션 ASCII 아트 넣는 ascii.rest 공개
- 웹페이지용 애니메이션 ASCII 조각 191개를 공개함. 풀컬러 장면 13개, 로더·차트·타이포, 27개 언어 로고, 22개 리눅스 배포판, 3D 도형·물리·생물을 포함
- 조각마다 의존성 없는 TypeScript 모듈 하나로 제공되고 MIT 라이선스로 무료 사용과 수정이 가능함. React, Next.js, Astro, 일반 HTML 페이지를 지원
- HTML에서는 스크립트 태그와 ascii-art 태그만 넣으면 설치나 빌드 없이 동작함. 화면에 보일 때 재생하고 reduced motion 사용자에게는 첫 프레임을 유지
- Astro 어댑터는 서버에서 첫 프레임을 렌더링해 스크립트 실행 전에 페이지를 완성하고, TypeScript의 mount 함수는 pre나 컬러 조각용 canvas에 재생한 뒤 정지 함수를 반환함
- 해커뉴스 댓글에서는 색과 캔버스 렌더링을 쓰는 만큼 ASCII 아트가 아니라 유니코드나 셰이더에 가깝다는 지적과 함께 스피너·프로그레스 바 진동 버그 보고가 나옴
Hacker News opinions
예쁜데 조각들이 애니메이션으로 안 보임. 내가 뭘 놓친 건가?
프론트 페이지에서 폰으로 보면 프레임레이트가 엄청 낮음. 하나 클릭해서 들어가면 그 애니메이션만 보임.
나도 Claude Code나 Pi가 얼마나 일하는지 보여주려고 훨씬 작은 규모로 비슷한 걸 만들었음. 예전엔 SSH로 들어가는 서버마다 뭔가 띄워서 내가 어디 있는지 기억하고 싶었는데, 이 ASCII 아트 보니까 그 생각 남.
Flow 예쁘고 이 테마에 잘 맞음. 설치했고 고치고 싶은 게 많음. PR 받나, 아니면 그냥 포크할까? 불꽃이 2분마다 기본값으로 서서히 줄어드는 decay, 열 때마다 다른 애니메이션 자동 선택, 애니메이션별 랜덤 팔레트(보라·파랑·빨강·주황·노랑)를 넣고 싶음.
내 첫 온라인 기여가 로컬 dial-up BBS였음. 게시판 테마에 맞춰 애니메이션 ASCII 시퀀스를 만드느라 하루 종일 보냈음.
멋진데 애니메이션 절반 정도는 행이 뒤섞여 있음.
파이어폭스 모바일 씀?
이건 ASCII 아트가 아님. 크기가 다른 점들은 ASCII 문자가 아니잖아. 유니코드 아트 아닌가?
제대로 된 ASCII도 많음. julia-set 같은 걸 보면 됨.
지적은 맞는데 ASCII에도 굵기가 다른 점이 있으니 ASCII 버전으로 유도하는 건 trivial함.
기술적 금욕의 가식처럼 보임. 제약 매체의 신뢰는 빌려오면서 제약은 안 받아들이는 셈. 테슬라를 시트로엥 2CV처럼 개조하는 느낌.
'텍스트 문자로 구성됨'은 ASCII 아트의 아주 느슨한 정의임. 색으로 대비를 만드는 걸 보면 입력을 3개 문자 중 하나로 양자화한 셰이더에 가깝고, 그 사이에 측정 가능한 거리가 있음.
내 시스템이 reduced motion이라 아무것도 안 움직임. 배려는 좋은데 데모 페이지에서 더 명확히 알려줬으면. scenes 섹션은 ASCII도 아님.
지금 고쳤음!
Scenes는 디더링을 빙 둘러 시도한 것 같음. 나머지도 맥시멀리스트고. 애니메이션으로는 좋은데 UI나 TUI에는 안 쓰겠음.
어제 omp.sh 애니메이션에 넋을 놓렸는데 이건 그 다음 단계임. ASCII가 이렇게 오래됐는데 왜 지금 유행하는 건가?
이건 ASCII가 아니고 유니코드도 아님. 스크립팅과 캔버스 렌더링임. 텍스트 아트가 유행하는 건 정성껏 만든 것처럼 보이면서 실제로는 프로그램이 생성하기 때문이고, CLI와 텍스트가 GUI보다 인기 많아지고 채팅 인터페이스는 거의 CLI 같음.
스피너 페이지가 엄청 격렬하게 진동함. 프로그레스 바도 너비가 바뀔 때 그럼.
이런 걸 만드는 도구가 있으면 좋겠음. 제작 도구도 낼 생각 있나?
네, 살펴보겠음.
계속 스크롤하면서 감탄했음. split-flap 멋지고 자연 장면들은 디지털 액자에 띄우고 싶어짐.
ASCII 아님. 그림도 많이 이상하고 애니메이션도 깨져 있음. AI 아트가 다 슬롭이라고 하진 않지만 여긴 노력이 거의 없음. 왜 이렇게 칭찬하는 거임?
일을 안 했고 그걸 자랑하는데 왜 대단하다고 하는지 모르겠음.
진짜 ASCII 애니메이션 라이브러리인 play.ertdfgcvb.xyz가 떠오름.
코드 봤는데 인상적임. 미리 정의된 비트맵 같은 파일이 있고 거기에 알고리즘을 적용해 애니메이션을 만든 건가?
왜 늙은이들이 꼰대처럼 구는지 궁금한 젊은 사람들한테는 예전에 ASCII 아트가 뭘 뜻했는지 보여줌. asciiarena.se
고정 그리드 없이 포인틸리스트나 하프톤처럼 점을 자유롭게 배치해도 같은 느낌이 날까?