Marquee跑马灯

import { cn } from "@/lib/utils"
import { Marquee, MarqueeItem } from "@/components/ui/marquee/marquee"

const WORDS = ["线条网格", "LINE GRID", "组件库", "开源", "BUILD WITH CARE"]

// 两条丝带反向滚动，旋转后在中间交叉；开启「减少动态效果」时回到水平，所以各自错开位置
const RIBBONS = [
  {
    rotate: -9,
    direction: "left",
    className: "bg-foreground text-background motion-reduce:top-1/3",
  },
  {
    rotate: 9,
    direction: "right",
    className:
      "border-y border-edge bg-muted text-foreground motion-reduce:top-2/3",
  },
] as const

export default function MarqueeDemo() {
  return (
    <div className="relative h-56 w-full overflow-hidden bg-dots">
      {RIBBONS.map(({ rotate, direction, className }) => (
        <Marquee
          key={rotate}
          label="线条网格与组件库"
          rotate={rotate}
          direction={direction}
          speed={42}
          fade={false}
          className={cn(
            "absolute top-1/2 -left-[10%] w-[120%] -translate-y-1/2 py-4 motion-reduce:left-0 motion-reduce:w-full",
            className,
          )}
        >
          {WORDS.map((word) => (
            <MarqueeItem
              key={word}
              className="gap-8 text-lg font-semibold tracking-tight sm:text-2xl"
            >
              {word}
              <span aria-hidden className="text-sm opacity-50">
                ✳
              </span>
            </MarqueeItem>
          ))}
        </Marquee>
      ))}
    </div>
  )
}

import { Marquee, MarqueeItem } from "@/components/ui/marquee/marquee"

const WORDS = ["简洁", "CLARITY", "克制", "LESS", "精确", "PRECISION"]

// 描边字：用背景色填充并先画描边，字形重叠处的内部轮廓会被盖住
const OUTLINE =
  "text-background [-webkit-text-stroke:1.5px_var(--foreground)] [paint-order:stroke_fill]"

export default function MarqueeTypeDemo() {
  return (
    <div className="flex w-full min-w-0 flex-col gap-3 py-6">
      {[false, true].map((reverse) => (
        <Marquee
          key={String(reverse)}
          reverse={reverse}
          speed={38}
          gap={28}
          label="简洁、克制、精确"
        >
          {WORDS.map((word, index) => (
            <MarqueeItem
              key={word}
              className="gap-7 text-5xl font-semibold tracking-tight sm:text-6xl"
            >
              <span className={index % 2 ? OUTLINE : undefined}>{word}</span>
              <span aria-hidden className="text-xl text-primary">
                ✦
              </span>
            </MarqueeItem>
          ))}
        </Marquee>
      ))}
    </div>
  )
}

import { ArrowDownRight, ArrowUpRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { Marquee, MarqueeItem } from "@/components/ui/marquee/marquee"

// 固定的演示数据，不连接任何实时服务
const STATS = [
  { label: "组件安装", value: "12,840", change: "+12.4%", up: true },
  { label: "Star", value: "2,048", change: "+8.2%", up: true },
  { label: "周下载", value: "36,210", change: "+16.8%", up: true },
  { label: "构建耗时", value: "24.6s", change: "−3.2%", up: false },
]

export default function MarqueeTickerDemo() {
  return (
    <Marquee speed={32} gap={12} label="组件安装、Star、下载与构建耗时">
      {STATS.map(({ label, value, change, up }) => (
        <MarqueeItem
          key={label}
          className="rounded-full border border-edge bg-card px-4 py-2.5 text-xs"
        >
          <span className="text-muted-foreground">{label}</span>
          <span className="font-mono font-semibold">{value}</span>
          <span
            className={cn(
              "flex items-center gap-1 font-mono",
              up ? "text-primary" : "text-muted-foreground",
            )}
          >
            {up ? (
              <ArrowUpRight className="size-3.5" aria-hidden />
            ) : (
              <ArrowDownRight className="size-3.5" aria-hidden />
            )}
            {change}
          </span>
        </MarqueeItem>
      ))}
    </Marquee>
  )
}

import { Braces, Code, Database, Layers, Palette, Terminal } from "lucide-react"
import { Marquee, MarqueeItem } from "@/components/ui/marquee/marquee"

const TOOLS = [
  { name: "Next.js", icon: Layers },
  { name: "TypeScript", icon: Braces },
  { name: "Tailwind CSS", icon: Palette },
  { name: "React", icon: Code },
  { name: "Node.js", icon: Terminal },
  { name: "PostgreSQL", icon: Database },
]

export default function MarqueeStackDemo() {
  return (
    <div className="flex w-full min-w-0 flex-col gap-3">
      {/* 第二行倒序并反向滚动，两行的内容在画面里错开 */}
      {[false, true].map((reverse) => (
        <Marquee
          key={String(reverse)}
          reverse={reverse}
          speed={26}
          gap={12}
          label="技术栈工具列表"
        >
          {(reverse ? TOOLS.toReversed() : TOOLS).map(
            ({ name, icon: Icon }) => (
              <MarqueeItem
                key={name}
                className="rounded-lg border border-edge bg-card px-4 py-3 text-sm"
              >
                <Icon className="size-4 text-primary" aria-hidden />
                {name}
              </MarqueeItem>
            ),
          )}
        </Marquee>
      ))}
    </div>
  )
}

"use client"

import * as React from "react"
import { Pause, Play } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Marquee, MarqueeItem } from "@/components/ui/marquee/marquee"

const UPDATES = [
  { time: "10:42", title: "组件已发布", note: "新增四向滚动与交叉丝带。" },
  { time: "10:28", title: "构建完成", note: "全部页面已导出为静态文件。" },
  { time: "09:56", title: "文字动效就绪", note: "支持中文分字与乱码解码。" },
  { time: "09:30", title: "主题同步", note: "亮暗模式与颜色主题独立切换。" },
]

export default function MarqueeVerticalDemo() {
  // 持续滚动的正文应当提供暂停入口，直接绑定 `paused`
  const [paused, setPaused] = React.useState(false)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <p className="text-sm font-medium">更新动态</p>
        <Button
          variant="outline"
          size="sm"
          aria-pressed={paused}
          onClick={() => setPaused((value) => !value)}
        >
          {paused ? <Play /> : <Pause />}
          暂停滚动
        </Button>
      </div>
      <Marquee
        direction="up"
        speed={22}
        gap={16}
        paused={paused}
        className="h-56"
        label="组件库更新动态"
      >
        {UPDATES.map(({ time, title, note }) => (
          <MarqueeItem
            key={time}
            className="w-full items-start gap-4 border-b border-edge pb-4 whitespace-normal"
          >
            <span className="pt-1 font-mono text-[10px] text-muted-foreground">
              {time}
            </span>
            <div className="flex flex-col gap-1">
              <span className="text-sm font-medium">{title}</span>
              <span className="text-xs leading-5 text-muted-foreground">
                {note}
              </span>
            </div>
          </MarqueeItem>
        ))}
      </Marquee>
    </div>
  )
}