import * as React from "react"
import { Override } from "framer"
import SplitType from "split-type"
export function Split(): Override {
const textRef = React.useRef(null)
React.useEffect(() => {
const textElement = textRef.current
// Pilih elemen yang akan di-split
const paragraphs = textElement.querySelectorAll(
"h1, h2, h3, h4, h5, h6, p"
)
// Lakukan split menggunakan SplitType
const splitText = new SplitType(paragraphs, {
types: "lines, words, chars",
tagName: "span",
})
// Tambahkan styling langsung melalui JavaScript
const lineElements = textElement.querySelectorAll(".line")
lineElements.forEach((line) => {
line.style.overflow = "hidden"
line.style.fontKerning = "none"
})
}, [])
return { ref: textRef }
}
Please help me solve this problem @lukePeavey , I am not yet proficient in developing a website, but I want to try to learn it.
default text
Result