AWESOME AI MOTION
효과Effects / UI 시연UI Demo / Nº 326

대화 말풍선 누적Chat Thread

Chat Thread
대화 말풍선 누적
다른 이름Also known as · Chat thread · 대화 쌓기
326
도판Fig. 326. 대화 말풍선 누적 · Chat Thread · power2.out
재생 속도Speed

메시지 말풍선이 차례로 나타나고 이전 대화가 위로 밀려 올라간다.Messages appear in sequence while the previous conversation shifts upward.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
질문과 답의 관계, 시간 순서를 보여준다.Clarifies conversational order and the relationship between question and answer.
언제 쓰나Use whenUSE WHEN
  • 질문과 답을 시간 순서로 제시할 때
  • 챗봇 응답 과정을 소개할 때
  • Present questions and answers chronologically.
  • Introduce a chatbot response flow.
과용 주의AvoidAVOID
  • 메시지 등장 간격을 본문 읽기 시간보다 줄이지 않는다
분류TagsTAGS
UI 시연UI Demo순서·흐름Sequence설명 영상Explainer video제품 시연Product demo웹 UIWeb UI난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

900ms 간격으로 메시지가 등장하고 새 높이만큼 스레드가 올라간다

과용 · 나쁜 사례OVERUSE

답이 질문보다 먼저 나타나 대화 순서가 뒤집힌다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
등장120ms120~250ms말풍선 확대
시작 배율0.750.75~0.95최종 1
메시지 간격900ms900~2000ms짧은 메시지 기준
행 높이96px64~160px실측 높이와 여백의 합
GSAP
const bubbles = gsap.utils.toArray('.bubble');
gsap.set(bubbles,{opacity:0,scale:0.75});
bubbles.forEach((bubble,i) => {
  tl.to(bubble,{opacity:1,scale:1,duration:0.12,ease:'power2.out'},i*0.9);
  tl.to('.thread',{y:-i*96,duration:0.25,ease:'power2.out'},i*0.9);
});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 대화 말풍선 누적을 적용한다. 짧은 메시지 3개를 900ms 간격으로 120ms 등장시키고 새 메시지마다 스레드를 실측 높이 96px씩 올린다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Chat Thread to <target> in <file>. Reveal three short messages at 900ms intervals with 120ms entrances and shift the thread upward by each measured 96px row. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 대화 말풍선 누적 장면에 적용한다. 짧은 메시지 3개를 900ms 간격으로 120ms 등장시키고 새 메시지마다 스레드를 실측 높이 96px씩 올린다. 0.51초·1.33초·2.25초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Chat Thread in the scene for <target> in <file>. Reveal three short messages at 900ms intervals with 120ms entrances and shift the thread upward by each measured 96px row. Capture at 0.51s, 1.33s, 2.25s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 대화 말풍선 누적의 초기 상태와 종료 상태를 함께 기록하고 2.05초까지 seek로 재현한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 대화 말풍선 누적 대상 선택자와 등장 120ms, 시작 배율 0.75, 메시지 간격 900ms를 싣고 최종 상태 유지 시간을 지정한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 2.05초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.
06

잘 맞는 조합Pairs well with

답 스트리밍 · Answer Streaming
Nº 314답 스트리밍Answer StreamingAnswer Streaming
타이핑 입력 · Typing Input
Nº 317타이핑 입력Typing InputTyping Input
07

출처Sources

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