mirror of
https://github.com/noahpaige/portfolio-website.git
synced 2026-06-08 16:18:01 -06:00
noahpaige
24 lines
665 B
React
24 lines
665 B
React
import React, { memo } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
|
|
const ChromaticText = ({ text, offset }) => {
|
|
return (
|
|
<div className='relative'>
|
|
<motion.span
|
|
animate={{ margin: `-${offset} ${offset} ${offset} -${offset}` }}
|
|
className={'absolute text-red-500 select-none'}>
|
|
{text}
|
|
</motion.span>
|
|
<motion.span
|
|
animate={{ margin: `${offset} ${offset} ${offset} ${offset}` }}
|
|
className={'absolute text-blue-500 select-none'}>
|
|
{text}
|
|
</motion.span>
|
|
<span className='text-slate-200 z-10 mix-blend-lighten'>{text}</span>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
export default memo(ChromaticText)
|