효과Effects / UI 시연UI Demo / Nº 335

오류 셰이크Error Shake

Error Shake

오류 셰이크

다른 이름Also known as · Error shake success · 오류 흔들림에서 성공

335

렌더 추가 예정CLIP COMING오류 셰이크Error Shake정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 335. 오류 셰이크 · Error Shake · power2.out

입력창이 짧게 좌우로 흔들리고 수정 후 체크 표시가 그려진다.A short horizontal shake marks an error before a drawn check confirms correction.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

잘못된 입력과 해결된 상태를 구분한다.Separates invalid input from a resolved state.

언제 쓰나Use whenUSE WHEN

입력 오류 위치를 알려줄 때
수정과 성공 상태를 구분할 때

Identify an invalid input field.
Distinguish correction from success.

과용 주의AvoidAVOID

오류 입력창에만 적용하고 안내 문장을 함께 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

입력창이 진폭 6px로 250ms 흔들리고 수정 뒤 체크가 300ms 그려진다

과용 · 나쁜 사례OVERUSE

전체 화면이 흔들려 어느 입력이 잘못됐는지 알 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
오류 시간	250ms	180~350ms	짧은 주의 신호
진폭	6px	3~8px	좌우 최대 변위
수정 대기	800ms	600~1600ms	오류 안내 읽기
성공 선	300ms	200~450ms	체크 경로 공개

GSAP

.input.error { animation: shake 250ms both; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%,75% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}
.check { stroke-dasharray: 100; stroke-dashoffset: 100; }
.input.corrected .check { animation: check 300ms 1050ms both; }
@keyframes check { to { stroke-dashoffset: 0; } }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 오류 셰이크을 적용한다. 오류 입력창만 250ms, 진폭 6px로 흔들고 800ms 수정 대기 뒤 pathLength 100인 체크를 300ms에 그린다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Error Shake to <target> in <file>. Shake only the invalid field for 250ms at a 6px amplitude, allow 800ms for correction, then draw a check with pathLength 100 over 300ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 오류 셰이크 장면에 적용한다. 오류 입력창만 250ms, 진폭 6px로 흔들고 800ms 수정 대기 뒤 pathLength 100인 체크를 300ms에 그린다. 0.34초·0.88초·1.55초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Error Shake in the scene for <target> in <file>. Shake only the invalid field for 250ms at a 6px amplitude, allow 800ms for correction, then draw a check with pathLength 100 over 300ms. Capture at 0.34s, 0.88s, 1.55s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.