플로트 루프Float Loop
요소가 천천히 위아래로 움직이며 공중에 떠 있는 것처럼 보인다.An element gently bobs up and down.
무엇을 전하나What it tells
- 가벼운 제품을 공중에 띄울 때
- 스크롤 유도 화살표를 왕복시킬 때
- Use when presenting float loop in a waiting or ambient scene.
- Use for a compact status indicator with a stable surrounding layout.
- 클릭할 버튼이 계속 움직여 선택이 어렵다.
- 정보를 읽는 동안 반복 진폭을 키우지 않는다.
좋은 예와 나쁜 예Good and bad use
제품 아이콘이 2.4초마다 12px 위로 떠올랐다 돌아온다.
클릭할 버튼이 계속 움직여 선택이 어렵다.
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 주기 | 2.4s | 1.68~3.36s | 유한 구간을 호스트 시간으로 반복 |
| 부유 높이 | 12px | 6~18px | 기준 위치 위로 이동 |
| 위상 시간차 | 0s | 0~0.6s | 여러 대상의 시작차 |
| 이징 | sine.inOut | power2.out, power3.out, sine.inOut | 움직임의 가속과 감속 |
gsap.set('.target', {y:0});
tl.to('.target', {y:-12, duration:1.2, ease:'sine.inOut'}, 0);
tl.to('.target', {y:0, duration:1.2, ease:'sine.inOut'}, 1.2);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<파일>에서 <대상>에 플로트 루프을 적용해. 2.4초, 부유 높이 12px; 위상 시간차 0s, 이징 sine.inOut로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.
Apply Float Loop to <target> in <file>. Use a 2.4s segment with sine.inOut; implement these explicit settings: Float height: 12px, Phase offset: 0s. Use a paused, seekable timeline and repeat through local timeline time.
<파일>의 <대상> 레이어에 플로트 루프을 적용해. 2.4초, 부유 높이 12px; 위상 시간차 0s, sine.inOut를 사용하고 0초, 1.2초, 2.4초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.
Apply Float Loop to the <target> layer in <file> with Float height: 12px, Phase offset: 0s, using the supplied core snippet and a 2.4s segment with sine.inOut. Capture at 0s, 1.2s, and 2.4s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- IanLunn/HoverMIT personal/open-source + paid commercial
- DavidHDev/react-bitsMIT + Commons Clause v1.0
- local/ig-carousel-hub (
local:ig-carousel-hub/03_templates/motion/slot-spec.md)unknown