Odometer (오도미터)
다른 이름 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
숫자가 바뀌면 각 자리가 세로로 굴러 새 값이 됩니다.
쓰는 곳
실시간 카운터, 가격 표시
변형
- digit roll
- slide with fade
- themed odometer
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 오도미터(Odometer) 숫자 애니메이션을 넣어 줘. 롤링 넘버(rolling numbers), 슬롯머신 숫자(slot-machine digits)라고도 불러.
값이 바뀌면 각 자리가 항상 앞쪽 방향으로 세로로 굴러 새 숫자가 되고, 자리마다 살짝 시차를 두고 끝에서 작게 자리 잡게 해 줘.
숫자가 밀리지 않게 모든 자리의 폭을 같게 하고, 스크린 리더에는 최종 값만 읽히게 해 줘.비슷한 모션
- %
Number Ticker (넘버 티커)
다른 이름 Count Up, Animated Counter, Number Counter, countUp
숫자가 화면에 보이면 시작 값에서 목표 값까지 셉니다.
쓰는 곳
통계, KPI 블록
[적용할 곳]에 넘버 티커(Number Ticker)를 넣어 줘. 카운트 업(count up), 애니메이티드 카운터(animated counter)라고도 불러.
숫자가 화면에 들어오면 0부터 목표 값까지 세되, 처음엔 빠르다가 도착할 때 부드럽게 느려지게 해 줘.
주변이 흔들리지 않게 고정폭 숫자를 쓰고, 한 번만 세고, 스크린 리더와 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 최종 값을 바로 보여 줘.H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (스플릿 플랩 텍스트)
다른 이름 Text Flipping Board, Flip Board, Vestaboard display
공항 출발 안내판처럼 글자가 차르르 넘어가다 목표 글자에서 멈춥니다.
쓰는 곳
상태 보드, 레트로 디스플레이
[적용할 곳]에 스플릿 플랩 텍스트(Split-Flap Text) 효과를 넣어 줘. 텍스트 플리핑 보드(text flipping board), 플립 보드(flip board)라고도 불러.
각 글자 칸이 알파벳을 빠르게 넘기다 목표 글자에서 멈추고, 칸들이 왼쪽부터 오른쪽으로 차례로 자리 잡게 해 줘.
텍스트가 나타나거나 바뀔 때마다 한 번씩 실행하고, 스크린 리더에는 최종 텍스트만 읽어 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 넘기지 말고 최종 텍스트를 바로 보여 줘.ABDEFGHIJKLDEFMN
Word Rotate (워드 로테이트)
다른 이름 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
문장 속 한 단어가 슬라이드, 플립, 페이드로 목록의 다음 단어와 바뀝니다.
쓰는 곳
히어로 태그라인
[적용할 곳]에 워드 로테이트(Word Rotate) 효과를 넣어 줘. 회전 단어(rotating words), 플립 단어(flip words)라고도 불러.
줄 안의 한 단어가 위로 미끄러져 빠지고 목록의 다음 단어가 아래에서 들어오게 하고, 다음 교체 전에 각 단어에서 잠시 멈추게 해 줘.
단어 너비가 달라도 줄의 나머지가 튀지 않게 하고, 스크린 리더가 교체될 때마다 읽지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 교체를 멈춰 줘.Data & Numbers의 다른 모션
Animated Map Arcs (맵 아크 애니메이션)
다른 이름 World Map Animated Lines, Globe Arcs
지도나 지구본 위의 지점 사이로 선과 점이 움직입니다.
쓰는 곳
글로벌 규모를 보여 주는 비주얼
[적용할 곳]에 맵 아크 애니메이션(Animated Map Arcs)을 넣어 줘. 글로브 아크(globe arcs)라고도 불러.
점으로 된 지도 위 지점 사이에 곡선이 하나씩 차례로 그려진 뒤 목적지 쪽으로 거둬지고, 목적지에서는 부드러운 고리가 맥박치듯 퍼지게 해 줘. 차분하고 일정하게.
호들이 한꺼번에 움직이지 않게 시차를 두고, 반복은 끊김 없이 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Bar Chart Grow (바 차트 그로우)
다른 이름 Animated Bar Chart, Bar Chart Entrance
막대가 높이 0에서 데이터 값까지 솟아오릅니다.
쓰는 곳
대시보드, 리포트
[적용할 곳]에 바 차트 그로우(Bar Chart Grow) 애니메이션을 넣어 줘. 애니메이티드 바 차트(animated bar chart), 바 차트 엔트런스(bar chart entrance)라고도 불러.
막대가 기준선에서 값까지 빠른 시차를 두고 하나씩 차례로 올라오고, 자리 잡을 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 차트를 바로 보여 줘.A
B
C
D
Bar Chart Race (바 차트 레이스)
다른 이름 Racing Bar Chart
값이 바뀜에 따라 가로 막대의 순위가 시간에 따라 뒤바뀝니다.
쓰는 곳
시계열 데이터 스토리텔링
[적용할 곳]에 바 차트 레이스(Bar Chart Race)를 넣어 줘. 레이싱 바 차트(racing bar chart)라고도 불러.
시간에 따라 값이 바뀌면 가로 막대가 늘고 줄며, 순위가 바뀔 때마다 서로 부드럽게 미끄러져 자리를 바꾸고, 막대마다 레이블이 따라다니게 해 줘.
자리바꿈이 튀지 않고 미끄러지도록 마크업 순서를 바꾸지 말고 transform으로 막대를 옮기고, 사용자가 멈출 수 있는 방법을 줘.