Cut-in

A band thrown across the screen for a moment that matters, the way a game announces one: it wipes in on the slant, holds, and wipes out.

Install

terminal

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

Examples

Three moments

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>  );}

The glitch on its own

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>  );}

Behaviour

A black band between two lines of the tone's colour (the accent, danger, or the legendary tier), a leaning eyebrow, a big tilted title that glitches as it lands, and a line under it. It closes by itself after duration, on Escape or on a click elsewhere; it does not take focus or block the page, and it is announced politely.

The two motions are the foundation's: cut-in, a wipe whose edge leans on the slant (on --zero-dur-cut), and glitch, a few stepped jumps that split a heading into a red and a blue ghost (on --zero-dur-glitch). Use glitch on any heading. Under reduced motion neither plays: the band appears and goes.

Props

CutIn

Prop	Type	Default	Description
open / defaultOpen / onOpenChange	boolean / boolean / (open) => void	—	Open, controlled or not.
duration	number	2400	Milliseconds it holds; 0 keeps it until dismissed.

CutInContent

Prop	Type	Default	Description
tone	"accent" \| "danger" \| "legendary"	"accent"	The colour of its lines and eyebrow.