AWESOME AI MOTION
레시피Recipes / R07

인용 강조 카드Quote Card

Quote Card
R07
레시피Recipe R07. 인용 강조 카드 · 4초
재생 속도Speed

두 줄 인용문을 공개하고 핵심 구절과 출처를 차례로 보인다Reveal a two-line quote, then highlight its key phrase and show the source.

01

언제 쓰나When to use

어울리는 영상StyleSTYLE
인용문과 핵심 메시지를 전달하는 설명 영상An explainer video presenting a quote and its key message
구조StructureSTRUCTURE
행 단위 마스크 리빌 → 핵심 구절 하이라이트 → 출처 지시선Reveal lines through masks → sweep a highlight across the key phrase → draw a source leader line
주의AvoidAVOID
  • 장식용 큰 따옴표와 상자 패널을 만들지 않는다
  • 교재 예문을 실제 인물의 발언으로 표기하지 않는다
  • 출처는 두 줄 인용문을 읽은 뒤 공개한다
02

순서와 타이밍Order and timing

  1. 0.3~1.7s
    마스크 리빌Mask Reveal 큰 따옴표 없이 인용문 두 줄을 읽게 한다
    yPercent 110 → 0 · 1.05s · 행 시간차 0.35s · power3.out
  2. 1.4~2.75s
    하이라이트 스윕Highlight Sweep 다음 말 구절만 왼쪽부터 칠한다
    scaleX 0 → 1 · 1.35s · power1.inOut · 높이 66px · 좌우 8px · 앞 단계 겹침 0.3s
  3. 2.4~3.4s
    주석 등장Annotation Callout 먹 점과 지시선 뒤에 출처 한 줄을 보인다
    점 반지름 4px · 지시선 0.65s · none · 출처 3.05s 시작 · y8 → 0 · 0.35s · 3.4~4s 홀드
03

에이전트 프롬프트Agent prompts

Claude Code

4초 인용 강조 장면을 종이와 먹 스타일로 만들고 큰 따옴표를 넣지 않는다. AI는 앞의 말을 읽고, 다음 말을 고른다를 두 줄로 나누고 0.3초부터 yPercent110에서 1.05초와 행 간격0.35초로 공개한다. 1.4초부터 다음 말 아래의 높이66px 띠를 scaleX0에서1로 1.35초 동안 칠한다. 2.4초부터 출처 지시선을 0.65초 그린 뒤 3.05초에 출처 · AI 원리 교재 예문을 y8에서0으로 0.35초 등장시키고 4초까지 홀드한다.

Create a 4-second quote emphasis scene in paper and ink colors without oversized quotation marks. Split "AI reads the preceding words and picks the next word" into two lines. Starting at 0.3s, reveal them from yPercent 110 over 1.05s with a line stagger of 0.35s. Starting at 1.4s, sweep a 66px-high band beneath "the next word" from scaleX 0 to 1 over 1.35s. Starting at 2.4s, draw the source leader line over 0.65s. At 3.05s, reveal "Source · Example sentence from an AI principles textbook" from y 8 to 0 over 0.35s, then hold until 4s.

Codex

recipes/quote-card/index.html에 mask-reveal 0.3초, highlight-sweep 1.4초, annotation-callout 2.4초 순서의 paused GSAP 타임라인을 만든다. 지시선은 SVG pathLength1과 strokeDashoffset1에서0으로 구현하며 출처는 선 완성 뒤 3.05초에 표시한다. 1초, 1.67초, 2.3초, 3초, 3.87초 캡처에서 행 리빌, 한 구절 강조, 지시선, 출처와 최종 홀드를 확인한다. node scripts/render.mjs recipes/quote-card --jobs 1과 python3 scripts/sheet.py recipes/quote-card로 검증한다.

Create a paused GSAP timeline in recipes/quote-card/index.html with mask-reveal at 0.3s, highlight-sweep at 1.4s, and annotation-callout at 2.4s, in that order. Implement the leader line with SVG pathLength 1 and strokeDashoffset 1 to 0; show the source at 3.05s after the line finishes. In captures at 1s, 1.67s, 2.3s, 3s, and 3.87s, check the line reveals, single-phrase emphasis, leader line, source, and final hold. Validate with node scripts/render.mjs recipes/quote-card --jobs 1 and python3 scripts/sheet.py recipes/quote-card.

라이브 소스 열기Open live sourceREADME