Split Text Demo

import { SplitText } from "@/components/mizzle/text/split-text"

export default function SplitTextDemo() {
  return (
    <>
      <SplitText className="max-w-[24ch] text-xl font-medium tracking-[-0.01em] text-balance text-foreground">
        Every character knows its index, its word and its line.
      </SplitText>
      <style>{`
        [data-char] {
          animation: split-demo-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
          animation-delay: calc(var(--i) * 18ms);
          opacity: calc(1 - var(--line) * 0.25);
        }
        @keyframes split-demo-in {
          from { opacity: 0; transform: translateY(0.4em); }
        }
      `}</style>
    </>
  )
}