레이아웃
무한 마키
그대로 보십시오. 글 줄이 끊김 없이 흐릅니다. 마우스를 올리면 멈춥니다.
PLAY. EXPLORE. CREATE.
움직임을 보고,
다음 장면을 만드세요.
대문부터 작은 상호작용까지.
직접 움직여 보고 고르는 모션 아카이브.
2026.10.30 / 이번 작업
새로 만든 것은 여기 모았습니다.
선 그리기·사진 전환·상품 선택 등 위젯 34개와 대문 12개입니다.
최근 남은 후보에서 만든 33개와 먼저 만든 13개를 구분해 볼 수 있습니다.
빛을 반사하고, 커서에 반응하는 형태.화면 안에서 움직여 보세요 ↗
THE COLLECTION
모션 라이브러리 121
NO.이름 / 체험 방법예제 → 레퍼런스
스크롤
쌓이는 카드
천천히 아래로 스크롤해 보십시오. 카드가 위로 하나씩 쌓입니다.
스크롤
스크롤 진행 바
이 구역에서 스크롤하며 화면 맨 위 상단바 밑의 주황 막대를 보십시오. 읽은 만큼 찹니다.
마우스 · 버튼
사진 호버 확대
마우스를 사진 위에 올려 보십시오. 사진이 칸 안에서 커집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
글자 · 등장
사진 마스크 펼침
«다시 보기» 를 누르십시오. 사진이 가운데서 펼쳐지며 나타납니다.
스크롤
상단바 줄어들기 · 내리면 숨기
이 구역에서 아래로 조금 내렸다가 위로 올려 보십시오. 상단바가 줄고 숨었다가 다시 나옵니다.
레이아웃
페이지 넘김
버튼을 눌러 다른 화면에 갔다가 «돌아가기» 를 누르십시오. 화면이 부드럽게 녹아 바뀝니다.
마우스 · 버튼
링크 밑줄 그어지기
아래 글 속 링크에 마우스를 올려 보십시오. 밑줄이 왼쪽부터 그어집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
롤링 글자 버튼
버튼에 마우스를 올려 보십시오. 글자가 위로 굴러 바뀝니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
섹션 색 전환
천천히 아래로 스크롤해 보십시오. 아래 두 구역이 화면 가운데에 오면 화면 바탕색이 바뀝니다.
스크롤
바닥글 드러남
버튼을 누른 뒤 조금 더 내려 보십시오. 본문이 위로 걷히며 뒤에 고정된 바닥글이 드러납니다.
마우스 · 버튼
카드 커서 조명
마우스를 카드 위에서 움직여 보십시오. 커서 자리에 빛이 따라옵니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
카드 3D 기울기
마우스를 카드 위에서 움직여 보십시오. 카드가 커서 쪽으로 기웁니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
벤토 그리드 호버
마우스를 칸 위에 올려 보십시오. 올린 칸이 살짝 커지고 나머지는 옅어집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
글자 · 등장
격자 차례 등장 방향
«다시 보기» 를 누르십시오. 가운데 카드부터 바깥으로 차례로 나타납니다.
스크롤
날아들고 빠지는 목록
천천히 위아래로 스크롤해 보십시오. 카드가 들어올 때 옆에서 날아들고, 위로 빠질 때 날아 나갑니다.
글자 · 등장
텍스트 스크램블
«다시 보기» 를 누르십시오. 무작위 글자가 제 글자로 풀립니다.
글자 · 등장
타자기
그대로 보십시오. 강조 문구가 한 글자씩 쳐지고 지워지며 바뀝니다.
레이아웃
노이즈 · 그레인 질감
이 판의 바탕을 보십시오. 고운 입자 질감이 깔려 있습니다.
레이아웃
움직이는 메시 배경
이 판의 바탕을 잠시 보십시오. 빛 덩어리가 아주 천천히 떠다닙니다.
마우스 · 버튼
보더 빔
그대로 보십시오. 칸 테두리를 따라 빛이 돕니다.
마우스 · 버튼
원뿔 그라디언트 포인터
마우스를 카드 근처에서 움직여 보십시오. 커서 쪽 테두리가 빛납니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
카드 뒤집기
카드 아래 «뒤집기» 버튼을 눌러 보십시오. 카드가 뒤집혀 뒷면 설명이 보입니다.
레이아웃
스크롤 그림자
아래 표를 옆으로 밀어 보십시오. 더 볼 것이 남은 쪽 끝에 그림자가 생깁니다.
레이아웃
CSS 캐러셀 점 · 버튼
아래 화살표나 점을 누르거나 가로로 넘겨 보십시오. 예시 카드가 이동합니다.
레이아웃
스켈레톤 반짝임
그대로 보십시오. 회색 뼈대 위로 빛이 지나갑니다(목록을 불러오는 동안의 모습).
마우스 · 버튼
누름 리플
버튼을 눌러 보십시오. 누른 자리에서 물결이 퍼집니다.
글자 · 등장
물결 글자
«다시 보기» 를 누르십시오. 글자가 한 번 출렁이며 나타납니다.
스크롤
스크롤 따라 글 채우기
천천히 아래로 스크롤해 보십시오. 단어가 하나씩 진해지며 문장이 채워집니다.
스크롤
숫자 롤링(오도미터)
«다시 보기» 를 누르십시오. 자리마다 숫자가 굴러 멈춥니다.
스크롤
선 그리기(연혁 · 과정)
천천히 아래로 스크롤해 보십시오. 세로 선이 그어지며 점이 차례로 켜집니다.
스크롤
핀 고정 가로 스크롤
천천히 아래로 스크롤해 보십시오. 화면이 멈춘 채 카드가 가로로 흘러갑니다.
스크롤
스크롤 연동 확대 대문
천천히 아래로 스크롤해 보십시오. 사진이 커지며 화면을 채웁니다.
레이아웃
카드가 커져 상세로
사진 카드를 누르고 목록으로 돌아와 보십시오. 같은 사진이 커지며 다음 화면으로 이어집니다.
레이아웃
풀스크린 메뉴 오버레이
상단바 오른쪽 ☰ 버튼을 눌러 보십시오. 메뉴가 화면 전체를 덮으며 열립니다(Esc 로 닫힘). 상단바가 숨어 있으면 위로 조금 올리면 나옵니다.
레이아웃
화면 커튼 전환
버튼 셋 중 하나를 눌러 보십시오. 그 커튼으로 다음 화면이 들어옵니다.
마우스 · 버튼
마그네틱 버튼
커서를 버튼 가까이 천천히 가져가 보십시오. 버튼이 커서 쪽으로 살짝 끌려옵니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
스크롤 속도 반응 마키
빠르게 스크롤했다가 멈춰 보십시오. 흐르는 줄이 빨라졌다가 다시 가라앉습니다.
레이아웃
3D 회전 캐러셀
아래 화살표를 누르거나 카드를 옆으로 끌어 보십시오. 원통처럼 돕니다.
레이아웃
넘기는 카드 묶음
«다음» 을 누르거나 맨 위 카드를 옆으로 끌어 보십시오. 카드가 넘어가 맨 뒤로 갑니다.
글자 · 등장
곡선 따라 흐르는 글
그대로 보십시오. 오른쪽 원을 따라 글이 돕니다.
레이아웃
아이콘 모프
상단바 ☰ 버튼을 눌러 보십시오. 세 줄이 ✕ 로 바뀌고, 닫으면 돌아옵니다. 상단바가 숨어 있으면 위로 조금 올리면 나옵니다.
글자 · 등장
흩어졌다 모이는 글자
«다시 보기» 를 누르십시오. 흩어진 글자가 제자리로 모입니다.
스크롤
역방향 스크롤 기둥
넓은 화면에서 천천히 스크롤해 보십시오. 가운데 기둥만 반대 방향으로 흐릅니다(좁은 화면에서는 멈춘 격자).
글자 · 등장
굵기 변하는 글자
MOTION 글자 가까이 마우스를 움직여 보십시오. 가까운 글자부터 굵어집니다. 터치에서는 제목이 그대로 보입니다.
마우스 · 버튼
커서 추종 · 호버 미리보기
목록의 글 위에서 마우스를 움직여 보십시오. 예시 그림이 커서 옆에서 따라옵니다. 터치에서는 목록을 누를 수 있습니다.
마우스 · 버튼
이미지 트레일
대문 위에서 마우스를 크게 움직여 보십시오. 지나간 자리에 사진이 차례로 남았다 사라집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
리퀴드 버튼 호버
버튼에 마우스를 올렸다가 빼 보십시오. 들어온 쪽에서 색이 번지고 나간 쪽으로 빠집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
영상 스크럽
천천히 아래로 스크롤해 보십시오. 화면이 선 채 내린 만큼 영상이 앞으로 재생되고, 올리면 되감깁니다.
스크롤
스크롤 따라 다시 늘어서는 사진
넓은 화면에서 천천히 아래로 스크롤해 보십시오. 흩어진 사진이 한 줄로 모였다가 격자로 늘어섭니다(900px 이하는 처음부터 격자).
스크롤
구역을 넘나드는 사진
넓은 화면에서 천천히 아래로 스크롤해 보십시오. 사진 한 장이 아래 구역들로 옮겨 가며 오른쪽 → 왼쪽 → 위 → 뒤로 자리와 크기를 바꿉니다(900px 이하는 제 자리에 선 사진).
그래픽 · 3D
사진 셰이더 일렁임
사진 위에서 커서를 움직여 보십시오. 커서 주위로 물결이 번집니다.
그래픽 · 3D
커서 따라 번지는 잉크
화면 위에서 커서를 크게 움직여 보십시오. 색이 번지고 소용돌이칩니다.
그래픽 · 3D
입자 흐름
잠시 보거나 커서를 움직여 보십시오. 입자가 흐르며 커서를 피해 갈라집니다.
그래픽 · 3D
셰이더 슬라이드 전환
다음 화살표를 누르십시오. 사진이 일렁이며 다른 장면으로 바뀝니다.
그래픽 · 3D
깊이 갤러리
천천히 스크롤해 보십시오. 사진 사이를 앞으로 지나갑니다.
그래픽 · 3D
구겨진 종이 펴짐
다시 보기를 누르십시오. 접힌 그림이 펼쳐집니다.
그래픽 · 3D
구 · 나선 3D 갤러리
구를 옆으로 끌거나 방향키를 눌러 보십시오. 정지 버튼으로 회전을 멈춥니다.
그래픽 · 3D
무한 끌기 사진 판
사진 판을 잡고 옆으로 밀어 보십시오. 놓아도 잠시 흐르다가 멈춥니다.
그래픽 · 3D
줄에 매달린 명찰
카드를 잡아 옆으로 움직였다 놓아 보십시오. 줄 끝에서 흔들리며 멈춥니다.
그래픽 · 3D
떨어지는 태그 더미
태그를 잡아 던지거나 다시 떨어뜨리기를 눌러 보십시오.
그래픽 · 3D
회전 지구본
지구본을 끌어 돌려 보십시오. 아래 목록은 예시 도시입니다. 지형은 시각화용 간략 윤곽입니다.
대문
거대 글자 키네틱
커서를 움직이고 아래로 스크롤해 보십시오. 큰 글자가 기울고 흩어집니다.
대문
글자 속 영상
스크롤을 내리십시오. 글자에 비치는 영상이 커지며 화면으로 펼쳐집니다.
대문
커서로 드러내기
커서를 움직이거나 사진 전체 보기를 누르십시오. 덮개 뒤의 그림이 드러납니다.
대문
겹 깊이 시차
커서를 좌우로 움직여 보십시오. 여러 장의 그림이 서로 다른 깊이로 움직입니다.
대문
첫 장면 연출
다시 보기를 누르십시오. 장막과 그림, 제목이 순서대로 나타납니다.
대문
카드 셔플 쌓기
카드가 바뀌는 모습을 보거나 다음 버튼을 누르십시오.
대문
3D 오브젝트
커서를 움직여 보십시오. 빛을 반사하는 형체가 회전합니다. 오른쪽 아래에서 멈출 수 있습니다.
대문
오로라 광원
빛이 흐르는 모습을 보십시오. 정지 버튼으로 움직임을 멈춥니다.
대문
타이포 그래픽 폭발
커서를 제목 위로 움직여 보십시오. 글자 조각이 흩어졌다 다시 모입니다.
레이아웃
사진 잡지
큰 사진 한 장과 작은 이야기 두 개를 배치합니다. 스크롤하면 차례로 나타납니다.
레이아웃
아치 사진
아치 형태와 서로 다른 사진 높이로 여백에 리듬을 더합니다.
레이아웃
펼치는 사진 목록
제목을 눌러 사진과 이야기를 펼쳐 보십시오. 여러 항목을 함께 열 수 있습니다.
데이터
막대 비교
같은 단위의 값을 막대 길이로 비교합니다. 아래 수치는 동작을 보여 주는 예시입니다.
업종별 구성 10.30 추가
분류 탐색
분류를 고르고 검색한 뒤 격자·목록으로 바꿔 보세요.
업종별 구성 10.30 추가
메뉴 가격표
메뉴 사진·가격·설명을 함께 읽습니다.
업종별 구성 10.30 추가
시간별 일과
시간을 따라 활동을 읽어 보세요.
업종별 구성 10.30 추가
담당자 소개
사진·역할·소개를 한 카드로 봅니다.
업종별 구성 10.30 추가
종이 사진
사진 여백과 배열을 살펴보세요. 휴대폰에서는 곧게 정리됩니다.
데이터 10.30 추가
추이 선
표의 항목을 눌러 해당 지점을 강조합니다.
데이터 10.30 추가
추이 면
선 아래의 면과 원본 값을 함께 봅니다.
데이터 10.30 추가
작은 추이
작은 차트에도 기준축과 값이 남아 있습니다.
데이터 10.30 추가
구성 비율
원본 수량과 전체 대비 비율을 읽습니다.
데이터 10.30 추가
목표 비율
0~100% 값을 같은 기준으로 비교합니다.
데이터 10.30 추가
강도 격자
색의 진하기와 표의 숫자를 함께 확인합니다.
데이터 10.30 추가
단계별 수량
줄어드는 수량을 같은 축척으로 비교합니다.
데이터 10.30 추가
항목별 균형
항목별 0~100% 값을 표와 함께 봅니다.
스크롤 10.30 추가
스크롤 연동 이야기
스크롤하거나 제목을 눌러 설명과 사진이 이어지는 모습을 확인하세요.
마우스 · 버튼 10.30 추가
탄성 선택 버튼
항목을 선택하면 버튼이 부드럽게 반응하고 아래에 설명이 표시됩니다.
마우스 · 버튼 10.30 추가
끌어 넘기는 사진
사진을 좌우로 끌거나 화살표·방향키로 넘겨 보세요.
업종별 구성 10.30 추가
선을 그리는 과정
곡선과 윤곽이 차례로 그려집니다. 다시 재생할 수 있습니다.
업종별 구성 10.30 추가
모양이 바뀌는 사진
모양 바꾸기를 누르면 사진 뒤 윤곽과 사진 프레임이 변합니다.
마우스 · 버튼 10.30 추가
크레용 그림판
색을 고르고 직접 그려 보세요. 한 획 되돌리기·지우기·키보드 그리기를 제공합니다.
스크롤 10.30 추가
고정 구역 이야기
스크롤하면 앞 사진이 작아지고 다음 사진이 겹쳐 올라옵니다.
스크롤 10.30 추가
엇갈리는 사진 기둥
넓은 화면에서 사진 기둥이 서로 다른 방향으로 흐릅니다. 휴대폰에서는 격자입니다.
마우스 · 버튼 10.30 추가
선택을 강조하는 사진 격자
사진에 포인터를 올리거나 선택 버튼에 초점을 두면 해당 사진이 강조됩니다.
마우스 · 버튼 10.30 추가
모양 프레임 사진 전환
수동 넘김 또는 자동 넘김으로 서로 다른 모양의 사진을 비교하세요.
업종별 구성 10.30 추가
끌어 넘기는 사진·설명
사진을 끌거나 화살표로 넘기고, 전체 보기와 집중 보기를 전환하세요.
마우스 · 버튼 10.30 추가
가까이 반응하는 버튼
마우스를 가까이 가져가면 버튼이 살짝 따라옵니다. 터치와 키보드로도 선택할 수 있습니다.
스크롤 10.30 추가
문장 속 사진 펼침
문장 사이 사진을 누르면 크게 펼쳐지고 설명이 나타납니다. 닫으면 원래 자리로 돌아갑니다.
마우스 · 버튼 10.30 추가
쌓인 사진 넘기기
앞 카드를 끌거나 다음 버튼을 눌러 사진 묶음을 넘기세요.
스크롤 10.30 추가
교차 사진 이야기
사진과 설명을 번갈아 읽으며 진행선을 따라 내려가 보세요.
업종별 구성 10.30 추가
물결 반응 사진 격자
사진 위에서 포인터를 움직이면 사진이 물결처럼 반응합니다. 터치 화면은 정지 사진을 유지합니다.
데이터 10.30 추가
항목별 막대 비교
같은 단위의 예시 수치를 길이로 비교합니다.
업종별 구성 10.30 추가
서비스 선택과 상담 안내
서비스를 선택해 자세한 설명과 상담 링크를 확인하세요.
업종별 구성 10.30 추가
상품 선택과 상세 안내
상품을 선택하면 소재·가격·구매 안내가 나타납니다. 구매 링크를 실제 상품 화면에 연결할 수 있습니다.
업종별 구성 10.30 추가
방문 위치와 운영 안내
항목을 펼쳐 운영시간·찾아오는 방법·상담 안내를 확인하세요.
업종별 구성 10.30 추가
색상·문구·배치 미리보기
제목과 포인트색, 사진 배치를 바꿔 비교하고 원래대로 되돌려 보세요.
대문 10.30 추가
텍스트 순차 등장 대문
배경 전체의 사진·도형 연출 위로 제목의 단어가 차례로 나타납니다.
대문 10.30 추가
위아래로 교차하는 큰 글자 대문
줄마다 반대 방향에서 단어가 올라오고 내려옵니다. 잠시 읽힌 뒤 글자별로 흩어져 나가는 원본 splitText 연출입니다.
대문 10.30 추가
선을 그리는 대문
옅은 마르다 로고 위에 원래 두께의 굵은 획이 차례로 채워집니다.
대문 10.30 추가
사진이 커지는 대문
스크롤하면 활자 사이에서 사진이 열리고, 양옆 글자가 밀려나며 사진이 커집니다. 위로 올리면 다시 닫힙니다.
대문 10.30 추가
사진 전환형 대문
이전·다음 버튼이나 자동 넘김으로 사진을 바꿉니다. 모양 프레임도 달라집니다.
대문 10.30 추가
사진 카드가 겹치는 대문
사진이 가운데 겹쳐 등장한 뒤 각자의 격자 자리로 펼쳐집니다. 다시 재생해 처음과 끝을 비교하세요.
대문 10.30 추가
스크롤 사진 배치 대문
스크롤하면 가운데 겹친 사진들이 각자의 격자 자리로 펼쳐집니다. 좁은 화면에서는 정돈된 사진으로 보입니다.
대문 10.30 추가
입자가 흐르는 대문
작은 입자와 연결선이 천천히 움직이며 커서에 반응합니다. 정지할 수 있습니다.
대문 10.30 추가
부드러운 색 배경 대문
선택한 테마 색이 느리게 움직입니다. 본문은 단색 면 위에서 선명하게 읽힙니다.
대문 10.30 추가
단색·여백 중심 대문
이름과 핵심 약속, 다음 행동을 정돈된 여백 안에 보여줍니다.
대문 10.30 추가
사진·설명·상담 대문
핵심 문장·대표 사진·상담 버튼을 나란히 배치합니다.
대문 10.30 추가
핵심 수치를 곁들인 대문
단위와 기준이 있는 요약 지표를 대문 아래에 배치합니다.
찾는 모션이 없습니다. 다른 검색어나 분류를 골라보세요.
레퍼런스는 기법을 살펴보는 출처입니다. 예제는 마르다 웹엔진으로 구현했습니다.
일부 효과는 마우스나 지원 브라우저가 필요하며, 움직임 줄이기 설정을 따릅니다.