Slot
숫자가 위아래로 굴러가며 바뀝니다.
0
Text
숫자와 글자를 움직이는 모듈입니다.
카운터·오버플로우·분할·타이핑·글리치를 제공합니다.
Discount
지정한 시작값에서 목표값까지 증가하거나 감소합니다.
₩42,000
Plain
값이 0부터 목표값까지 자연스럽게 증가합니다.
0
Digit
세로 이동 없이 0–9 숫자만 교체합니다.
0
Pop
완성된 숫자가 커진 상태에서 차례로 자리 잡습니다.
0
Split-flap
숫자가 전광판처럼 반으로 접히며 바뀝니다.
0
Clock
현재 시각을 초 단위로 표시합니다.
00:00:00
Countdown
지정한 시점까지 남은 시간을 계산합니다.
00:00:00
Loop
같은 문구를 끊김 없이 이어서 흘립니다.
IRIVER — Designer's Motion Collection 2026
Bounce
끝에 닿으면 반대 방향으로 되돌아갑니다.
01. 오래된 MP3 플레이어의 양방향 제목 스크롤
Rewind
끝에서 사라진 뒤 시작점으로 돌아와 다시 나타납니다.
02. 끝까지 이동한 다음 사라졌다 처음에서 다시 나타나는 제목
Once
한 번 이동한 뒤 마지막 위치에서 멈춥니다.
03. 한 번만 이동하고 마지막 글자에서 멈추기
Page Mask
문구를 페이지 단위로 나눠 마스크로 전환합니다.
04. LCD 화면 폭 단위로 끊어서 다음 구간을 마스크로 표시합니다
Page Flip
문구가 전광판처럼 위아래로 접히며 바뀝니다.
05. 화면 폭 단위로 끊어서 다음 구간을 플립으로 넘깁니다
Page Roll
첫 구간을 보여준 뒤 나머지를 세로로 전환합니다.
07. 왼쪽 구간 먼저, 이어서 뒷부분이 롤링으로 넘어가는 하이브리드
Noise Dissolve
글자가 흩어진 뒤 다음 문구로 다시 모입니다.
06. 글자가 흩어졌다 다음 페이지로 재조립되는 디졸브
Scene 전환 (아이템)
목록 항목을 페이드·디졸브·플립으로 전환합니다.
NEW Kineto 0.851개 인터랙션 모듈웹표준 · 접근성 준수쉽게 적용 · 쉽게 커스텀
Fade (크로스페이드)
앞 문구가 사라지며 다음 문구가 부드럽게 나타납니다.
08. 노이즈 없이 부드럽게 페이드로 다음 구간을 보여주는 전환
Scroll · Fade loop
끝까지 이동한 뒤 페이드하며 처음부터 반복합니다.
09. 끝까지 이동한 뒤 크로스페이드로 처음이 겹쳐 나타나며 끊김 없이 스크롤됩니다
Rolling Ticker
목록 항목을 세로로 순환합니다.
1 Kineto ▲22 Pixel Mosaic ▼13 Product Design —4 Motion QA NEW
Hover Roll
호버하면 라벨이 굴러 올라가고, 벗어나면 돌아옵니다.
Marquee
문구를 끊김 없이 흘리고 스크롤 방향에 반응합니다.
KINETO · PIXELATE · COUNTER · OVERFLOW · SCROLL ·
Text Split
글자를 나눠 순서대로 나타냅니다.
SPLIT MOTION
Text Split — Spin
글자가 3D로 회전하며 나타납니다.
SPIN AROUND
Text Swap
문장을 글자 단위로 나눠 순서대로 교체합니다.
Blur Text
흐린 글자가 차례로 선명해집니다.
KINETO BLUR IN
Shuffle
무작위 글자가 빠르게 원문으로 바뀝니다.
MOTION DECODED
Typewriter
커서 표시와 한글 조합 입력을 선택할 수 있습니다.
Text transition
슬라이드·블러·디졸브·시머로 문구를 전환합니다.
PIXEL
MOTION
TOOLKIT
Decode
무작위 글자가 차례로 원문으로 확정됩니다.
SCROLL DOWN
Flicker
글자가 불규칙하게 깜빡이며 나타납니다.
SELECT YOUR PLATFORM
RGB Glitch
색상 분리와 가로 슬라이스가 간헐적으로 발생합니다.
SIGNAL
Pixel Shift
글자 조각을 픽셀 단위로 나눠 어긋나게 이동합니다.
PIXEL ERROR
Media
이미지와 영상을 다루는 모듈입니다.
로딩·뷰어·슬라이더·주변광·브러시 효과를 제공합니다.
Pixelate — auto
요소 크기에 맞춰 픽셀 해상도를 단계적으로 높입니다.
Pixelate — custom steps
픽셀 블록 크기와 단계별 시간을 직접 지정합니다.
Progressive Print
블러와 노이즈가 위에서 아래로 걷히며 선명해집니다.
Dissolve
노이즈와 블러가 고르게 사라지며 원본이 드러납니다.
Wave
물결 왜곡과 입자가 잦아들며 이미지를 드러냅니다.
Film Grain
필름 입자가 사라지며 원본 색과 질감을 복원합니다.
Skeleton placeholder
이미지 대신 시머 플레이스홀더를 먼저 표시합니다.
Skeleton — Pulse
밝기가 반복되는 펄스 플레이스홀더를 표시합니다.
Blur up
흐린 이미지가 서서히 선명해집니다.
Fade
이미지가 투명한 상태에서 부드럽게 나타납니다.
Glitch Reveal
어긋난 슬라이스와 점멸이 정리되며 이미지가 나타납니다.
Polaroid
과노출된 이미지에 색이 서서히 차오릅니다.
CRT Power-on
밝은 가로선이 열리고 주사선이 사라지며 화면이 켜집니다.
Scroll Video Reveal — lazy
화면에 가까워지면 영상을 불러와 자동 재생합니다.
Lightbox Viewer
그룹 이동·확대·미니맵을 지원하는 전체 화면 뷰어입니다.
Slider / Coverflow
가운데 항목과 양옆 미리보기를 입체적으로 배치합니다.
Slider — Dissolve
미세한 입자와 블러로 장면을 부드럽게 전환합니다.
GIF — Lazy + Ambient + Lightbox
세 모듈을 함께 써도 GIF 재생을 유지합니다.
Animated WebP — Ambient
재생 중인 WebP를 바탕으로 주변광을 만듭니다.
APNG — Lightbox
APNG를 불러와 그룹 뷰어로 엽니다.
Ambient Video
재생 중인 영상 프레임으로 주변광을 만듭니다.
Image Glitch — Ambient
색수차·슬라이스·주사선이 무작위로 발생합니다.
Datamosh — Pixel Blocks
픽셀 블록을 복제하고 이동해 압축 오류를 재현합니다.
CRT / VCR — Retro
주사선·롤바·비네트로 오래된 영상 질감을 만듭니다.
Brush Reveal
포인터가 지나간 부분에 두 번째 이미지를 드러냅니다.
Radial Carousel (원형 스와이퍼)
원형으로 배치한 항목을 드래그·버튼·키보드로 돌립니다.
Scroll
스크롤에 반응하는 모듈입니다.
진입·시차·고정·진행률·풀페이지 효과를 제공합니다.
Slide up
콘텐츠가 아래에서 올라오며 나타납니다.
CONTENT SLIDES UP
Wipe
지정한 방향으로 마스크가 열립니다.
CONTENT WIPES IN
Slide directions
상·하·좌·우 진입 방향을 선택할 수 있습니다.
LEFT / RIGHT / UP / DOWN
List Reveal — 순차 노출
목록을 지정한 순서와 간격으로 나타냅니다.
- 01Brand Strategy
- 02Motion System
- 03Design Tokens
- 04Interaction
- 05Handoff
Page Reveal
방향·색·조각을 조절하는 화면 진입 커버입니다.
Clock Wipe
원형 마스크가 시계 방향으로 열립니다.
CLOCK WIPE ACTIVATION
Parallax
레이어를 서로 다른 속도로 움직여 깊이를 만듭니다.
DEPTH
Class Hook
진입 시 지정한 CSS 클래스만 켜고 끕니다.
CUSTOM CSS CLASS
Cover Reveal — 이미지
색상 패널이 지정한 방향으로 걷히며 이미지를 드러냅니다.
Cover Reveal — 텍스트(줄 단위)
렌더링된 줄마다 커버를 나눠 순서대로 걷어냅니다.
각 줄이 색 커버 뒤에서 차례로 드러납니다
Cover Reveal — Staggered Gallery
팔레트의 색과 방향을 타일마다 다르게 적용합니다.
Scroll text fill
스크롤 진행률에 맞춰 글자색을 채웁니다.
SCROLL TO FILL EVERY LETTER
Direction responsive
스크롤 방향과 속도에 따라 이동량과 블러를 바꿉니다.
SCROLL DIRECTION →
Skew
스크롤 속도에 맞춰 기울였다가 복원합니다.
SKEW
Rotate
스크롤 방향에 맞춰 요소를 회전합니다.
ROTATE
Combo
이동·회전·크기 변화를 함께 적용합니다.
COMBO
Vertical sticky stack
카드를 위에 차례로 쌓습니다.
01. Problem
반복되는 작업과 정보 단절.
02. Structure
흐름을 자동화하고 인터랙션을 모듈화.
03. Result
재사용 가능한 Kineto.
Horizontal pinned scroll
세로 스크롤을 가로 이동으로 전환합니다.
Floating pinned sequence
고정 구간에서 콘텐츠가 차례로 떠오릅니다.
FLOAT
콘텐츠가 고정된 화면 안으로 등장합니다.
FOCUS
이전 항목은 뒤로 물러나며 흐려집니다.
FLOW
스크롤 진행률로 전체 시퀀스를 제어합니다.
CSS scroll property
CSS VARIABLE
ScrollTrigger 또는 CSS 애니메이션 타임라인에 연결합니다.
Scroll Shadows
스크롤할 내용이 남은 가장자리를 흐리게 페이드합니다.
디자인 시스템 정리
컴포넌트 문서화
모션 가이드 초안
접근성 체크리스트
아이콘 세트 교체
다크 모드 토큰
랜딩 리디자인
배포 파이프라인
QA 회귀 테스트
릴리스 노트
Sticky header
스크롤하면 헤더가 작아지고 그림자가 생깁니다.
디자인팀모션 스펙 공유드립니다
QA회귀 테스트 통과했어요
PM릴리스 일정 확인 부탁
개발팀빌드 초록불 확인
마케팅런칭 문구 초안
디자인팀아이콘 세트 v2
인프라CDN 캐시 설정
고객지원피드백 정리본
Cover → fixed header
큰 커버를 얇은 고정 헤더로 접습니다.
아래로 스크롤하면 위 커버가 얇은 헤더로 모핑됩니다.
높이·타이틀 크기·서브텍스트가 --kt-header-progress 하나로 스크럽됩니다.
순수 CSS 변수만으로 구현돼 원하는 대로 커스텀할 수 있습니다.
헤더가 배경과 구분되도록 그림자가 서서히 진해집니다.
스크롤을 멈추면 그 지점의 진행률에서 헤더가 그대로 유지됩니다.
진행률은 0에서 1 사이로, 스크롤 거리(distance)에 비례합니다.
GSAP·Lenis 없이 네이티브 스크롤만으로 동작합니다.
접근성: 헤더는 시맨틱 <header>이고 콘텐츠는 그대로 읽힙니다.
모듈을 제거하면 원래 커버 높이로 복원됩니다.
여기까지 스크롤하면 헤더는 완전히 접힌 고정 상태입니다.
Horizontal scroll section
화면 중앙을 고정하고 세로 스크롤을 가로 이동으로 바꿉니다.
Smooth Scroll — Lenis
이 데모는 관성 스크롤이 켜진 상태입니다 · 스위치로 끄고 바로 비교해 보세요.
관성 스크롤
Scroll sequence
스크롤 진행률에 맞춰 이미지 프레임을 재생합니다.
Reading Progress — Bar
읽은 만큼 가로 막대를 채웁니다.
Reading Progress — 커스텀 (API)
CSS 변수로 진행값을 받아 원하는 UI를 만들 수 있습니다.
SCROLL PROGRESS
Reading Progress — Ring
읽은 만큼 원형 인디케이터를 채웁니다.
Fullpage Sections
휠·스와이프·키보드·도트로 한 장씩 이동합니다.
Fullpage — Mixed axis
가로와 세로 전환을 한 흐름에 섞어 사용합니다.
Fullpage — 첫 화면만 슬라이드
첫 구간만 슬라이드하고 이후에는 일반 스크롤로 이어집니다.
일반 스크롤 영역여기부터는 슬라이드 잭킹이 풀리고 페이지가 평범하게 흐릅니다.
Footer
Pointer
포인터와 입력에 반응하는 모듈입니다.
글로우·틸트·자석·리플·제스처·드래그·커서를 제공합니다.
Soft
Glow 160px · Tilt 7/11°
Sharp
Glow 90px · Sensitivity 1.45
SURFACE + EDGE
표면 반사·외곽 광택·그림자를 각각 조절합니다.
AURORA HALO
카드 바깥으로 새어 나오는 회전 conic 글로우 — 오리지널 효과 복원.
COMET EDGE
외곽선을 따라 흐르는 그라디언트 광선 — 오리지널 보더 글로우.
Ring + Dot
점은 즉시 움직이고 링은 탄성으로 따라옵니다.
Text Ring
커서 주위를 원형 텍스트가 회전합니다.
Orbit
글자가 타원 궤도를 따라 움직입니다.
Trail
탄성 꼬리가 커서를 따라옵니다.
MOVE HERE
Sparkle
이동 경로에 별 모양 입자가 흩어집니다.
MOVE HERE
Snake
글자가 사슬처럼 이어져 커서를 따라옵니다.
MOVE HERE
요소별 커스텀 (라벨·색)
요소마다 커서 라벨과 색을 다르게 적용합니다.
Tilt (3D)
기울기·글레어·그림자가 포인터를 따라 움직입니다.
TILT ME
Crosshair
화면 전체에 십자선과 중심점을 표시합니다.
MOVE HERE
Click Burst
클릭한 위치에서 스프라이트를 한 번 재생합니다.
CLICK HERE
Image
원하는 이미지를 커서로 사용합니다.
MOVE HERE · CLICK
Custom
원하는 HTML을 커서로 렌더링합니다.
MOVE HERE
Cross Point
포인터 위치에 작은 십자점을 표시합니다.
MOVE HERE
Components
키보드와 스크린 리더를 지원하는 UI입니다.
아코디언·메가 메뉴·탭·바텀 시트·툴팁·스위치를 제공합니다.
Accordion / FAQ
네이티브 details 기반으로 높이 모션과 키보드를 지원합니다.
Kineto는 무엇인가요?
HTML 속성만으로 동작하는 바닐라 모션 라이브러리입니다.
의존성이 있나요?
코어는 무의존입니다.
GSAP·Lenis가 있으면 자동 감지해 활용합니다.
접근성은요?
네이티브 details/summary라 키보드·스크린리더가 그대로 동작합니다.
Accordion — 커스텀 아이콘
열림 상태에 따라 +와 − 아이콘을 바꿉니다.
배송은 얼마나 걸리나요?
영업일 기준 2–3일 소요됩니다.
교환·환불 규정은요?
수령 후 7일 이내 신청 가능합니다.
GNB 드롭다운 · 메가메뉴
형태별 설정을 따로 바꾸고 키보드·Esc 동작을 비교합니다.
Tabs
WAI-ARIA 탭·키보드 지원 · 클래스 하나로 슬라이딩 필 인디케이터.
HTML 속성만으로 동작하는 바닐라 모션 라이브러리입니다.
코어 무의존 · 51개 모듈 · 웹표준/접근성 준수.
키보드·스크린리더까지 챙긴 컴포넌트를 제공합니다.
발행된 글 104개
예약된 글
임시저장 10개
Bottom Sheet
헤더를 끌어 높이를 조절하고 백드롭과 함께 닫습니다.
공유하기
헤더를 끌어 높이를 조절하거나 Esc로 닫으세요.
Tooltip
위치를 자동 보정하며 호버·포커스·클릭으로 엽니다.
interactive: 툴팁 위로 마우스를 옮겨도 닫히지 않아 안의 링크를 클릭할 수 있습니다(html 옵션과 함께).
Switch (토글)
키보드와 ARIA를 지원하며 크기와 색을 바꿀 수 있습니다.
FLIP 레이아웃 애니메이션
여러 행에서도 항목이 사라지지 않고 새 위치로 이동합니다.
ABCDEFGHIJKL
Feedback
입력 결과와 상태를 알리는 모듈입니다.
색종이·길게 누르기·토스트·진동 효과를 제공합니다.
Magnetic button
자석 반응과 클릭 리플을 한 버튼에 함께 적용합니다.
Android ripple
클릭한 위치에서 원형 리플이 퍼집니다.
Confetti
클릭한 순간 캔버스 색종이가 터집니다.
Confetti — 완료 화면 버스트
요소가 화면에 들어오면 배경에서 한 번 터집니다.
COMPLETE
Hold to confirm
길게 누르거나 연타해 확인 게이지를 채웁니다.
Toast
화면 모서리에 상태 알림을 표시합니다.
Hover / Press 제스처
호버·누름·키보드 입력에 스프링으로 반응합니다.
Drag (드래그)
관성·경계·스냅백·방향키 이동을 지원합니다.
DRAG
Haptic Patterns
지원 기기에서 탭마다 다른 진동 패턴을 재생합니다.
Mouse Parallax
포인터 위치에 따라 요소를 X·Y축으로 이동합니다.
MOVE
Compass
바늘이 포인터를 향하도록 회전합니다.
NSWE
System
페이지 전체에 적용하는 모듈입니다.
로딩·화면 진입·페이지 전환 효과를 제공합니다.
Slot loader
숫자 진행률을 슬롯처럼 교체합니다.
Circular loader
원형 트랙으로 로딩 진행률을 표시합니다.
Loading bar
가로 막대로 로딩 진행률을 표시합니다.
Spinner — Comet
원호 하나로 회전·신축·차오르기를 모두 처리합니다 · 레일과 모드는 설정에서 바꿉니다.
불러오는 중
내려받는 중68% 완료
Spinner — Spokes
고정된 방사형 막대가 순서대로 밝아집니다.
확인하는 중
Loading dots — Wave
점이 차례로 반응하는 가벼운 인디케이터입니다.
응답 대기 중
Progress bar
트랙 밖에서 밖까지 일정한 속도로 끊김 없이 통과합니다 · 글로우는 설정에서 켭니다.
파일을 준비하는 중
Text Shimmer
텍스트를 빛이 통과합니다 · wave는 글자별 높낮이까지 이어집니다.
Terminal — Cursor
문구와 분리해 쓰는 블록 커서입니다.
시작하는 중
Terminal — Dots
필요한 문구 뒤에 붙이는 점 인디케이터입니다.
설치하는 중
Terminal — Blocks
작은 블록이 순서대로 점등되는 표시입니다.
검사하는 중
Terminal — Meter
블록 문자 진행 막대 — 흐르는(불확정) 모드와 실제 진행률 모드.
빌드 중
업로드
Line
Dots
Braille
Braille Pulse
Quarter Circle
Circle
Clock
Arrow Orbit
Triangle
Box Corners
Block Shade
Growing Blocks
Moon
Diamond
Pulse Dot
Spark
Binary
Toggle Blocks
Cross
Asterisk
Quad Dot Chase
Quad Dot Pulse
Bouncing Ball
Bouncing Bar
Scanner
Snake
Marquee
Typing Cursor
Ellipsis Typing
Block Cursor
Command Prompt
Dot Cursor
Spinner + Label
Quad Dots + Label
Spinner + Elapsed Time
Spinner + Step
Spinner + Meter
Module Index
현재 배포본에 포함된 51개 공개 모듈입니다.
Page Transition
링크를 오버레이로 전환합니다.
아래 버튼으로 효과를 미리 볼 수 있습니다.
HOME메인 화면
ABOUT다음 화면