브라운관(CRT) 모니터의 가로줄을 재현한 반복 줄무늬 오버레이. 레트로 게임·VHS 무드에 씁니다.
디자인 아틀라스<div class="tv"><div class="content">SIGNAL</div><div class="lines"></div><div class="glow"></div></div>.tv{position:relative;width:min(320px,85%);aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#04120a;
display:grid;place-items:center;box-shadow:0 0 40px rgba(0,255,140,.15);animation:flicker 4s infinite}
.content{color:#5dffa0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(20px,6vmin,28px);
letter-spacing:.1em;text-shadow:0 0 8px #5dffa0}
.lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px);
animation:roll 6s linear infinite;mix-blend-mode:multiply}
.glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
@keyframes roll{to{background-position:0 6px}}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.85}98%{opacity:1}99%{opacity:.92}}repeating-linear-gradient 로 투명과 반투명 검정을 촘촘히 번갈아 쌓아 화면 전체에 얹으면 됩니다. 1~2px 간격이 실제 CRT 해상도와 비슷한 느낌을 줍니다.
줄무늬를 아주 느리게 세로로 흘려보내면(background-position 애니메이션) 화면이 미세하게 떨리는 듯한 아날로그 느낌이 더해집니다.
레트로 게임 UI, VHS 필터, 터미널/해커 무드에 씁니다. 대비가 강하면 눈이 피로하니 오버레이 불투명도를 낮게 유지하세요.