효과Effects / 반복·앰비언트Loop & Ambient / Nº 594

막대 웨이브 로더Bar Wave Loader

Bar Wave Loader

막대 웨이브 로더

다른 이름Also known as · 막대 파동 로더

594

렌더 추가 예정CLIP COMING막대 웨이브 로더Bar Wave Loader정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 594. 막대 웨이브 로더 · Bar Wave Loader · ease-in-out

나란한 막대들이 차례로 길어지고 짧아져 파도처럼 움직인다.Adjacent bars rise and fall in a staggered wave.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

신호 처리나 작업 리듬을 보여 준다.Suggests signal processing and a steady work rhythm.

언제 쓰나Use whenUSE WHEN

음성 처리 상태에 다섯 막대가 100ms 간격으로 높아진다에서 지속 활동을 표시할 때
짧은 반복으로 신호 처리나 작업 리듬을 보여 준다 때

Indicate that voice processing is active.
Use a short repeating motion to communicate suggests signal processing and a steady work rhythm.

과용 주의AvoidAVOID

고정 파형을 실제 음량 측정값으로 표시한다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

음성 처리 상태에 다섯 막대가 100ms 간격으로 높아진다

과용 · 나쁜 사례OVERUSE

고정 파형을 실제 음량 측정값으로 표시한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1200ms	900~1800ms	한 번의 반복에 걸리는 시간이다
막대 수	5개	3~7개	나란히 배치한다
위상차	100ms	60~150ms	왼쪽부터 순서를 준다
최소 높이 비율	0.4	0.25~0.6	scaleY 기준이다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { display:flex; gap:6px; height:40px; align-items:center; }
.fx i { width:6px; height:40px; background:currentColor; animation:bars 1.2s ease-in-out infinite; animation-delay:calc(var(--i)*-100ms); }
@keyframes bars {
  0%,100% { transform:scaleY(.4); }
  50% { transform:scaleY(1); }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 막대 웨이브 로더를 적용해. 주기 1200ms, 막대 수 5개, 위상차 100ms, 최소 높이 비율 0.4, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Bar Wave Loader to <target>. Use a 1.2-second cycle, five bars, 100ms offsets, and scaleY from 0.4 to 1, and ease-in-out easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 막대 웨이브 로더를 적용해. 주기 1200ms, 막대 수 5개, 위상차 100ms, 최소 높이 비율 0.4, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 0.6초, 1.2초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Bar Wave Loader in the waiting indicator or background region of <file>. Use a 1.2-second cycle, five bars, 100ms offsets, and scaleY from 0.4 to 1, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 0.6, and 1.2 seconds to verify the intermediate change and the return to the starting frame.