Эффект заполнения текста, но контролируется в процентах ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект заливки текста, которым будет управлять useState.
У меня есть следующий текст:


В соответствии с состоянием я хочу, чтобы оно заполнялось слева направо , хотя последняя буква первого текста будет другого цвета, например:
[img]https://i.sstatic .net/eAI1gtBv.png[/img]

Следующий код, кажется, работает наполовину, но заливка не синхронизирована и не имеет разных цветов:
'use client'

import React, { useState } from 'react'

const Intro = () => {
const [percentage, setPercentage] = useState(0)

// Function to dynamically create the gradient based on percentage
const getGradient = (percentage) => {
return `linear-gradient(to right, white ${percentage}%, transparent ${percentage}%)`
}

return (




PO


S



PERFORMANCE


setPercentage(e.target.value)}
className="mt-4"
/>

)
}

export default Intro



Подробнее здесь: https://stackoverflow.com/questions/787 ... percentage