Design Atlas◎Interaction
Magnetic buttons, cursor trails, drag — patterns that respond to the user’s touch. — 21 entries
Magnetic Button마그네틱 버튼
A button that gets pulled toward the cursor as it approaches, like a magnet — it feels responsive before you even click.
Custom Cursor커스텀 커서
Hides the system cursor and replaces it with a shape of your own — a ring, a dot — that itself reacts to interactive elements underneath.
Cursor Trail커서 트레일
A chain of dots that trails behind the cursor, each one lagging slightly — every dot chases the one in front of it.
Tilt Card틸트 카드
A card that tilts in 3D toward the cursor, as if you were holding it — built with CSS perspective and rotateX/rotateY.
Spotlight Hover스포트라이트 호버
A circle of light follows the cursor across a dark surface, like a torch — only the area under it is revealed.
Drag and Drop드래그 앤 드롭
The most basic "pick it up, move it" interaction. Implemented with pointer events, it behaves the same across browsers.
Swipe to Dismiss스와이프로 닫기
Swipe a card or list item sideways to remove it — past a threshold it flies off screen, short of it it springs back.
Pull to Refresh당겨서 새로고침
The standard mobile pattern: pull down from the top of a list to reveal a spinner, release to trigger a refresh.
Long Press롱 프레스
Press and hold past a threshold to surface an extra menu or action — deliberately distinct from a quick tap.
Hover Reveal호버 리빌
Content stays hidden until you hover — then extra info or actions slide or fade in. Keeps the surface clean while still holding detail underneath.
Ripple Effect리플 이펙트
A circle expands outward from the click point and fades away — Material Design's signature "you pressed here" feedback.
Scroll Snap스크롤 스냅
Release a scroll and the nearest item snaps precisely into place — a CSS-only way to build galleries and carousels.
Scrollytelling스크롤리텔링
A story that unfolds step by step as you scroll — scrolling itself becomes the page-turn.
Hold to Confirm홀드 투 컨펌
A safety net for irreversible actions like delete or pay — the button only fires once you've held it long enough to fill.
Drag to Reorder드래그로 순서 바꾸기
Drag a list item up or down to reorder it — the other items slide out of the way with an animated transition.
Double-Tap to Like더블탭 좋아요
Tap a photo twice quickly and a heart bursts open while it gets liked — the gesture Instagram made ubiquitous.
Confetti컨페티
Colored bits of confetti burst outward and fall under gravity — the classic payoff for payment success or goal-achieved screens.
Text Scramble텍스트 스크램블
Characters flicker through random glyphs before "decoding" into the final word — the hacker-movie terminal look.
Button Loading State버튼 로딩 상태
Click a button and its label swaps for a spinner; once the request finishes, a checkmark confirms success before it settles back.
Rubber Band러버밴드
Drag past a boundary and it resists more the further you pull, then springs back with a bounce on release — the iOS overscroll feel.
Pinch to Zoom핀치 줌
Spread or pinch two fingers to zoom an image — implemented by tracking the distance between two active pointers with Pointer Events.