DocsKitalpha

Token Transitions

Animate code tokens when content changes

Install

$ pnpm dlx shadcn@latest add https://docskit.codehike.org/r/token-transitions?token=*****
Sign in to unlock your token. View pricing for details.

Add the tokenTransitions handler (enabled when animate is true):

@/components/code.handlers.tsx
+
import { tokenTransitions } from "./token-transitions"



export function getHandlers(options: CodeGroup["options"]) {

  return [

    line,

+
    options.animate && tokenTransitions,

  ].filter(Boolean)

}

ExampleTry it in the Playground

content.mdx
<CodeGroup flags="a">



```js !! a.js

function lorem(ipsum) {

  let dolor = ipsum.split(" ")

  return dolor

}

```



```py !! c.py

def lorem(ipsum):

  dolor = ipsum.split(" ")

  return dolor

```



</CodeGroup>
preview
function lorem(ipsum) {

  let dolor = ipsum.split(" ")

  return dolor

}