The team shared motion vocabulary - browsable, searchable, and always in sync.
The token library is the home screen of Tokn. It shows every token in the workspace as a card grid - name, category, key values, and a visual timeline preview. It is where team members quickly discover what tokens exist, what they feel like, and how to use them. It is always live, never a static doc that goes stale.
| What | How it works | Why it matters |
|---|---|---|
| Land on Library tab | Grid of all tokens loads instantly from cache. 12 token cards in 3 columns. | First impression sets the bar. Must feel fast and complete with no loading spinners. |
| Filter by category | Click Enter, Exit, Spring, or Feedback category pills. Grid filters instantly. | Developers usually know the category they need first. Reduce noise immediately. |
| Search by name | Type in search bar. Cards filter in real time by matching token name. | Developers type to find. Search must work on partial matches, for example def -> enter.default. |
| Preview animation | Each card shows colored timeline bars. Hover card to see a subtle animation indicator. | Visual preview lets developers evaluate feel without clicking into each token. |
| Open token detail | Click any card to open the token detail panel with that token selected. | Library is read-oriented discovery while detail view is editing and operations. |
| Copy from library | Each card has a copy action that copies the Framer Motion export for that token. | Power users copy directly from the library without entering a full editor flow. |
| Share the library | Share library button in the top bar copies a public preview URL. | The same data can be shared in a read-only format for fast async reviews. |
Every new workspace gets 8 baseline tokens automatically, so teams start with a useful motion vocabulary and customize from there instead of starting from a blank slate.
| Token name | Duration | Easing | Y Offset | Category |
|---|---|---|---|---|
| enter.fast | 150ms | ease-out | 8px | Enter |
| enter.default | 300ms | ease-out | 16px | Enter |
| enter.slow | 500ms | ease-in-out | 24px | Enter |
| exit.fast | 120ms | ease-in | 8px | Exit |
| exit.default | 200ms | ease-in | 12px | Exit |
| spring.bouncy | s:300 d:20 | spring | - | Spring |
| spring.gentle | s:200 d:30 | spring | - | Spring |
| feedback.success | 250ms | spring | - | Feedback |
A new team member opens the library, finds the right token, and copies export code without asking for help. Target time-to-copy for a new member: under 60 seconds.