26 lines
641 B
TypeScript
26 lines
641 B
TypeScript
|
import { Text } from '@chakra-ui/react'
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
export const RainbowText = props => {
|
||
|
|
return (
|
||
|
|
<Text
|
||
|
|
as='h1'
|
||
|
|
fontSize='6xl'
|
||
|
|
fontWeight='bold'
|
||
|
|
backgroundClip={'text'}
|
||
|
|
color='transparent'
|
||
|
|
bgGradient='linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a);'
|
||
|
|
backgroundSize='200%'
|
||
|
|
sx={{
|
||
|
|
'@keyframes moving-rainbow': {
|
||
|
|
'0%': { backgroundPosition: '0 0' },
|
||
|
|
'100%': { backgroundPosition: '200% 0' }
|
||
|
|
},
|
||
|
|
animation: 'moving-rainbow 5s infinite linear'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{props?.children}
|
||
|
|
</Text>
|
||
|
|
)
|
||
|
|
}
|