React example not working

[muratcankaracabey]

I could not make the react animation work

import React, { useState, useEffect } from "react";
import { createHighlighter, type HighlighterCore } from "shiki";
import { ShikiMagicMove } from "shiki-magic-move/react";

const CodePage: React.FC = () => {
  const [code, setCode] = useState(
    `function greet() {
    console.log('Hello, World!');
  }
  greet();`
  );
  const [highlighter, setHighlighter] = useState<HighlighterCore>();

  useEffect(() => {
    async function initializeHighlighter() {
      const highlighter = await createHighlighter({
        themes: ["nord"],
        langs: ["javascript", "typescript"],
      });
      setHighlighter(highlighter);
    }
    initializeHighlighter();
  }, []);

  function animate() {
    setCode(`const name = 'Alice';

    function greet() {
      console.log('Hello, ' + name + '!');
    }
  
    greet();`);
  }

  return (
    <div>
      {highlighter && (
        <>
          <ShikiMagicMove
            lang="ts"
            theme="nord"
            highlighter={highlighter}
            code={code}
            options={{ duration: 750, stagger: 7, lineNumbers: true }}
          />
          <button onClick={animate}>Animate</button>
        </>
      )}
    </div>
  );
};

export default CodePage;

Probably I am missing something because I just copied the example from readme.
It is not as smooth as it is seen at https://shiki-magic-move.netlify.app/

For quickly trying you can use this codesandbox: https://codesandbox.io/p/sandbox/yk9dxt?file=%2Fsrc%2FApp.tsx%3A29%2C22

[wood3n]

@muratcankaracabey you should import css: import "shiki-magic-move/dist/style.css";