Slot
위아래로 굴러가는 오도미터.
0
34 modules · owner-locked requirements
Kineto
34개의 모션 모듈을 한 페이지에서 시연합니다.각 카드의 옵션을 조정하고, 완성된 설정을 HTML/JS 코드로 가져가세요.
- 간편설치
- 구형 브라우저 고려
- 모션 줄이기 지원
- 모바일 · 터치 지원
- 웹표준 · 접근성 준수
Counter
숫자를 보여주는 다섯 가지 방식입니다.
Pop은 카운트업 없이 완성된 숫자를 한 자리씩 내려놓습니다.
Discount
0이 아니라 특정 값에서 시작해 다른 값으로 증가·감소합니다. 34,000 → 10,000 할인 표기처럼 from → to를 지정하세요.
₩34,000
Plain
실제 값이 0부터 목표값까지 증가. from을 주면 특정 값에서 시작합니다.
0
Digit
세로 이동 없이 0–9 글리프만 교체.
0
Pop
완성된 숫자가 큰 상태로 나타나 순서대로 정착합니다. 정착 기준(상·중·하)은 옵션입니다.
0
Split-flap
전광판처럼 숫자가 반으로 접히며 넘어갑니다. 타일 배경은 옵션.
0
Clock
실제 시각이 초 단위로 흐릅니다. 콜론은 초에 맞춰 깜빡이고, 숫자가 바뀌는 방식은 롤 · 깜빡임 · 즉시 교체 중에서 고릅니다.
00:00:00
Countdown
지정한 시점까지 남은 시간을 셉니다. 하루 이상 남으면 일수가 함께 붙고, since를 주면 반대로 지난 시간을 셉니다.
00:00:00
Split-flap — Minimal
타일 없이 글자만 접히는 미니멀 플립.
0
Loading
화면 전체를 덮는 로딩 연출입니다. 수동 갱신부터 Promise, 스트리밍 fetch까지 실제 진행률을 그대로 연결합니다.
비주얼은 CSS 클래스와 변수로 다시 칠할 수 있고, renderUI 훅이면 UI를 통째로 바꿀 수도 있습니다.
Slot loader
Circular loader
Loading bar
Image Loading Effects
이미지가 로드되는 동안 재생되는 전환입니다.
GIF · WebP · APNG 같은 움직이는 이미지도 멈추지 않습니다.
Pixelate — auto
Pixel Mosaic 엔진. 요소 크기에서 자동으로 픽셀 단계를 만들고 균등 시간으로 해상도가 올라갑니다. 애니메이션 이미지도 재생 유지.
Pixelate — custom steps
명시적인 픽셀 블록 크기 배열(px)과 단계별 시간.
Progressive Print
블러+미세 노이즈 상태에서 위→아래로 스캔되며 선명해짐. 사각 모자이크 없음.
Dissolve
방향성 없이 전체 노이즈와 블러가 점차 사라지며 원본이 선명해짐.
Skeleton placeholder
Blur-up과 달리 이미지가 아닌 shimmer UI placeholder. 최소 1.2초 표시.
Skeleton — Pulse
그라디언트 이동 대신 밝기가 반복되는 placeholder.
Blur up
실제 이미지 레이어가 흐린 상태에서 선명해지는 이미지 전환.
Fade
Glitch Reveal
슬라이스가 어긋나고 블랙아웃이 번쩍이다 정착하는 로드 연출.
Polaroid
인화지가 현상되듯 과노출 상태에서 서서히 색이 차오릅니다.
CRT Power-on
브라운관 TV가 켜지듯 밝은 가로선이 열리며 세로로 펼쳐지고, 과노출 블룸과 주사선(scanline)을 거쳐 정착합니다.
Text Overflow
컨테이너보다 긴 텍스트를 다루는 여덟 가지 모드입니다.
이동·전환·대기 타이밍을 모두 옵션으로 제어할 수 있습니다.
Loop
같은 제목이 이어지는 연속 marquee.
IRIVER — Designer's Motion Collection 2026
Bounce
끝에 도착한 뒤 실제로 반대 방향으로 돌아옴.
01. 오래된 MP3 플레이어의 양방향 제목 스크롤
Rewind
끝에서 mask-out → 숨은 상태로 시작점 이동 → mask-in. 뒤로 이동하지 않음.
02. 끝까지 이동한 다음 사라졌다 처음에서 다시 나타나는 제목
Once
한 번 이동하고 마지막에 정지.
03. 한 번만 이동하고 마지막 글자에서 멈추기
Page Mask
페이지 단위 텍스트가 지정한 방향의 마스크로 교체됩니다.
04. LCD 화면 폭 단위로 끊어서 다음 구간을 마스크로 표시합니다
Page Flip
페이지 단위 텍스트가 전광판처럼 위/아래로 플립되며 교체됩니다.
05. 화면 폭 단위로 끊어서 다음 구간을 플립으로 넘깁니다
Page Roll
가로 이동(마퀴) 없이 동작합니다 — 첫 구간이 잠시 표시된 뒤, 나머지 구간들이 순서대로 세로 롤링으로만 교체됩니다.
07. 왼쪽 구간 먼저, 이어서 뒷부분이 롤링으로 넘어가는 하이브리드
Noise Dissolve
글자들이 노이즈처럼 흩어졌다가 다음 구간으로 재조립됩니다.
06. 글자가 흩어졌다 다음 페이지로 재조립되는 디졸브
Rolling Ticker
목록 아이템이 세로로 순환합니다. div·span 등 HTML 마크업 아이템을 그대로 지원합니다.
1 Kineto ▲22 Pixel Mosaic ▼13 Product Design —4 AI Workflow NEW
KINETO · PIXELATE · COUNTER · OVERFLOW · SCROLL ·
Card Glow & Tilt
포인터를 따라오는 광원과 3D 틸트.
표면 반사, 외곽 광선, 할로를 원하는 대로 겹쳐 쓸 수 있습니다.
Soft
Glow 160px · Tilt 7/11°
Sharp
Glow 90px · Sensitivity 1.45
SURFACE + EDGE
표면 반사와 외곽 광택을 각각 켜고 색상·감도를 조절합니다.
AURORA HALO
카드 바깥으로 새어 나오는 회전 conic 글로우 — 오리지널 효과 복원.
COMET EDGE
외곽선을 따라 흐르는 그라디언트 광선 — 오리지널 보더 글로우.
Interaction Feedback
포인터와 입력에 반응하는 피드백 모듈입니다.
Magnetic, Ripple, Vibration, Mouse Parallax, Compass가 여기에 있습니다.
Magnetic button
Android ripple
클릭 지점에서 원이 퍼지는 Material 스타일.
Haptic Patterns
탭하면 이름에 맞는 진동 패턴이 재생됩니다(안드로이드 크롬 등 지원 기기). 타이밍 조합으로 톡톡·드르륵 같은 질감을 만듭니다.
Mouse Parallax
MOVE
Compass
바늘이 포인터를 조준해 회전합니다. compassRange로 X축 매핑 회전도 가능.
NSWE
Text Motion
타이포그래피를 움직이는 모듈들입니다.
어떤 카드든 첫 프레임부터 다시 돌려볼 수 있습니다.
Text Split
SPLIT MOTION
Text Split — Spin
글자가 3D로 회전하며 등장합니다. flip·scale·blur 선택 가능.
SPIN AROUND
Text Swap
문장이 글자 단위로 교체됩니다 — 슬라이드 업 + 페이드 아웃, 스태거 입장.
Shuffle
MOTION DECODED
Typewriter
caret(|) 표시 여부와 한글 자음·모음 조합 타이핑을 옵션으로 선택합니다.
Text transition
slide-up · blur · dissolve(노이즈) · shimmer 등.
PIXEL
MOTION
TOOLKIT
Decode
글자가 순서대로 나타나며 랜덤 글리프로 깜빡인 뒤 확정됩니다. 텍스트에서 자동 생성.
SCROLL DOWN
Flicker
글자마다 불규칙하게 점멸하며 켜집니다. flickerLoop로 상시 잔플리커 유지.
SELECT YOUR PLATFORM
RGB Glitch
세 겹의 색상 분리 레이어와 간헐적 슬라이스 버스트.
SIGNAL
Content Entrance
콘텐츠가 화면에 들어오는 순간을 연출합니다.
방향 슬라이드부터 마스크, 시계 와이프까지 프리셋으로 고릅니다.
Slide up
CONTENT SLIDES UP
Wipe
CONTENT WIPES IN
Slide directions
LEFT / RIGHT / UP / DOWN
Page Reveal
열 가지 화면 전환 커버입니다.
방향·색·조각 수·스태거를 옵션으로 조절합니다.
Clock Wipe
시계 바늘이 돌 듯 원형 마스크가 채워지며 콘텐츠가 드러납니다.
CLOCK WIPE ACTIVATION
Class Hook
모션을 강제하지 않고 진입 시 원하는 CSS class만 on/off.
CUSTOM CSS CLASS
Scroll Effects
스크롤의 방향, 속도, 진행률에 반응합니다.
핀 고정과 가로 스크롤, 이미지 시퀀스까지 이 섹션에 모았습니다.
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 fallback 또는 CSS animation timeline에 연결.
Smooth Scroll — Lenis API
enableSmooth(), disableSmooth(), toggleSmooth(), scrollTo()
Scroll sequence
Reading Progress — Bar
읽은 만큼 채워지는 바입니다. 페이지 상단에 고정하거나, 이 카드처럼 요소 안에 넣을 수 있습니다.
Reading Progress — Ring
원형 인디케이터입니다. 퍼센트 표시, 맨 위로 이동 버튼, 특정 요소 추적을 옵션으로 켭니다. 우측 하단 플로팅 링도 이 모듈입니다.
Fullpage Sections
휠 · 스와이프 · 키보드 · 도트로 한 단락씩 이동하는 fullpage 컨테이너입니다. 02처럼 내용이 화면보다 길면 내부 스크롤을 먼저 소진한 뒤 다음 장으로 넘어갑니다. 끝에 도달하면 페이지 스크롤로 자연스럽게 이어집니다. data-kt-auto-advance로 시간 자동 넘김도 됩니다(설정창).
Fullpage — Mixed axis
A→B→C는 가로로, C→D는 세로로 넘어갑니다. 섹션마다 data-kt-fp-axis="x|y"로 진입 방향을 지정합니다.
Fullpage — 첫 화면만 슬라이드
슬라이드 구간과 일반 스크롤을 한 페이지에 섞습니다. 마지막 장에서 더 내리면 아래 콘텐츠로 자연스럽게 풀립니다.
일반 스크롤 영역여기부터는 슬라이드 잭킹이 풀리고 페이지가 평범하게 흐릅니다.
Footer
Media & UI
뷰어와 슬라이더, 주변광, 인터랙티브 마스크까지 미디어를 다루는 모듈들입니다.
하나의 이미지에 여러 모듈을 겹쳐 쓸 수도 있습니다.
Lightbox Viewer
전체 화면 그룹 뷰어 — 캡션·메타데이터, 확대·이동·미니맵, 커스텀 UI 훅.
Slider / Coverflow
단일 transform 경로로 드래그·키보드·버튼 이동이 중복 실행되지 않습니다.
GIF — Lazy + Ambient + Lightbox
세 모듈을 한 이미지에 조합해도 애니메이션 재생이 유지됩니다.
Animated WebP — Ambient
APNG — Lightbox
Ambient Video
재생 프레임을 저해상도로 샘플링해 미디어 주변광을 만듭니다.
Image Glitch — Ambient
로딩과 무관한 상시 효과 — 색수차·슬라이스·스캔라인 버스트가 랜덤 간격으로 발생합니다(hover 트리거 옵션).
CRT / VCR — Retro
브라운관·비디오테이프 질감의 상시 오버레이 — 1px 스캔라인, 위아래로 훑는 롤바, 비네트와 미세 플리커. VCR은 트래킹 노이즈와 화면 흔들림까지. (data-kt-glitch="crt" / "vcr")
Brush Reveal
같은 구도의 두 이미지 — 포인터가 지나간 곳만 브러시 마스크로 두 번째 이미지가 드러납니다. 잔상 유지(persist)·치유 속도·퍼짐·블러 모두 옵션.
Cursor
커서 프리셋 11종.
원하는 영역에만 적용할 수 있고, 터치 기기에서는 알아서 꺼집니다.
Ring + Dot
점은 즉시, 링은 탄성으로 따라옵니다. 호버 시 링은 유지되고 안쪽 점만 커집니다.
Text Ring
커서 주위를 도는 원형 텍스트. 호버 시 중앙 점만 확대됩니다.
Orbit
글자들이 타원 궤도를 돕니다. 링크·버튼에 다가가면 궤도가 정원으로 부풀어 오릅니다.
Trail
탄성 꼬리가 커서를 따라옵니다.
MOVE HERE
Sparkle
이동 궤적에 별 파티클이 흩날립니다.
MOVE HERE
Snake
글자들이 사슬처럼 이어 따라옵니다.
MOVE HERE
Crosshair
화면 전체 십자선 + 중심 점.
MOVE HERE
Click Burst
클릭 지점에서 스프라이트를 1회 재생합니다.
CLICK HERE
Image
원하는 이미지를 커서로 씁니다. 링크 위에선 교체, 클릭하면 버스트가 재생됩니다.
MOVE HERE · CLICK
Custom
임의의 HTML을 커서로 렌더링합니다.
MOVE HERE
Cross Point
포인터 위치에 작게 표시되는 + 크로스.
MOVE HERE
Module Index
배포 계약으로 잠긴 34개의 공개 모듈입니다.
Page Transition
같은 사이트 안에서의 이동을 전체 리로드 없이 처리합니다. 아래 버튼으로 직접 확인해보세요.
빼고 싶은 링크에는 data-kt-no-transition 하나면 됩니다.