Mask Wipe Kit

Installation

pnpm dlx shadcn@latest add @cleverui/mask-wipe-kit

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { MaskWipeKit } from '@/components/blocks/mask-wipe-kit'

Exampletsx

import { MaskWipeKit } from '@/components/blocks/mask-wipe-kit'

export default function MaskWipeKitDemo() {
  return (
    <div>
      <MaskWipeKit
        wipe="iris"
        slate="Transition 02 · Iris"
        panels={[
          {
            kicker: 'Specimen 01 · Paper',
            title: 'Set in ink on gallery paper.',
            body: 'Grade the letterforms in daylight first, hairline rules, drafting marks, and one measured column of type on a near-white sheet.',
            meta: 'Meridian Grotesk · 64/68 · Proof pass 01',
            tone: 'paper',
          },
          {
            kicker: 'Specimen 02 · Ink',
            title: 'Now proof the negative.',
            body: 'Scroll carries an iris across the stage and the same specimen re-sets as a night proof. Scrub back and the paper returns, the wipe is a pure function of progress.',
            meta: 'Negative proof · Pass 02 · Reversible',
            tone: 'ink',
          },
        ]}
      />
      {/* scroll runway so the wipe has room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}

API reference

MaskWipeKit accepts the following props.

Prop	Type	Default	Description
`wipe`	`MaskWipeName`	`'iris'`	wipe geometry that carries panel one into panel two
`panels`*	`[MaskWipePanel, MaskWipePanel]`	–	exactly two panels: [outgoing, incoming], both real content
`progress`	`number`	–	controlled progress 0–1. When set, the stage renders as a fixed-height block and the wipe follows this value; omit for the scroll-driven default.
`lengthVh`	`number`	`170`	extra scroll runway in vh when scroll-driven (default 170)
`slate`	`string`	–	mono slate line pinned to the stage, e.g. "Transition 02 · Iris"

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export type MaskWipeName = 'iris' | 'blinds' | 'split' | 'sweep'

export interface MaskWipePanel {
  kicker?: string
  title: string
  body: string
  /** mono footer line under the hairline rule */
  meta?: string
  /** surface treatment, 'paper' = page surface, 'ink' = inverted plate */
  tone?: 'paper' | 'ink'
}

Related components

SVG Mask Chapters

Chapters revealed through drawn SVG mask shapes for React, a circle, keyhole arch, and diagonal band draw and fill as scroll scrubs a pinned stage. Tailwind tokens, reversible, reduced-motion safe.

Cinematic Handover

A directed match-cut between two full-bleed React scenes, scroll scrubs a hairline figure that travels and grows from scene A into scene B's focal element. Reversible, Tailwind-themed.

Text Fill Scrub

An outline headline that fills with ink as the section scrolls, a clipped level rises through SVG glyphs under a meniscus hairline. React + Tailwind tokens, zero dependencies.

Dual Axis Chapters

A pinned React stage where one scroll value drives two geared axes, chapters advance vertically while a marker filmstrip slides in counterpoint, with a live mono ratio readout. Tailwind-themed.

Grid Break

A deconstructing editorial grid for React, scroll shears each cell off its seat along seeded vectors as the drafting skeleton surfaces, then reseats in reverse. Tailwind-themed, zero dependencies.

Kinetic Variable Hero

A hero headline set on a live variable-font weight field, the pointer blooms wght through the glyphs while scroll scrubs a crest across the line. React + Tailwind, zero dependencies.

Frequently asked questions

How do I install the Mask Wipe Kit component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/mask-wipe-kit`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Mask Wipe Kit require?

Mask Wipe Kit has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Mask Wipe Kit to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code