---
title: "मोशन टोकन"
description: "भूमिका के अनुसार अवधि, अवधि का पैमाना, भूमिका के अनुसार ईज़िंग, कोई सतह कहाँ से प्रकट होती है, और स्प्रिंग।"
url: "https://tanrei.chnotchy.com/hi/tokens/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# मोशन टोकन

> भूमिका के अनुसार अवधि, अवधि का पैमाना, भूमिका के अनुसार ईज़िंग, कोई सतह कहाँ से प्रकट होती है, और स्प्रिंग।

`tanrei.sys.motion` के अंतर्गत मोशन टोकन। मार्गदर्शन के लिए [मोशन](https://tanrei.chnotchy.com/hi/foundations/motion/) पढ़ें।

## भूमिका के अनुसार अवधि

किसी बदलाव में कितना समय लगता है, यह इस पर निर्भर है कि क्या हिलता है: स्थिति का बदलाव, चयन, आकार बदलता हुआ बॉक्स, अपनी जगह पर खुलने वाली सामग्री, और प्रकट होकर जाने वाली हर तरह की सतह — हर एक की अपनी भूमिका है। किसी कंपोनेंट का अवधि टोकन उसकी भूमिका का उपनाम (alias) होता है, इसलिए एक लेयर एक ही पंक्ति में किसी भूमिका के सभी कंपोनेंट की अवधि बदल सकती है। सतह जितनी तेज़ी से प्रकट होती है, उससे तेज़ी से जाती है। भूमिकाएँ मोशन डायल का अनुसरण करती हैं।

| टोकन | मान | प्रीव्यू |
| --- | --- | --- |
| `--tanrei-sys-motion-role-appear-anchored-enter` | 300ms |  |
| `--tanrei-sys-motion-role-appear-anchored-exit` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-enter` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-exit` | 200ms |  |
| `--tanrei-sys-motion-role-appear-modal-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-modal-exit` | 300ms |  |
| `--tanrei-sys-motion-role-appear-sheet-enter` | 400ms |  |
| `--tanrei-sys-motion-role-appear-sheet-exit` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-exit` | 300ms |  |
| `--tanrei-sys-motion-role-disclosure` | 400ms |  |
| `--tanrei-sys-motion-role-feedback` | 450ms |  |
| `--tanrei-sys-motion-role-reduced` | 100ms |  |
| `--tanrei-sys-motion-role-resize-default` | 300ms |  |
| `--tanrei-sys-motion-role-resize-large` | 400ms |  |
| `--tanrei-sys-motion-role-selection-mark` | 250ms |  |
| `--tanrei-sys-motion-role-selection-travel` | 250ms |  |
| `--tanrei-sys-motion-role-show-delay` | 300ms |  |
| `--tanrei-sys-motion-role-state-compact` | 200ms |  |
| `--tanrei-sys-motion-role-state-default` | 250ms |  |
| `--tanrei-sys-motion-role-state-large` | 250ms |  |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## अवधि

वह पैमाना जिससे भूमिकाएँ बनी हैं।

| टोकन | मान | प्रीव्यू |
| --- | --- | --- |
| `--tanrei-sys-motion-duration-short1` | 50ms |  |
| `--tanrei-sys-motion-duration-press-hold` | 100ms |  |
| `--tanrei-sys-motion-duration-short2` | 100ms |  |
| `--tanrei-sys-motion-duration-stagger` | 100ms |  |
| `--tanrei-sys-motion-duration-short3` | 150ms |  |
| `--tanrei-sys-motion-duration-short4` | 200ms |  |
| `--tanrei-sys-motion-duration-medium1` | 250ms |  |
| `--tanrei-sys-motion-duration-medium2` | 300ms |  |
| `--tanrei-sys-motion-duration-medium3` | 350ms |  |
| `--tanrei-sys-motion-duration-medium4` | 400ms |  |
| `--tanrei-sys-motion-duration-long1` | 450ms |  |
| `--tanrei-sys-motion-duration-long2` | 500ms |  |
| `--tanrei-sys-motion-duration-long3` | 550ms |  |
| `--tanrei-sys-motion-duration-long4` | 600ms |  |
| `--tanrei-sys-motion-duration-extra-long1` | 700ms |  |
| `--tanrei-sys-motion-duration-extra-long2` | 800ms |  |
| `--tanrei-sys-motion-duration-extra-long3` | 900ms |  |
| `--tanrei-sys-motion-duration-extra-long4` | 1000ms |  |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## ईज़िंग

वक्र, और वे चार भूमिकाएँ जिनसे कोई कंपोनेंट बदलाव की ईज़िंग चुनता है: प्रकट होने वाली सतह के लिए `enter`, जाने वाली सतह के लिए `exit`, अपनी जगह पर स्थिति के बदलाव के लिए `state`, और अपनी जगह पर हिलने या आकार बदलने वाली चीज़ के लिए `spatial`। हर भूमिका पैमाने के किसी एक वक्र की ओर इशारा करती है।

| टोकन | मान | कर्व |
| --- | --- | --- |
| `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) |  |
| `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) |  |
| `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) |  |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## सतह कहाँ से प्रकट होती है

प्रकट होने वाली हर सतह — मेन्यू, सूची, पॉपओवर, टूलटिप, डायलॉग, स्नैकबार — एक ही अपारदर्शिता, स्केल, दूरी और धुंधलेपन से शुरू होती है, और जाते समय उसी रास्ते लौटती है। एक ही “प्रकार का चुनाव” इन सबको साथ में तय करता है; कोई लेयर दूसरा विकल्प चुन सकती है, या इनमें से किसी एक मान को स्थिर कर सकती है।

`tanrei.sys.behavior.appearance`

How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.\*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.

fade-scale fade fade-slide blur-slide unfold

fade-scale — डिफ़ॉल्ट, और उस प्लैटफ़ॉर्म का फ़ॉलबैक जो यह विकल्प नहीं बना सकता

इससे जनरेट किया गया: `tokens/sys/behavior.tokens.json`

| टोकन | मान |
| --- | --- |
| `--tanrei-sys-motion-appear-blur` | 0px |
| `--tanrei-sys-motion-appear-distance` | 0px |
| `--tanrei-sys-motion-appear-opacity` | 0 |
| `--tanrei-sys-motion-appear-origin` | anchor |
| `--tanrei-sys-motion-appear-scale` | 0.96 |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## स्प्रिंग

हर स्प्रिंग के चार उप-टोकन हैं। `stiffness` और `damping` स्प्रिंग ऐनिमेशन वाले प्लैटफ़ॉर्म को चलाते हैं; `duration` और `easing` उसका अनुमानित रूप हैं, जो वहाँ इस्तेमाल होता है जहाँ स्प्रिंग उपलब्ध नहीं हैं, जैसे CSS में।

| टोकन | stiffness | damping | duration | easing | कर्व |
| --- | --- | --- | --- | --- | --- |
| `tanrei.sys.motion.spring.expressive.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.default-spatial` | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-spatial` | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) |  |
| `tanrei.sys.motion.spring.expressive.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.slow-spatial` | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) |  |
| `tanrei.sys.motion.spring.standard.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.default-spatial` | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-spatial` | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-spatial` | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`