zzzUI
English

Cut-in

在关键时刻横贯屏幕的一道横幅，仿照游戏中宣告此类时刻的过场效果：沿斜切方向划入，停留片刻，再划出。

安装

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/cut-in

示例

三种场合

cut-in-tones.tsx
import { useState } from "react";import { Button } from "@/components/zero/button";import {  CutIn,  CutInContent,  CutInDescription,  CutInEyebrow,  CutInTitle,} from "@/components/zero/cut-in";const moments = {  accent: ["Job taken", "Sealed crate", "Rail yards → North gate · 3,100 cr"],  danger: ["Run failed", "Crate damaged", "The reward drops by half."],  legendary: ["Found", "North gate seal", "Signs any job, anywhere."],} as const;type Tone = keyof typeof moments;export default function CutInTones() {  const [tone, setTone] = useState<Tone | null>(null);  const [eyebrow, title, line] = moments[tone ?? "accent"];  return (    <div className="flex flex-wrap gap-3">      <Button onClick={() => setTone("accent")}>Take the job</Button>      <Button variant="danger" onClick={() => setTone("danger")}>        Fail the run      </Button>      <Button variant="secondary" onClick={() => setTone("legendary")}>        Open the crate      </Button>      <CutIn        open={tone !== null}        onOpenChange={(open) => {          if (!open) setTone(null);        }}      >        <CutInContent tone={tone ?? "accent"}>          <CutInEyebrow>{eyebrow}</CutInEyebrow>          <CutInTitle>{title}</CutInTitle>          <CutInDescription>{line}</CutInDescription>        </CutInContent>      </CutIn>    </div>  );}

单独使用的故障效果

Signal lost

glitch-heading.tsx
import { useState } from "react";import { Button } from "@/components/zero/button";export default function GlitchHeading() {  const [run, setRun] = useState(0);  return (    <div className="grid justify-items-start gap-6">      <h3        key={run}        className="glitch origin-left rotate-(--zero-tilt) font-black font-zero text-zero-3xl italic"      >        Signal lost      </h3>      <Button variant="secondary" size="sm" onClick={() => setRun(run + 1)}>        Again      </Button>    </div>  );}

行为

由四部分组成：上下两条色调线（强调色、危险色或「传说」稀有度的颜色）之间的黑色横幅，一行斜体眉题，一行倾斜大标题（落定时带故障效果），以及标题下方的一行说明。经过 duration 后自动关闭，按 Esc 或点击其他位置也会关闭；不抢占焦点，不阻挡页面操作，并以 polite 方式通知读屏软件。

两段动效都来自地基：cut-in 是边缘沿斜切角度倾斜的擦除过渡（时长取自 --zero-dur-cut）；glitch 是几次阶跃式跳动，把标题错开成一红一蓝两道残影（时长取自 --zero-dur-glitch）。glitch 可用于任意标题。系统开启「减少动态效果」时两者都不播放，横幅直接出现、直接消失。

属性

CutIn

属性类型默认值说明
open / defaultOpen / onOpenChangeboolean / boolean / (open) => void—是否打开，受控与非受控均可。
durationnumber2400停留的毫秒数；设为 0 时一直显示，直到被关闭。

CutInContent

属性类型默认值说明
tone"accent" | "danger" | "legendary""accent"色调线与眉题的颜色。

CutInEyebrow, CutInTitle, CutInDescription, CutInTrigger