AWESOME AI MOTION
효과Effects / 질감·스타일Texture & Style / Nº 445

CRT 주사선CRT Scanlines

CRT Scanlines
CRT 주사선
다른 이름Also known as · CRT scanlines · Scanlines · 스캔라인 · scanline-interlace · CRT Warp · 브라운관 왜곡 · CRT Scanline Roll · CRT 주사선 이동 · Rolling scanlines · CRTWarp · FaultyTerminal · Balatro · CRT 색 번짐
445
렌더 추가 예정CLIP COMINGCRT 주사선CRT Scanlines정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 445. CRT 주사선 · CRT Scanlines · linear

화면 위에 가는 주사선과 약한 곡면 왜곡, 스캔 밝기 띠가 겹쳐 CRT 모니터처럼 보이게 하는 효과Fine scanlines, mild curvature, and a moving bright band make the screen look like a CRT monitor.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
레트로 컴퓨터와 아케이드의 정서를 만들고 화면이 실제 기기 속에 있는 듯한 인상을 준다Builds retro computer and arcade atmosphere and makes the content feel as if it lives inside a real device.
언제 쓰나Use whenUSE WHEN
  • 터미널, 아케이드, 90년대 컴퓨터 화면을 재현할 때
  • 기술 회고나 레트로 톤의 타이틀 장면을 만들 때
  • To recreate terminals, arcades, and 90s computer screens
  • For retro-toned title scenes or tech retrospectives
과용 주의AvoidAVOID
  • 곡면 왜곡 0.04 초과 금지(글자 왜곡)
  • 주사선 opacity 0.25 초과 금지(밝기 손실)
분류TagsTAGS
질감·스타일Texture & Style분위기Mood브랜딩Branding숏폼Short-form설명 영상Explainer video웹 UIWeb UI난이도 중급Intermediatewebgl
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

3px 간격 주사선 위로 밝은 스캔 띠가 60px/s로 내려가고 가장자리는 2% 휘어 보인다

과용 · 나쁜 사례OVERUSE

주사선 간격을 6px 이상으로 벌려 격자 무늬처럼 보이게 하거나, 곡면 왜곡을 5% 넘겨 글자가 찌그러진다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
선 간격3px2~4px1080p 기준
선 opacity0.180.1~0.25검정 가로선
스캔 속도60px/s30~120px/s밝은 띠 이동
곡면 왜곡0.020.01~0.04가장자리 barrel
비네트0.350.2~0.5모서리 어둡게
GSAP
// fragment
vec2 c=uv*2.-1.;c*=1.+dot(c,c)*.02;vec2 u=c*.5+.5;
vec3 col=texture2D(tex,u).rgb;
col*=1.-.18*step(1.5,mod(gl_FragCoord.y,3.));
float bar=smoothstep(.08,0.,abs(fract(u.y-uTime*60./1080.)-.5)-.42);
col+=bar*.06; col*=1.-.35*dot(c,c)*.5;
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 화면에 CRT 주사선 효과를 얹어줘. 3px 간격 검정 가로선 opacity 0.18, 곡면 왜곡 0.02, 비네트 0.35, 밝기 0.06짜리 스캔 띠가 60px/s로 위에서 아래로 내려가게 해. 후처리 레이어는 pointer-events none, 시간은 paused 타임라인 진행값으로만 구동해.

Overlay a CRT scanline effect on <target>. Use 3px-spaced black horizontal lines at opacity 0.18, curvature 0.02, vignette 0.35, and a 0.06-brightness scan band moving top to bottom at 60px/s. Keep the post layer pointer-events none and drive time only from paused timeline progress.

Codex

<파일>에 crt-scanlines 후처리 레이어를 추가해. 선 간격 3px, 선 opacity 0.18, 스캔 60px/s, 곡면 0.02, 비네트 0.35. 0초, 1초, 2초를 캡처해 스캔 띠가 60px씩 내려갔는지, 본문 글자 가독성이 유지되는지, 주사선 간격이 3px인지 확대 확인해.

Add a crt-scanlines post-process layer in <file>: line gap 3px, line opacity 0.18, scan 60px/s, curvature 0.02, vignette 0.35. Capture at 0s, 1s, and 2s to verify the band moves 60px per second, body text stays legible, and zoom in to confirm 3px line spacing.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
전체 장면을 캔버스나 후처리 패스로 감싸고 uTime을 paused 타임라인 진행값으로 준다. 주사선은 gl_FragCoord로 그려 해상도가 바뀌어도 3px가 유지된다
ReelForgeBRIEF TO VIDEO
브리프에 lineGap, lineOpacity, scanSpeed, curvature를 싣고 후처리 레이어를 최상단에 둔다
Scrolline DeckSCROLL SCRUB
스크롤 진행률로 스캔 띠 y를 옮기고 주사선은 고정한다. 곡면 왜곡은 정적 값이라 스크럽과 무관하다
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
VHS 트래킹VHS Tracking
459
Nº 459VHS 트래킹VHS TrackingVHS Tracking
필름 그레인 · Film Grain
Nº 446필름 그레인Film GrainFilm Grain
렌더 추가 예정CLIP COMING
배럴 왜곡Barrel Lens Warp
462
Nº 462배럴 왜곡Barrel Lens WarpBarrel Lens Warp
렌더 추가 예정CLIP COMING
스캔 왜곡 띠Scan band
470
Nº 470스캔 왜곡 띠Scan bandScan band
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo