진행 중인 모션을 다시 조작할 때

CoolMode는 누름 상태에서 최대 45개 입자를 생성하고 공유 고정 레이어에 붙입니다. cleanup은 입자가 0개가 될 때까지 기다리지만 autoAddParticle을 직접 끄지 않습니다. 누른 채 제거하면 생성이 이어지는지 확인할 이유가 있습니다.

Pointer는 자신의 부모에 mouse 이벤트를 붙이고 cursor=none을 쓰며, client 좌표를 fixed 레이어에 전달합니다. 데모는 네 카드마다 다른 포인터를 둡니다. 정리 시 원래 스타일을 저장해 복구하지 않고 빈 문자열로 바꿉니다.

RippleButton은 클릭 좌표와 Date.now key로 파동을 추가합니다. effect는 마지막 파동만 타이머로 제거하며 새 클릭 때 이전 타이머를 취소합니다. CSS duration 문자열과 parseInt(duration)의 밀리초 해석은 0.6s 같은 입력에서 일치하지 않습니다.

SmoothCursor는 fine·hover 포인터가 있을 때 body cursor를 none으로 바꾸고 pointermove를 프레임마다 하나 처리합니다. touch 입력은 무시하지만 데모 안내 문구는 md 폭 기준입니다. 제거 시 body cursor를 auto로 덮어 기존 값을 복구하지 않습니다.

SparklesText는 100ms interval로 lifespan을 줄이고 만료된 별을 새 위치로 교체합니다. 각 별의 SVG는 별도로 0.8초 효과를 반복합니다. 대표 데모는 정적 strong 문구와 기본 열 개의 별을 함께 둡니다.

대표 DoubleSlideshow는 배경·전경 Slider를 반대 방향으로 움직이고 제목도 같은 next/prev 요청에서 갱신합니다. 각 Slider는 이동 중 추가 요청을 거절합니다.

A local timeline assigns independent character offsets, cyclic colors and directions, seeded repeat-refresh particles, and a smoothed playback rate. Line and character clipping can be compared without a text-animation library. This binding describes the authored study and does not verify the original project.

toggleMenu는 현재 progress를 읽고 완전히 열린 메뉴와 도중에 닫는 메뉴를 구분합니다. 도중 닫기는 현재 진행률을 보존해 타임라인을 다시 만들고 exitSpeed를 적용합니다.

setProduct는 이전 galleryTimeline을 종료하고 상품별 이미지 묶음을 선택합니다. then 인수에서 startPreviewGallery를 직접 호출하므로 갤러리 시작은 전환 완료 콜백으로 지연되지 않습니다.

버튼은 Flip.getState로 이전 기하를 저장한 뒤 data-size-grid와 활성 버튼을 갱신합니다. animated 잠금은 Flip의 onComplete에서만 풀립니다.

첫 효과는 글자별 blur와 brightness를 스크롤에 묶습니다. TextSplitter의 resizeCallback도 scroll을 다시 호출하여 새 tween과 ScrollTrigger를 만듭니다.

경로 버튼은 plane을 새 곡선으로 이동시키고 camPos의 기존 tween을 종료한 뒤 새 위치로 보냅니다. animate는 camPos가 tween 중일 때 곡선 좌표를 직접 덮어쓰지 않습니다.

Transition.open은 fillContent의 decode를 기다린 뒤 opening 상태를 다시 확인합니다. close는 타임라인이 없으면 reset하고, 이미 재생 중이면 역재생한 뒤 정리합니다.

handlePointerMove는 이동 거리의 크기에 x 방향 부호를 붙여 dragVelocity를 정합니다. handlePointerUp은 포인터 해제와 취소 모두에서 isDragging만 내리며 속도를 지우지 않습니다. 다음 프레임부터 자동 이동에 남은 속도를 더하고 감쇠합니다.

navigate는 이전 페이지 입력을 막고 새 DOM을 추가한 뒤 텍스트와 입출장 전환들을 Promise.all로 기다립니다. 완료 후 이전 DOM을 제거하며 mutating 동안 다른 탐색을 거절합니다.

drag는 section 좌표계의 제어점을 바꾸고 기존 scrollTrigger 진행값을 저장한 뒤 timeline을 다시 만듭니다. 새 start·end 구간에서 같은 비율의 scroll 위치를 설정합니다. resize는 점 위치를 다시 재지만 이미 편집한 제어점은 그대로 사용합니다.

HTML은 WebGL canvas를 교체되는 data-barba container 밖에 두고 배포 코드는 하나의 Mr 장면을 재사용합니다. Gp는 namespace pen·cup·suzanne을 카메라 x 0·3·6으로 옮깁니다. leave는 완료 Promise를 반환하지만 enter의 Jb와 Gp는 애니메이션 완료를 반환하지 않습니다.

createFlipOnScrollAnimation은 각 data-step의 기하를 저장하고 하나의 요소에 Flip.fit을 이어 붙입니다. resize 때 이전 GSAP context를 revert하고 다시 만듭니다.

onResize는 타임라인 진행률을 저장하고 0으로 되돌려 측정한 뒤 재생성합니다. 마지막에 저장한 progress를 복원하면서 pause하므로 이동 중 resize도 일시 정지가 됩니다.

about 전환의 leave는 #webgl을 보이고 pointerEvents=auto로 바꾼 후 uProgress를 -0.75까지 보냅니다. after는 1.5로 되돌리고 완료 때 입력을 통과시키며 덮개를 숨깁니다.

Fx1은 배경 이미지를 두 div로 복제합니다. 진입 시 이탈 타임라인을 종료하고 윗이미지의 clip-path와 아랫이미지 필터를 함께 바꿉니다.

resetElement는 원래 innerHTML을 다시 넣고 적용 속성을 초기화합니다. effect 교체는 currentTween을 kill하지만 내부 자식 노드의 정체성도 재생성됩니다.

Model은 GLTF의 각 animation clip에 LoopOnce와 clampWhenFinished를 적용해 여섯 초 동안 재생합니다. handleClick은 모든 action을 reset 후 play하며 cleanup은 mixer의 action을 정지합니다.

Masked Text는 줄·단어·글자 버튼을 바꿀 때 이전 tween을 끝내고 기존 대상 yPercent를 0으로 돌립니다. Falling Text는 autoSplit의 onSplit에서 줄별 트리거를 만들고 gsap.context를 반환해 재분할 정리를 연결합니다.

Dots는 관성 종료 콜백에서 elastic 복귀를 시작하면서 _inertiaApplied를 바로 false로 풀어 복귀 중 재입력을 허용합니다. Underline은 mouseleave 때 draw-in 완료 콜백을 playOut으로 바꿔 그리기가 끝난 뒤 지웁니다.

navigate는 내비게이션의 현재 표시를 먼저 바꾸고 이전 슬라이드의 상세가 열려 있으면 전환 완료 때 hideContent를 호출합니다.

toggleMode는 currentMode와 버튼 표시를 즉시 바꾸고 showList 또는 showGrid를 실행합니다. 목록 진입은 열을 ±200vh로 이동시키는 장면과 Flip 단계를 조합합니다.

SequenceController는 ANIMATING·COLLAPSED·REVERSING 상태로 입력을 제한합니다. reset은 voxel uniform뿐 아니라 gsap.getTweensOf("*")로 찾은 tween들도 종료합니다.

A consumer-owned event adapter launches one preset evaluator. Duration, delay and order define track offsets; the scrubber can inspect the same timeline without firing its trigger. This binding describes the authored study and does not verify the original project.

showSlider는 mode를 먼저 slider로 바꾸고 모든 grid 이미지의 Flip 상태를 캡처합니다. 현재 이미지 인덱스를 stagger의 시작점으로 사용합니다.

ImageTrail은 포인터와 이전 위치의 거리를 보고 다음 이미지를 선택합니다. imgPosition을 순환시키고 각 이미지의 타임라인으로 나타남·축소·사라짐을 관리합니다.

Overlay.show와 hide는 셀 tween의 onComplete에서 Promise를 resolve합니다. 화면 교체가 이 Promise를 기다린다면 취소·제거 때도 완료 정책이 필요합니다.

메뉴 진입은 setTimeout으로 thumbgrid 노출을 지연하고 이탈은 그 타이머와 enterTL을 정리합니다. 상세 보기에서는 같은 썸네일 그리드를 Flip으로 이동합니다.

hideGrid는 contentItem의 Flip 상태를 잡은 뒤 gridItemOriginalTarget에 다시 붙입니다. 이미지의 정체성은 유지하지만 부모에 따른 스타일·초점·읽기 위치는 달라집니다.

texture-manager는 URL별 Texture를 캐시하고 아직 로드되지 않은 동일 URL의 요청에는 콜백 Set을 공유합니다. 무한 배치의 여러 복제본이 같은 자원을 기다립니다.

switchTexts는 현재 단어를 숨기고 다음 단어를 서로 다른 회전 기준점에서 들입니다. currentTextPos는 전체 완료 시 바뀌며 클래스는 각 부분 효과의 시점에 바뀝니다.

pointermove에서 글자 mesh를 맞히면 u_input_pos_press=1과 hit 좌표를 저장합니다. 이 핸들러의 miss 분기는 값을 지우지 않으며 pointerup에서 0으로 바꿉니다.

TypeTransition.in은 전체를 2.7배·-90도로 바꾸고 줄을 -200%까지 이동합니다. out은 따로 만든 타임라인으로 크기·회전과 줄 opacity를 복구합니다.

openContent는 선택 이미지를 Flip으로 옮기고 나머지 이미지·텍스트를 data-direction별로 내보냅니다. 등록된 클릭은 매번 openContent를 호출합니다.

SpreadGrid.expand는 진행 중 tl을 종료하고 이전·현재 확대 인덱스를 갱신합니다. 나머지 항목은 선택 항목과의 거리로 계산한 이동량만큼 비켜납니다.

horizontalLoop의 onPressInit은 현재 이동 tween을 끝내고 진행값을 보존해 drag proxy를 재정렬합니다. snap은 재정렬 직후 이동이 10px 미만이면 lastSnap과 initChangeX를 사용해 급격한 새 속도 영향을 줄입니다.

handleClick은 먼저 다음 색을 u_color2에 쓰고 play가 참일 때 animate를 시작합니다. play=false는 시작 전이 아니라 onUpdate에서 설정하고 완료 시 현재 색·진행값·잠금을 갱신합니다.

StackMotionEffect.scroll은 콘텐츠의 초기 3D 변환과 opacity를 설정하고 이전 tl을 kill합니다. 이미지 z 시작·끝은 화면 폭과 이미지 인덱스에서 계산합니다.

목록의 스크롤 효과는 imageInner를 세로 2.4배·가로 1.2배로 늘리며 opacity를 0으로 만듭니다. 같은 항목을 별도 버튼으로 격자 보기로 전환합니다.

EmergingImage는 IntersectionObserver의 isIntersecting으로 uProgress를 0↔1로 바꿉니다. observer 생성 effect에는 disconnect 반환이 없고 텍스처 요청에도 실패·늦은 결과 처리 경로가 보이지 않습니다.

flipImage는 isFullscreen으로 이미지의 새 부모를 선택하고 Flip 완료 시 boolean을 반전합니다. 주변 항목은 클릭 항목과 사각형 위치 관계로 방향 클래스를 받습니다.

FiberScene의 ImageTube는 현재 스크롤을 목표 쪽으로 보간합니다. loopHeight의 절반을 넘으면 현재값과 목표값 둘 다 한 주기 옮겨 보간 차이를 유지하고 행별 속도로 튜브를 회전합니다.

ImageHover는 복제본에 같은 속성을 적용하되 첫 복제본의 목표는 1, 나머지는 0으로 정합니다. mouseEnter는 play, mouseLeave는 reverse로 같은 타임라인을 제어합니다.

첫 Slideshow는 슬라이드를 방향×100% 이동시키고 내부 이미지는 반대쪽 30% 시차를 줍니다. 다음 슬라이드 클래스는 시작에, 이전 클래스 제거는 완료에 수행합니다.

openWorks는 items의 Flip 상태를 캡처하고 onStart에서 grid 전체를 works section으로 옮깁니다. body의 preview-open과 works--open도 그 시점에 켭니다.

첫 변형은 preview 이미지 xPercent=100과 wrapper=-102를 준비한 뒤 둘을 0으로 이동합니다. 본문 가림막·텍스트·설명도 따로 시작값을 받습니다.

triggerGommage는 6초 진행률과 먼지·꽃잎 생성 tween을 시작하고 버튼을 비활성화합니다. 완료 때 생성 tween을 종료한 뒤 1초 delayedCall로 버튼을 다시 켭니다.

공식 CSS 문서와 CSSPlugin 입력을 근거로 새 글 상자를 만들었습니다. changeOpen은 이전 높이 트윈을 정리하고 height:auto 또는 0으로 향하며 세대 번호가 일치하는 열기 완료에만 auto를 복원합니다. 글 변경과 폭 변경은 최신 요청의 끝 상태로 정착합니다. 정적 보기와 JavaScript 실행 전에는 전체 내용을 읽을 수 있으며 처음 열림은 독립 예제의 표시 선택입니다.

버튼은 이전 animation을 revert한 뒤 split.chars·words·lines 중 하나를 움직입니다. setup은 이전 split과 animation을 되돌리고 현재 줄바꿈에서 다시 분해하며 resize에도 실행됩니다. 세 효과를 동시에 겹치는 구조가 아닙니다.

문서의 pause·resume·reverse·seek·progress·timeScale·kill을 각각의 버튼에 연결했습니다. 동반 예제는 처음에 paused 트윈을 만들고 kill 후에는 같은 제어 명령을 막으며 새로 만들기로 다시 생성합니다. 문서의 여러 호출을 동시에 실행해 마지막 결과만 보여 주는 방식은 아닙니다.

하나의 timeline에 1초, 2초, 2초 트윈을 이어 붙이고 repeat:-1, yoyo:true를 지정합니다. yoyo는 표현 시간의 역재생이며 업무 상태를 되돌리는 동작이 아닙니다. 상자 크기와 색은 누락 공통 CSS를 대신하는 호스트 스타일입니다.

moveCard는 마지막 항목을 숨기고 같은 src의 새 img를 첫 자리에 넣습니다. Flip의 onLeave 완료 콜백이 이전 항목을 제거합니다. 반복 입력을 잠그는 상태는 없으므로 빠른 클릭에서 노드 수와 제거 대상이 유지되는지는 별도 검증 대상입니다.

다섯 group의 트윈은 0.1, 1.3, 2.6, 3.8, 4.7초 등 명시된 위치에서 겹칩니다. 마스크의 circle·rect·path 속성도 같은 timeline에서 바뀌며 GSDevTools가 해당 tl을 제어합니다. 도형 이미지는 독립 제작 대체물이므로 원본 아트의 외형 비교 예제는 아닙니다.

createExplosion은 25개 dot과 타임라인을 한 번 만듭니다. explode는 발생기 중심을 다시 읽고 같은 타임라인을 play(0)으로 재시작합니다. 연속 클릭이 입자를 계속 추가하는 구조는 아니며 드래그 관성은 별도의 Draggable 설정입니다.

xTo와 yTo는 각각 duration:0.6, ease:power3인 quickTo 함수입니다. mousemove마다 그 함수에 새 좌표를 넣으며 xPercent·yPercent:-50으로 도형 중심을 포인터에 맞춥니다. 프리뷰는 첫 도형이 잘리지 않도록 시작 좌표만 중앙으로 둡니다. 원본 입력은 mousemove라서 터치 추종을 구현했다고 말할 수 없습니다.

네 quickTo가 바깥 rotationX·rotationY와 안쪽 x·y를 각각 소유합니다. 화면 비율을 회전 ±15도와 내부 이동 ±30으로 보간하고 pointerleave에서는 네 목표를 0으로 되돌립니다. 좌표 기준은 카드 경계가 아니라 프리뷰의 전체 window 크기입니다.

firstEnter일 때 quickTo의 시작 값과 목표 값을 모두 현재 좌표로 넣어 다른 행의 이전 위치에서 날아오는 것을 피합니다. 행의 fade가 역재생을 끝내면 document의 mousemove 리스너를 제거합니다. 원본 이미지 대신 행마다 다른 기하 포스터가 표시됩니다.

MorphSVG는 시작 경로에서 중간의 볼록한 start를 거쳐 평평한 end로 갑니다. body 클릭은 새 타임라인을 만들지 않고 reversed 값을 뒤집습니다. 프리뷰는 그 타임라인을 중간에 정지해 두고 첫 클릭에서 재개합니다. 전체 화면 클릭 표현이며 키보드로 활성화할 제어는 원본에 없습니다.

horizontalLoop는 세 항목의 폭과 xPercent를 계산해 끊김 없는 반복 타임라인을 만듭니다. Observer.onChangeY는 부호에 따라 timeScale을 ±6.25로 빠르게 바꾼 뒤 ±1로 감속시키고 overwrite:true로 이전 속도 트윈을 대체합니다. 폭을 다시 측정하는 resize 리스너는 원본에 없습니다.

