I'm currently working on developing a text fill effect that will be controlled by a useState.
Below is the text I am using:
https://i.sstatic.net/TMLGlueJ.png
I aim to have it filled from left to right based on a state, with the last letter of the initial text being in a different color, like this example:
https://i.sstatic.net/eAI1gtBv.png
The code below appears to be partially functional, but the synchronization of the fill and color differentiation is off:
'use client'
import React, { useState } from 'react'
const Intro = () => {
const [percentage, setPercentage] = useState(0)
// Function to generate gradient dynamically based on percentage
const getGradient = (percentage) => {
return `linear-gradient(to right, white ${percentage}%, transparent ${percentage}%)`
}
return (
<div className="w-full h-[100vh] flex items-center justify-center">
<div className="flex flex-col">
<div>
<span
className="text-transparent italic text-[148px] text-stroke"
style={{
lineHeight: 0.8,
backgroundImage: getGradient(percentage),
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
}}
>
PO
</span>
<span
className="text-transparent italic pr-2 text-[148px] text-stroke"
style={{
lineHeight: 0.8,
backgroundImage: getGradient(percentage),
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
}}
>
S
</span>
</div>
<span
className="text-transparent text-[30px] italic text-stroke-less"
style={{
lineHeight: 1,
letterSpacing: 5.7,
marginLeft: 6,
backgroundImage: getGradient(percentage),
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
}}
>
PERFORMANCE
</span>
</div>
<input
type="range"
min="0"
max="100"
value={percentage}
onChange={(e) => setPercentage(e.target.value)}
className="mt-4"
/>
</div>
)
}
export default Intro