<div class="container">
    <input type="text" id="input" />
    <div>
        <span id="counter">12</span>
    </div>
</div>

<script type="module">
    import { animate, transform } from "https://cdn.jsdelivr.net/npm/motion@12.6.0/+esm"

    const maxLength = 12
    const input = document.getElementById("input")
    const counter = document.getElementById("counter")

    // Create transform functions outside the event handler
    const mapRemainingToColor = transform([2, 6], ["#ff008c", "#ccc"])
    const mapRemainingToSpringVelocity = transform([0, 5], [50, 0])

    // Set initial state
    counter.style.willChange = "transform"

    input.addEventListener("input", () => {
        const charactersRemaining = maxLength - input.value.length
        counter.textContent = charactersRemaining
        counter.style.color = mapRemainingToColor(charactersRemaining)

        if (charactersRemaining <= 6) {
            animate(
                "#counter",
                { scale: 1 },
                {
                    type: "spring",
                    velocity: mapRemainingToSpringVelocity(charactersRemaining),
                    stiffness: 700,
                    damping: 80,
                }
            )
        }
    })
</script>

<style>
    .container,
    input {
        position: relative;
        font-size: 32px;
        line-height: 1;
    }

    input {
        background-color: var(--layer);
        color: #f5f5f5;
        border: 2px solid var(--border);
        border-radius: 10px;
        padding: 20px;
        padding-right: 70px;
        width: 300px;
    }

    input:focus {
        border-color: var(--hue-blue);
    }

    .container div {
        color: #ccc;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            var(--layer) 20%
        );
        position: absolute;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        padding: 10px;
        padding-right: 20px;
        padding-left: 50px;
    }

    .container div span {
        display: block;
    }
</style>