showAnim은 위로 숨긴 상태에서 현재 위치까지 오는 paused 트윈이며 progress(1)로 처음에는 헤더를 보입니다. ScrollTrigger onUpdate의 direction이 -1이면 play, 그 외에는 reverse합니다. 메뉴 링크나 초점 정책이 있는 실제 탐색 헤더는 아닙니다.

toggle은 두 path의 각 열 점을 난수 지연으로 움직이고 render는 그 숫자 배열을 cubic path 문자열로 다시 만듭니다. MorphSVG 플러그인을 사용하는 구현이 아닙니다. 클릭은 tl.isActive가 거짓일 때만 isOpened를 바꾸므로 전환 도중의 명령은 누적되지 않습니다. 프리뷰의 최초 중간 정지는 수락한 첫 클릭에서 해제됩니다.

er 함수는 체크박스에 따라 easeReverse를 정하고, 마우스 퇴장에서는 timeScale을 exitTs로 바꿔 같은 타임라인을 reverse합니다. 체크박스를 바꾸면 세 효과를 kill하고 초기 상태로 재구성하므로 열려 있던 드롭다운도 닫힙니다.

isAnimating이 true이면 두 버튼의 핸들러가 반환합니다. updateCaterpillar는 방향에 따라 첫 카드 또는 마지막 카드의 복제본을 넣고 이전 카드를 숨깁니다. onLeave의 완료가 이전 노드를 제거하고 입력 잠금을 풉니다. 버튼을 disabled로 표시하는 처리는 없습니다.

각 구간의 onToggle이 setSection을 호출해 이전 섹션을 0.8배·투명으로, 새 섹션을 1배·불투명으로 바꿉니다. defaults.overwrite:auto와 currentSection이 최신 대상으로 전환을 이어갑니다. 구간 진입 후 0.3초 동안 움직이는 효과이며 스크롤 거리에 직접 연결된 scrub은 아닙니다.

한 타임라인은 등장→open 정지점→아래쪽 퇴장으로 구성됩니다. 등장 중 닫기는 reverse, 열린 뒤 닫기는 정지점을 넘어 play합니다. 별도 퇴장 중 열기는 desiredOpen에 남겨 완료 뒤 한 번 다시 엽니다. 출입 타이밍·방향·처음 열린 상태는 독립 예제의 선택이며 원본 장면을 관찰한 주장이 아닙니다.

x·y의 자석 이동과 rotation의 무한 wiggle은 같은 btn을 대상으로 합니다. overwrite:true는 회전까지 제거하고 auto는 충돌하는 이동 속성만 대체합니다. false 영역은 1.5초 이동과 0.5초 복귀가 중첩되어 오래된 이동이 남는 비교입니다. 모달 문자열에는 복귀 0.15초 예시도 있어 실행 패널의 0.5초와 구분해야 합니다.

공식 문서는 #circle을 #lightning으로 1초 동안 모핑합니다. 두 경로와 버튼은 독립 제작했으며 버튼은 시작 d를 복원한 뒤 해당 호출을 실행합니다. 따라서 중간 클릭은 같은 상태에서 되돌리기가 아니라 처음부터 다시 시연하기입니다.

gsap.matchMedia의 isSmall·isLarge에 따라 반대 상자를 숨기고 해당 이미지에 서로 반대 방향의 무한 회전을 지정합니다. 폭은 iframe의 window 기준이며 바깥 브라우저 폭과 같다고 가정할 수 없습니다. reduced-motion 조건은 이 두 분기에 없습니다.

SplitText의 autoSplit:true와 mask:"lines"가 현재 폭의 줄 구조를 만듭니다. onSplit은 instance.lines를 대상으로 만든 ScrollTrigger 트윈을 반환하여 재분해 수명과 연결합니다. 시작·끝은 clamp(top center)와 clamp(bottom center)이며 세 container가 각자의 구간을 가집니다.

완료 콜백은 mySplitText.revert를 호출하고 aria-hidden을 제거합니다. 원본은 text.isSplit을 검사하며 최초 chars 배열을 다시 사용하지만, 확보한 SplitText 3.15.0에서는 isSplit과 재생성된 chars가 SplitText 인스턴스에 있습니다. 프리뷰 어댑터가 두 참조를 mySplitText로 바꾸며 원본 패널은 보존합니다.

autoSplit과 mask:"lines"가 만든 각 줄은 yPercent:100·opacity:0에서 나타납니다. onSplit은 새 트윈을 split 변수에 넣고 반환합니다. 버튼은 그 현재 트윈을 timeScale(0.2).play(0)으로 재생하므로 느린 재생은 새 문장 생성이나 일시 정지 해제가 아니라 진행 위치의 재설정입니다.

