import Splt from 'react-spltjs'; const App = () => ( <> <Splt text="Hello World" />; </> ); export default App;

import Splt from 'react-spltjs'; const myArray = [ ['text-red-500'], ['text-orange-500'], ['text-amber-500'], ['text-yellow-500'], ['text-lime-500'], [], // no need to fill, whtspc char ['text-green-500'], ['text-emerald-500'], ['text-teal-500'], ['text-cyan-500'], ['text-sky-500'], ]; const App = () => ( <> <h2> <Splt text="Hello World" array={myArray} // takes an array, gives classes to each character className="md:inline-block animate-loadIn motion-reduce:animate-none" // setting inline-block is important for translates // but does break-words at small viewport widths // suggest setting a breakpoint speed={0.2} // adjusts total animation duration, default: 0 offset={0.09} // adjusts character animation duration, default: 0.05 ease="cubic-bezier(0.5,0.5,.2,1.5)" // default: 'ease' />; </h2> </> ); export default App;