Seperate Away Text
Seperate Away Text é um componente de texto para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.
Eldora UI
MIT
text
O que é
Seperate Away Text é um componente de texto para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Precisa de
npm i motion react clsx
Licença
Este componente vem de Eldora UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Seperate Away Text
"use client"
import clsx from "clsx"
import { motion } from "motion/react"
interface SeparateAwayTextProps {
textLeft?: string
textRight?: string
className?: string
}
export const SeparateAwayText: React.FC<SeparateAwayTextProps> = ({
textLeft = "",
textRight = "",
className = "",
}) => {
const separate = {
hidden: { opacity: 0, y: 0 },
visible: (custom: number) => ({
opacity: 1,
y: custom * 5,
transition: { duration: 1.5 },
}),
}
return (
<div className={className}>
<motion.h1
custom={-1}
variants={separate}
initial="hidden"
animate="visible"
className={clsx(
"font-display text-center font-bold drop-shadow-sm",
"text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
"tracking-[-0.02em]",
"md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
)}
>
{textLeft}
</motion.h1>
<motion.h1
custom={1}
variants={separate}
initial="hidden"
animate="visible"
className={clsx(
"font-display text-center font-bold drop-shadow-sm",
"text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
"tracking-[-0.02em]",
"md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
)}
>
{textRight}
</motion.h1>
</div>
)
}