Interaction & Input
Pointer, keyboard, selection, and direct-manipulation motion patterns.
卡片伸缩 / Card Resize
A responsive card resize motion pattern for interface feedback.
磁吸按钮 / Magnetic Button
A responsive magnetic button motion pattern for interface feedback.
数字计数器 / Number Counter
A responsive number counter motion pattern for interface feedback.
通知过冲 / Toast Overshoot
A responsive toast overshoot motion pattern for interface feedback.
标签滑块 / Tab Pill Glide
A responsive tab pill glide motion pattern for interface feedback.
手风琴弹簧 / Accordion Spring
A responsive accordion spring motion pattern for interface feedback.
拖动关闭 / Drag to Dismiss
A responsive drag to dismiss motion pattern for interface feedback.
涟漪反馈 / Ripple Feedback
A responsive ripple feedback motion pattern for interface feedback.
长按确认 / Hold to Confirm
A responsive hold to confirm motion pattern for interface feedback.
橡皮筋滑块 / Rubber-band Slider
A responsive rubber-band slider motion pattern for interface feedback.
点赞爆发 / Like Burst
A responsive like burst motion pattern for interface feedback.
光标拖尾 / Cursor Trail
A responsive cursor trail motion pattern for interface feedback.
按压按钮 / Push Button
A responsive push button motion pattern for interface feedback.
星级评分 / Star Rating
A responsive star rating motion pattern for interface feedback.
浮动标签 / Floating Label
A responsive floating label motion pattern for interface feedback.
复制按钮 / Copy Button
A responsive copy button motion pattern for interface feedback.
数量步进器 / Quantity Stepper
A responsive quantity stepper motion pattern for interface feedback.
选择标签 / Choice Chips
A responsive choice chips motion pattern for interface feedback.
验证码输入 / PIN Input
A responsive pin input motion pattern for interface feedback.
密码强度 / Password Meter
A responsive password meter motion pattern for interface feedback.
指针提示 / Pointer Tooltip
A responsive pointer tooltip motion pattern for interface feedback.
滑动显现 / Swipe to Reveal
A responsive swipe to reveal motion pattern for interface feedback.
旋转旋钮 / Rotary Knob
A responsive rotary knob motion pattern for interface feedback.
可排序列表 / Reorderable List
A responsive reorderable list motion pattern for interface feedback.
展开搜索 / Expanding Search
A responsive expanding search motion pattern for interface feedback.
挤压按钮 / Squish Button
A responsive squish button motion pattern for interface feedback.
切换胶囊 / Toggle Pills
A responsive toggle pills motion pattern for interface feedback.
数值拖拽器 / Value Scrubber
A responsive value scrubber motion pattern for interface feedback.
速拨悬浮按钮 / Speed-Dial FAB
A responsive speed-dial fab motion pattern for interface feedback.
色板选择器 / Swatch Picker
A responsive swatch picker motion pattern for interface feedback.
滑动解锁 / Slide to Unlock
A responsive slide to unlock motion pattern for interface feedback.
标签输入 / Tag Input
A responsive tag input motion pattern for interface feedback.
键帽按压 / Keycap Press
A responsive keycap press motion pattern for interface feedback.
轨道操作菜单 / Orbital Action Menu
A responsive orbital action menu motion pattern for interface feedback.
上下文程序坞 / Contextual Dock
A responsive contextual dock motion pattern for interface feedback.
惯性表盘 / Inertial Dial
A responsive inertial dial motion pattern for interface feedback.
弹性套索 / Elastic Lasso
A responsive elastic lasso motion pattern for interface feedback.
悬停意图门 / Hover Intent Gate
A responsive hover intent gate motion pattern for interface feedback.
组合手势 / Gesture Chord
A responsive gesture chord motion pattern for interface feedback.
Feedback & State
Motion that explains progress, confirmation, status, and system response.
乱序显现 / Scramble Reveal
A responsive scramble reveal motion pattern for interface feedback.
动量跑马灯 / Momentum Marquee
A responsive momentum marquee motion pattern for interface feedback.
错峰入场 / Stagger Entrance
A responsive stagger entrance motion pattern for interface feedback.
图标变形切换 / Icon Morph Swap
A responsive icon morph swap motion pattern for interface feedback.
下划线绘制 / Underline Draw
A responsive underline draw motion pattern for interface feedback.
弹性进度 / Elastic Progress
A responsive elastic progress motion pattern for interface feedback.
延迟提示 / Delayed Tooltip
A responsive delayed tooltip motion pattern for interface feedback.
开关弹簧 / Switch Spring
A responsive switch spring motion pattern for interface feedback.
复选框绘制 / Checkbox Draw
A responsive checkbox draw motion pattern for interface feedback.
打字机 / Typewriter
A responsive typewriter motion pattern for interface feedback.
里程表计数 / Odometer Count-up
A responsive odometer count-up motion pattern for interface feedback.
状态胶囊 / Status Pill
A responsive status pill motion pattern for interface feedback.
脉冲徽标 / Pulse Badge
A responsive pulse badge motion pattern for interface feedback.
成功勾选 / Success Check
A responsive success check motion pattern for interface feedback.
分段加载器 / Segment Loader
A responsive segment loader motion pattern for interface feedback.
轨道转圈 / Orbit Spinner
A responsive orbit spinner motion pattern for interface feedback.
环形进度 / Progress Ring
A responsive progress ring motion pattern for interface feedback.
通知滑入 / Notification Slide-in
A responsive notification slide-in motion pattern for interface feedback.
步骤进度 / Step Progress
A responsive step progress motion pattern for interface feedback.
撤销提示条 / Undo Snackbar
A responsive undo snackbar motion pattern for interface feedback.
提交状态 / Submit States
A responsive submit states motion pattern for interface feedback.
倒计时环 / Countdown Ring
A responsive countdown ring motion pattern for interface feedback.
骨架屏转内容 / Skeleton to Content
A responsive skeleton to content motion pattern for interface feedback.
通知堆叠 / Toast Stack
A responsive toast stack motion pattern for interface feedback.
不定进度条 / Indeterminate Bar
A responsive indeterminate bar motion pattern for interface feedback.
脉冲徽标二 / Pulse Badge II
A responsive pulse badge ii motion pattern for interface feedback.
闪光骨架屏 / Shimmer Skeleton
A responsive shimmer skeleton motion pattern for interface feedback.
输入指示器 / Typing Indicator
A responsive typing indicator motion pattern for interface feedback.
心跳监视器 / Heartbeat Monitor
A responsive heartbeat monitor motion pattern for interface feedback.
电量充电 / Battery Charge
A responsive battery charge motion pattern for interface feedback.
信号条 / Signal Bars
A responsive signal bars motion pattern for interface feedback.
徽标计数器 / Badge Counter
A responsive badge counter motion pattern for interface feedback.
书签切换 / Bookmark Toggle
A responsive bookmark toggle motion pattern for interface feedback.
数据包轨迹 / Packet Trace
A responsive packet trace motion pattern for interface feedback.
相位锁定 / Phase Lock
A responsive phase lock motion pattern for interface feedback.
校验和绽放 / Checksum Bloom
A responsive checksum bloom motion pattern for interface feedback.
回声回执 / Echo Receipt
A responsive echo receipt motion pattern for interface feedback.
状态差异 / State Diff
A responsive state diff motion pattern for interface feedback.
信号盲文 / Signal Braille
A responsive signal braille motion pattern for interface feedback.
Surface & Motion
Spatial, material, text, and ambient motion for expressive surfaces.
错误抖动 / Error Shake
A responsive error shake motion pattern for interface feedback.
彩纸爆发 / Confetti Burst
A responsive confetti burst motion pattern for interface feedback.
视差倾斜 / Parallax Tilt
A responsive parallax tilt motion pattern for interface feedback.
波浪加载器 / Wave Loader
A responsive wave loader motion pattern for interface feedback.
骨架扫光 / Skeleton Sweep
A responsive skeleton sweep motion pattern for interface feedback.
页面剥离 / Page Peel
A responsive page peel motion pattern for interface feedback.
光标聚光灯 / Cursor Spotlight
A responsive cursor spotlight motion pattern for interface feedback.
翻转卡片 / Flip Card
A responsive flip card motion pattern for interface feedback.
故障文字 / Glitch Text
A responsive glitch text motion pattern for interface feedback.
边框光束 / Border Beam
A responsive border beam motion pattern for interface feedback.
极光漂移 / Aurora Drift
A responsive aurora drift motion pattern for interface feedback.
高光扫过 / Shine Sweep
A responsive shine sweep motion pattern for interface feedback.
呼吸球体 / Breathing Orb
A responsive breathing orb motion pattern for interface feedback.
悬浮摆动 / Float Bob
A responsive float bob motion pattern for interface feedback.
液态团块 / Liquid Blob
A responsive liquid blob motion pattern for interface feedback.
渐变闪光文字 / Gradient Shimmer Text
A responsive gradient shimmer text motion pattern for interface feedback.
霓虹脉冲 / Neon Glow Pulse
A responsive neon glow pulse motion pattern for interface feedback.
均衡器条 / Equalizer Bars
A responsive equalizer bars motion pattern for interface feedback.
雷达脉冲 / Radar Pulse
A responsive radar pulse motion pattern for interface feedback.
牛顿摆 / Newton's Cradle
A responsive newton's cradle motion pattern for interface feedback.
弹跳小球 / Bouncing Ball
A responsive bouncing ball motion pattern for interface feedback.
跑马灯显现 / Marquee Reveal
A responsive marquee reveal motion pattern for interface feedback.
渐变边框变形 / Gradient Border Morph
A responsive gradient border morph motion pattern for interface feedback.
文字分割显现 / Text Split Reveal
A responsive text split reveal motion pattern for interface feedback.
悬停抬升 / Hover Lift
A responsive hover lift motion pattern for interface feedback.
光泽扫过 / Sheen Sweep
A responsive sheen sweep motion pattern for interface feedback.
裁剪擦除 / Clip Wipe
A responsive clip wipe motion pattern for interface feedback.
三维立方体旋转 / 3D Cube Rotate
A responsive 3d cube rotate motion pattern for interface feedback.
果冻摇摆 / Jelly Wobble
A responsive jelly wobble motion pattern for interface feedback.
折叠门 / Folding Doors
A responsive folding doors motion pattern for interface feedback.
前后对比 / Before / After
A responsive before / after motion pattern for interface feedback.
深度堆叠 / Depth Stack
A responsive depth stack motion pattern for interface feedback.
文字波浪 / Text Wave
A responsive text wave motion pattern for interface feedback.
焦散玻璃 / Caustic Glass
A responsive caustic glass motion pattern for interface feedback.
色差分离 / Chromatic Split
A responsive chromatic split motion pattern for interface feedback.
扭曲网格 / Warp Grid
A responsive warp grid motion pattern for interface feedback.
莫尔透镜 / Moiré Lens
A responsive moiré lens motion pattern for interface feedback.
偏振箔片 / Polarized Foil
A responsive polarized foil motion pattern for interface feedback.
融球桥接 / Metaball Bridge
A responsive metaball bridge motion pattern for interface feedback.
Transitions.dev Patterns
Original JGuang implementations of product-transition patterns referenced from the transitions.dev free catalog.
卡片尺寸切换 / Card resize
Expand a compact card while preserving the visual continuity of its content.
数字弹入 / Number pop-in
Pop a changed numeric value into place with a short overshoot.
通知徽标 / Notification badge
Reveal and update a notification count without shifting its anchor.
文字状态切换 / Text states swap
Swap status labels through a clipped vertical transition.
菜单下拉 / Menu dropdown
Open a compact action menu from its trigger with scaled opacity.
弹窗打开与关闭 / Modal open / close
Move a modal and its backdrop through coordinated enter and exit states.
面板显现 / Panel reveal
Reveal supporting content with a clipped horizontal panel transition.
并排页面切换 / Page side-by-side
Shift between neighboring page canvases while retaining spatial context.
图标切换 / Icon swap
Rotate and scale between two action icons in a fixed hit area.
成功勾选 / Success check
Draw a confirmation check after an action completes.
头像组悬停 / Avatar group hover
Fan overlapping avatars apart on hover or keyboard focus.
错误状态抖动 / Error state shake
Shake an invalid field briefly while keeping its message readable.
输入清除溶解 / Input clear with dissolve
Dissolve entered text as the clear action restores the empty state.
骨架屏加载与显现 / Skeleton loader and reveal
Crossfade a compact skeleton into loaded content without a layout jump.
文字微光 / Shimmer text
Sweep a restrained highlight across a short text label.
标签页滑动 / Tabs sliding
Slide a shared selection indicator between tab triggers.
提示框打开与关闭 / Tooltip open/close
Anchor a tooltip with a short offset and opacity transition.
多行文字显现 / Texts reveal
Reveal several text lines with clipped, staggered upward motion.
卡片悬停倾斜 / Card hover tilt
Tilt a card toward the pointer while preserving readable content.
加号变菜单 / Plus to menu morph
Morph a plus action into a close control while revealing nearby actions.
手风琴展开 / Accordion expand
Expand disclosure content using grid-track interpolation.
通知条打开与关闭 / Toast open/close
Enter and dismiss a toast from the nearest viewport edge.
点赞按钮 / Like button
Confirm a like with a scale pulse and small radial particles.
了解更多悬停 / Learn more hover
Move an arrow and underline to signal a navigational action.
复选框勾选 / Checkbox check
Draw the checked state while the control surface changes color.
旋转计数器 / Spinning counter
Roll a digit column to the next value on demand.
开关切换 / Toggle
Move a spring-like thumb between two clearly labeled states.
Catalog names and product inspiration reference the public Kinetics project by ckissi and the free-pattern catalog at transitions.dev. Every React preview and copyable sample on this page is an original JGuang implementation. JGuang does not redistribute either upstream implementation: Kinetics had no license file at the referenced commit, while transitions.dev terms prohibit redistributing the library itself.