数字动画

// npm install motion motion-plus
"use client";

import { useState } from "react";
import { AnimateNumber } from "motion-plus/react";

export default function Page() {
    const [value, setValue] = useState(1024);
    return (
        <div className="flex min-h-screen flex-col items-center justify-center gap-6">
            <div className="text-4xl font-bold">
                <AnimateNumber transition={{ type: "spring", bounce: 0 }}>
                    {value}
                </AnimateNumber>
            </div>
            <div className="flex gap-2 text-sm">
                <button onClick={() => setValue((v) => v - 128)}>−128</button>
                <button onClick={() => setValue((v) => v + 128)}>+128</button>
            </div>
        </div>
    );
}