효과Effects / UI 시연UI Demo / Nº 334

탄성 경계 복귀Elastic Boundary Return

Elastic Boundary Return

탄성 경계 복귀

다른 이름Also known as · Elastic boundary return

334

렌더 추가 예정CLIP COMING탄성 경계 복귀Elastic Boundary Return정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 334. 탄성 경계 복귀 · Elastic Boundary Return · power2.out

끌린 물체가 영역을 잠깐 벗어나 늘어났다가 경계 안으로 돌아온다.A dragged object resists movement beyond a boundary and returns on release.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

조작 가능한 범위와 탄성을 보여준다.Shows the allowed range and elastic resistance.

언제 쓰나Use whenUSE WHEN

탄성 경계 복귀으로 조작 가능한 범위와 탄성을 보여준다 때
제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때

Use this effect when you need to communicate: Shows the allowed range and elastic resistance.
Connect interaction states within a product demonstration.

과용 주의AvoidAVOID

경계 밖에 놓인 카드를 복귀시키지 않는다 상황을 피한다
상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 피드백Feedback 강조Emphasis 제품 시연Product demo 웹 UIWeb UI 설명 영상Explainer video 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드가 오른쪽 경계를 40px 넘었다가 경계로 돌아온다

과용 · 나쁜 사례OVERUSE

경계 밖에 놓인 카드를 복귀시키지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	0.4s	0.24~0.6s	1920x1080 시연 기준의 한 동작 시간
경계 초과 이동률	0.5	0.2~0.6	대상 크기와 정보 밀도에 맞춰 조절한다
이징	power2.out	none \| power2.out \| power2.inOut	진행값은 none, 정착은 power2.out을 쓴다

GSAP

const limit = 240, raw = 320;
const shown = limit+(raw-limit)*.5;
tl.to('.card', {x:shown,duration:.6,ease:'none'}, 0);
tl.to('.card', {x:limit,duration:.4,ease:'back.out(1.2)'}, .6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 탄성 경계 복귀을 적용해. 끌린 물체가 영역을 잠깐 벗어나 늘어났다가 경계 안으로 돌아온다. 기본 지속 0.4초, 경계 초과 이동률 0.5, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해.

Apply Elastic Boundary Return to <target> in <file>. A dragged object resists movement beyond a boundary and returns on release. Use a 0.4-second duration, a 0.5 overscroll factor, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state.

Codex

<파일>의 시연 장면에서 <대상>에 탄성 경계 복귀을 적용해. 기본 지속 0.4초, 경계 초과 이동률 0.5, 이징 power2.out를 사용해. 0초, 0.2초, 0.8초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.

Apply Elastic Boundary Return to <target> in the demonstration scene in <file>. Use a 0.4-second duration, a 0.5 overscroll factor, and power2.out easing. Capture at 0, 0.2, and 0.8 seconds to verify the initial, intermediate, and final states. Seek to the same times again and confirm identical results.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인에 탄성 경계 복귀 비트를 넣고 seek로 시작과 중간 상태를 재현한다. 기본 지속 0.4초, 경계 초과 이동률 0.5, 이징 power2.out를 고정한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 기본 지속 0.4초, 경계 초과 이동률 0.5, 이징 power2.out와 시작 상태, 완료 상태를 싣는다. 카드가 오른쪽 경계를 40px 넘었다가 경계로 돌아온다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 0.4초 타임라인에 매핑한다. scrub에서는 스프링 대신 ease-out을 쓰고 역방향에서도 시작 상태를 복원한다.

잘 맞는 조합Pairs well with

Nº 332드래그 앤 드롭Drag and DropDrag and Drop

Nº 004스프링 오버슛Spring & OvershootSpring & Overshoot

출처Sources

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