효과Effects / 등장·퇴장Entrance & Exit / Nº 031

블러 슬라이드Blurred Slide

Blurred Slide

블러 슬라이드

다른 이름Also known as · 속도 흐림 슬라이드

031

렌더 추가 예정CLIP COMING블러 슬라이드Blurred Slide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 031. 블러 슬라이드 · Blurred Slide · cubic-bezier(0.22, 1, 0.36, 1)

길게 늘어나고 흐린 요소가 이동하며 원래 모양으로 선명하게 정착한다.A stretched blurred element moves into place and resolves to its normal shape.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

빠른 이동의 잔상과 속도를 보여 준다.Shows speed through a directional motion smear.

언제 쓰나Use whenUSE WHEN

빠른 제품 이동을 표현할 때
장면의 주인공 한 요소에 시선을 모을 때

Show a product moving rapidly.
Focus attention on one main element in a scene.

과용 주의AvoidAVOID

작은 본문에 30px 흐림을 걸지 않는다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 강조Emphasis 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제품 이미지가 가로로 늘어난 잔상에서 정착한다.

과용 · 나쁜 사례OVERUSE

여러 요소에 동시에 적용해 읽을 위치와 시선을 계속 바꾸게 만든다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	600ms	420~840ms	한 번의 동작 기준
이동 거리	800px	300~1000px	1920x1080 기준
시작 흐림	30px	8~30px	최종 0px
가로 축척	2	1.2~2	세로 축척 1

GSAP

.effect { animation: effect 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes effect {
  from{transform:translateX(-800px) scaleX(2);filter:blur(30px);opacity:0} to{transform:translateX(0) scaleX(1);filter:blur(0);opacity:1}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 블러 슬라이드을 적용해. 지속 600ms, 이동 거리 800px, 시작 흐림 30px, 가로 축척 2, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Blurred Slide to <target> in <file>. Implement the provided keyframes with 600ms duration, travel distance 800px, initial blur 30px, horizontal scale 2, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 블러 슬라이드 키프레임을 추가해. 지속 600ms, 이동 거리 800px, 시작 흐림 30px, 가로 축척 2, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.3초·0.6초 시점을 캡처해 시작 상태, 중간 변화, 최종 정착를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Blurred Slide keyframes to the styles for <target> in <file> using 600ms duration, travel distance 800px, initial blur 30px, horizontal scale 2, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.3, and 0.6 seconds to verify the initial state, intermediate motion, and settled state. Use fixed keyframes and verify reduced-motion behavior.