curIndex는 클릭할 때 바로 다음 값으로 순환합니다. ScrambleText는 0.2초 후 글자를 드러내고 4.2초 동안 진행하며 overwrite:auto로 이전 트윈을 대체합니다. 세 번째 문구에는 newClass:border를 더합니다. 이 글자 효과는 작업 완료나 서버 상태를 나타내지 않습니다.

routeTimeline은 한 번만 만들고 buildRoute가 pause().clear()로 자식을 지웁니다. 등장은 명시한 출발값의 fromTo, 퇴장은 현재 값의 to로 다시 구성합니다. reset은 타이머와 완료 콜백을 제거하고 패널·라벨·아이콘 값을 따로 복원합니다. 등장 중 닫기는 현재 값에서 퇴장하지만 퇴장 중 열기는 정한 출발값으로 되돌아가는 정책입니다.

한 트윈을 유지하며 reversed 값을 반대로 바꾼 뒤 resume합니다. 진행 슬라이더는 방향을 바꾸지 않고 현재 위치에서 정지합니다. reset은 진행 0·정지·역방향 플래그로 시작하여 첫 방향 바꾸기가 끝 쪽으로 움직이게 합니다. 정적 모드는 같은 방향 입력의 끝점으로 즉시 이동합니다.

행의 이동·투명도는 isOpen에서 결정되고 펼칠 때만 index × 75ms 지연을 줍니다. 닫을 때 지연은 0ms이고 전환 클래스는 500ms입니다. 별도 타이머나 완료 콜백은 없으며 이 숫자는 작성자 설정값입니다. 실제 부드러움이나 모션 감소 동작을 증명하는 값은 아닙니다.

effect의 의존성은 position과 size이므로 위치가 바뀌면 세 마우스 리스너와 프레임 예약을 정리하고 다시 설정합니다. cleanup은 cancelAnimationFrame을 호출합니다. 한편 animate는 원이 보이지 않거나 목표에 도착한 경우에도 다음 프레임을 예약하며 별도 정지 조건이 없습니다.

포인터 위치는 카드 중심에서의 거리로 계산하고 ±50 범위를 ±8도 회전에 매핑한 뒤 spring을 적용합니다. mouseleave는 두 위치 값을 0으로 돌리고 isHovered만 끕니다. isExpanded는 유지되며 카드 크기, 도로, 좌표 문단은 별도의 펼침 애니메이션을 사용합니다.

CheckboxGroup은 선택 인덱스를 정렬한 뒤 연속된 번호를 한 구간으로 묶습니다. 초기 [0,2]는 두 구간이고 1을 선택하면 [0..2]가 됩니다. useMergeSplitBlocks는 한 행 간격의 두 구간이 합쳐질 때 그 행의 중간점을 기준으로 두 배경 조각을 움직입니다. 이 배경은 aria-hidden이며 체크 상태 자체를 소유하지 않습니다.

가운데 행을 해제하면 하나의 선택 구간이 둘로 나뉩니다. useMergeSplitBlocks는 각 전환에 tid를 주고 최신 구간에서 유효하지 않은 경계의 timeout을 취소합니다. timeout은 배경 경계 상태만 마무리하며 checked Set을 쓰지 않습니다. 언마운트 때는 남은 타이머를 모두 정리합니다. 같은 효과에 명시적인 움직임 감소 분기는 없습니다.

다시 누를 때 기존 타이머를 지우고 같은 목표 단어를 새로 맞춥니다. 숨김이나 움직임 정지는 등록된 완료 함수를 통해 최종 단어를 표시합니다. 변하는 글자가 버튼 이름에도 사용되는 점은 별도 발화 확인이 필요합니다.

버튼을 누르면 눌림 상태와 두 면의 숨김 상태를 즉시 바꾸고 CSS가 회전을 따라갑니다. 빠르게 다시 누르면 최신 상태로 회전이 바뀌며 완료 타이머가 면을 결정하지 않습니다. 초기 뒷면의 접근성 숨김은 스크립트가 설정합니다.

현재 모의 완료 함수는 화면 밖 이동이나 움직임 정지에도 호출되므로 700밀리초 전에 완료 문구가 나올 수 있습니다. 실제 전송 기능에 이 코드를 옮기면 서버 결과와 시각 정리를 분리해야 합니다.