75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
'use client'
|
|
|
|
import { motion } from 'motion/react'
|
|
import { type CSSProperties, type ElementType, memo, useMemo } from 'react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export type TextShimmerProps = {
|
|
children: string
|
|
as?: ElementType
|
|
className?: string
|
|
duration?: number
|
|
spread?: number
|
|
}
|
|
|
|
const MotionP = motion.p
|
|
|
|
const ShimmerComponent = ({
|
|
children,
|
|
className,
|
|
duration = 2,
|
|
spread = 2,
|
|
}: TextShimmerProps) => {
|
|
const dynamicSpread = useMemo(
|
|
() => (children?.length ?? 0) * spread,
|
|
[children, spread]
|
|
)
|
|
|
|
return (
|
|
<MotionP
|
|
animate={{ backgroundPosition: '0% center' }}
|
|
className={cn(
|
|
'relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent',
|
|
'[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]',
|
|
className
|
|
)}
|
|
initial={{ backgroundPosition: '100% center' }}
|
|
style={
|
|
{
|
|
'--spread': `${dynamicSpread}px`,
|
|
backgroundImage:
|
|
'var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))',
|
|
} as CSSProperties
|
|
}
|
|
transition={{
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
duration,
|
|
ease: 'linear',
|
|
}}
|
|
>
|
|
{children}
|
|
</MotionP>
|
|
)
|
|
}
|
|
|
|
export const Shimmer = memo(ShimmerComponent)
|