영상 앞뒤에 브랜드 로고가 등장하는 짧은 애니메이션. 스트로크 드로우·마스크 리빌·라이트 스윕 같은 여러 기법을 조합해 만듭니다.
디자인 아틀라스<div class="stage">
<svg class="ring" viewBox="0 0 100 100"><circle cx="50" cy="50" r="34"/></svg>
<div class="word">ATLAS</div>
<div class="sweep"></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:4%}
.ring{width:clamp(48px,20vmin,90px);height:clamp(48px,20vmin,90px)}
.ring circle{fill:none;stroke:var(--accent-3);stroke-width:6;stroke-linecap:round;
stroke-dasharray:214;stroke-dashoffset:214;transform-origin:50% 50%;transform:rotate(-90deg);
animation:ring-draw 3.2s ease-in-out infinite}
@keyframes ring-draw{0%{stroke-dashoffset:214}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.word{font:800 clamp(20px,8vmin,48px)/1 sans-serif;color:#fff;letter-spacing:.04em;
clip-path:inset(0 100% 0 0);animation:word-reveal 3.2s ease-in-out infinite}
@keyframes word-reveal{0%,35%{clip-path:inset(0 100% 0 0)}75%,100%{clip-path:inset(0 0% 0 0)}}
.sweep{position:absolute;top:0;bottom:0;left:-70%;width:18%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-20deg);animation:sweep-move 3.2s ease-in-out infinite}
@keyframes sweep-move{0%,78%{left:-70%}96%{left:150%}100%{left:150%}}보통 3~5초짜리 짧은 영상으로, 유튜브 채널 인트로나 광고 끝의 브랜드 스팅(sting)으로 쓴다. 한 가지 기법만 쓰기보단 여러 기법을 순서대로 얹는다 — 심볼은 Trim Paths로 그려지고, 워드마크는 마스크로 왼쪽에서 드러나고, 마지막에 대각선 하이라이트가 한 번 훑고 지나간다.
이 마지막 훑는 빛(라이트 스윕)은 실제로는 흰색 그라디언트 도형에 블렌드 모드(Screen이나 Add)를 주고 로고 위로 이동시키는 것뿐이지만, "광택 있는 금속 로고" 같은 고급스러운 인상을 준다.
브랜드 가이드라인에 로고 애니메이션 규정이 있는 경우가 많다 — 최소 지속 시간, 배경색, 회전·기울임 금지 같은 제약을 먼저 확인해야 한다.
기법을 세 개 이상 쌓지 마세요. 로고 리빌은 짧을수록 강하고, 기법이 많을수록 산만해집니다.