AWESOME AI MOTION
효과Effects / 가상 카메라Camera / Nº 237

화면 흔들림Screen Shake

Screen Shake
화면 흔들림
다른 이름Also known as · 화면 충격 흔들림
237
렌더 추가 예정CLIP COMING화면 흔들림Screen Shake정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 237. 화면 흔들림 · Screen Shake · none

화면이나 단어가 짧게 좌우로 떨리다가 빠르게 안정된다The screen or a word trembles side to side briefly and quickly settles.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
타격, 충돌, 긴장을 몸으로 느끼게 한다. 짧고 강한 한 방의 강조가 된다Makes hits, collisions and tension felt physically. A short, strong single emphasis.
언제 쓰나Use whenUSE WHEN
  • 충격이 있는 순간이나 큰 단어가 쿵 하고 떨어질 때
  • 경고나 오류 상태를 짧게 알릴 때
  • Land a heavy word or an impact moment.
  • Signal a warning or error briefly.
과용 주의AvoidAVOID
  • 진폭 12px 초과 금지
  • 지속 400ms 초과 금지
분류TagsTAGS
가상 카메라Camera강조Emphasis피드백Feedback숏폼Short-form제품 시연Product demo설명 영상Explainer video난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

250ms 동안 진폭 9px에서 4회 감쇠하며 흔들린 뒤 원위치에 정확히 돌아온다

과용 · 나쁜 사례OVERUSE

진폭 40px로 1초 넘게 흔들려 멀미가 나고, 끝난 뒤 위치가 조금 어긋나 있다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속250ms150~400ms짧을수록 타격감
진폭9px6~12px1920x1080 기준
왕복4회3~5회진폭은 매번 0.6배
이징none진폭 감쇠로 자연스러움
GSAP
[9, -5.4, 3.2, -1.9, 0].forEach((x, i) => tl.to('.stage', { x, y: i % 2 ? 2 : -2, duration: 0.05, ease: 'none' }, 1.2 + i * 0.05));
// 끝값 0: 원위치 복귀 보장
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 화면 전체(.stage)에 스크린 셰이크를 넣어줘. 1.2초에 0.25초 동안 x 진폭 9px, -5.4px, 3.2px, -1.9px, 0으로 0.05초씩 ease none으로 흔들고, y는 ±2px만 더해. 끝은 반드시 원위치에 정확히 돌아오게 해.

Add a screen shake to the whole stage (.stage) in <target>. At 1.2 seconds, over 0.25 seconds, step x amplitudes 9, -5.4, 3.2, -1.9, 0px at 0.05s each with ease none, adding only y of plus or minus 2px. It must return exactly to its rest position.

Codex

<파일>에 screen shake를 추가해. 시작 1.2초, 0.05초 간격 5구간, x 9, -5.4, 3.2, -1.9, 0, y ±2, ease none, 난수 금지. 1.2초, 1.3초, 1.5초를 캡처해 흔들림이 감쇠하는지, 1.5초에는 x와 y가 정확히 0인지 확인해.

Add screen shake to <file>: start 1.2s, five 0.05s segments, x 9, -5.4, 3.2, -1.9, 0, y plus or minus 2, ease none, no randomness. Capture at 1.2s, 1.3s and 1.5s and verify the tremble decays and x and y are exactly 0 at 1.5s.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
고정 진폭 배열을 순차 tween으로 쌓는다. Math.random 대신 미리 정한 배열이라 seek가 결정론적이다
ReelForgeBRIEF TO VIDEO
브리프에 진폭, 왕복 횟수, 총 시간, 시작 시각을 싣는다. 마지막 값을 0으로 명시해 위치 복귀를 보장한다
Scrolline DeckSCROLL SCRUB
진행률 2% 구간에 재생한다. 배열의 마지막 값이 0이므로 스크럽이 중간에 멈춰도 위치가 커지지 않게 진폭을 0에 수렴시킨다
06

잘 맞는 조합Pairs well with

셰이크 · Shake
Nº 083셰이크ShakeShake
렌더 추가 예정CLIP COMING
비네트 펄스Vignette Pulse
085
Nº 085비네트 펄스Vignette PulseVignette Pulse
렌더 추가 예정CLIP COMING
방사 속도선Radial Speed Lines
081
Nº 081방사 속도선Radial Speed LinesRadial Speed Lines
07

쓰이는 곳Used in

루트Route
뉴스레터Newsletter
08

출처Sources

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