走马灯

ui

你身边的那位代替了我的座位
他的手捧着玫瑰承诺余生都奉陪
而我始终学不会
已被风吹散的眼泪
那逝去的幸福该怎么追回

src

TSX

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

import { Ticker } from "motion-plus/react";

const lines = ["第一句", "第二句", "第三句"]; // 换成你的文本

export default function Page() {
    return (
        <div className="flex min-h-screen items-center justify-center">
            <div className="h-40 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_30%,black_70%,transparent)]">
                <Ticker
                    axis="y"
                    velocity={26}
                    gap={14}
                    items={lines.map((line, i) => (
                        <span key={i} className="text-sm">{line}</span>
                    ))}
                />
            </div>
        </div>
    );
}