시소 균형Seesaw Balance
막대 양쪽이 반대 높이로 움직이고 접시는 수평을 유지한다.A beam tilts around a shared fulcrum while its pans counter-rotate.
무엇을 전하나What it tells
- 양쪽 선택지의 무게를 비교하며 접시 라벨을 수평으로 유지한다.
- 두 선택지의 무게와 트레이드오프를 비교한다. 기준값과 대상을 함께 표시할 때.
- Compare the weight of two choices.
- Keep the encoded values, labels, and visual state synchronized.
- 접시 역회전은 막대 회전값과 정확히 반대로 둔다.
좋은 예와 나쁜 예Good and bad use
양쪽 선택지의 무게를 비교하며 접시 라벨을 수평으로 유지한다.
접시도 막대와 함께 기울여 설명 텍스트를 읽기 어렵게 만든다.
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 주기 | 2000ms | 1500~3000ms | 한 왕복 기준 |
| 기울기 | 8deg | 4~12deg | 가독성 유지 |
| 받침점 | 50% 50% | 45~55% 50% | 공유 회전축 |
const tl=gsap.timeline({paused:true});
tl.to('.beam',{rotation:8,duration:1,ease:'sine.inOut',transformOrigin:'50% 50%'},0);
tl.to('.pan',{rotation:-8,duration:1,ease:'sine.inOut'},0);
tl.to('.beam',{rotation:-8,duration:1,ease:'sine.inOut'},1);
tl.to('.pan',{rotation:8,duration:1,ease:'sine.inOut'},1);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<파일>의 <대상>에 시소 균형을 적용해. HTML 공유 받침점으로 막대를 회전하고 접시를 역회전한다. 주기 2000ms; 기울기 8deg; 받침점 50% 50%을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.
Implement Seesaw Balance on <target> in <file>. Use a 2000ms cycle and an 8 degree tilt around a shared center fulcrum at 50% 50%. Counter-rotate each pan by the opposite angle to keep labels level. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.
<파일>의 설명 장면에서 <대상>에 시소 균형을 적용해. HTML 공유 받침점으로 막대를 회전하고 접시를 역회전한다. 주기 2000ms; 기울기 8deg; 받침점 50% 50%을 적용한다. 0초, 1초, 2초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.
Implement Seesaw Balance on <target> in <file>. Use a 2000ms cycle and an 8 degree tilt around a shared center fulcrum at 50% 50%. Counter-rotate each pan by the opposite angle to keep labels level. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 1s, and 2s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- gongnyang/reelforge (
gongnyang/reelforge:skills/reelforge/references/grammar/01-anchor-transform.md#seesaw-fulcrum-tilt)Apache-2.0