효과Effects / 질감·스타일Texture & Style / Nº 461

ASCII 모션ASCII Motion

ASCII Motion

ASCII 모션

다른 이름Also known as · ASCII resolve · ASCII 해상도 복원 · 문자 격자 영상 · ASCII Mosaic Animation · ASCII 모자이크 애니메이션 · ASCII art filter

461

렌더 추가 예정CLIP COMINGASCII 모션ASCII Motion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 461. ASCII 모션 · ASCII Motion · power2.inOut

이미지를 밝기별 문자 격자로 바꿔 격자 크기가 줄어들며 원본으로 해석되는 효과An image becomes a grid of brightness-mapped characters, and the grid tightens until it resolves into the original.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

디지털 코드와 터미널 미학을 보여주고, 이미지가 데이터로 구성되었다는 인상을 준다Shows code and terminal aesthetics and the idea that an image is built from data.

언제 쓰나Use whenUSE WHEN

개발자 도구, AI, 코드 주제의 인트로에서 이미지를 문자로 보여줄 때
이미지가 문자에서 실제 화면으로 해상되는 전환을 만들 때

In dev-tool, AI, or code intros where an image should show as characters
For a transition where characters resolve into the real picture

과용 주의AvoidAVOID

문자 단계 16개 초과 금지
격자 4px 미만 금지(문자 식별 불가)

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이미지가 24px 격자의 문자 화면으로 시작해 1.5초 동안 6px로 촘촘해지며 원본으로 교차된다

과용 · 나쁜 사례OVERUSE

문자 종류가 너무 많아 알아보기 어렵거나, 격자가 너무 작아 성능이 떨어지고 문자가 뭉개진다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1500ms	1000~2200ms	해상 진행
격자	24px에서 6px	32~4px	셀 크기
문자 단계	10단계	6~16단계	' .:-=+*#%@'
교차	마지막 300ms	200~500ms	원본으로 페이드
폰트	모노스페이스 700	고정폭	셀 폭과 일치

GSAP

const ramp=' .:-=+*#%@';
function draw(p){const cell=Math.round(24-18*p);
 for(let y=0;y<1080;y+=cell)for(let x=0;x<1920;x+=cell){
 const l=lum(x,y); ctx.fillText(ramp[Math.floor(l*9.99)],x,y+cell);}}
tl.to({p:0},{p:1,duration:1.5,ease:'power2.inOut',onUpdate(){draw(this.targets()[0].p)}},t);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<이미지>를 ASCII 문자 화면으로 바꿨다가 원본으로 해상해줘. 24px 격자로 시작해 1.5초 동안 6px까지 power2.inOut으로 촘촘하게 만들고, 문자 램프는 ' .:-=+*#%@' 10단계, 모노스페이스 700 폰트. 마지막 0.3초에 원본으로 교차하고 draw는 progress 순수 함수로 seek 가능하게 해.

Turn <image> into an ASCII character display and resolve it to the original. Start on a 24px grid and tighten to 6px over 1.5s with power2.inOut, using a 10-step ramp ' .:-=+*#%@' in a bold monospace font. Cross-fade to the original over the last 0.3s. Draw as a pure function of progress so it is seekable.

Codex

<파일>에 ascii-motion 캔버스를 구현해. 격자 24px에서 6px, 1500ms power2.inOut, 문자 10단계, 마지막 300ms 원본 교차. 0초, 0.5초, 1.0초, 1.6초를 캡처해 셀 크기가 줄어드는지, 문자 밝기가 원본 명암과 대응하는지, 1.6초에 원본이 온전한지 확인해.

Implement an ascii-motion canvas in <file>: grid 24px to 6px, 1500ms power2.inOut, 10 characters, 300ms final crossfade to the original. Capture at 0s, 0.5s, 1.0s, and 1.6s to verify the cell size shrinks, character density tracks source luminance, and the original is intact at 1.6s.