# Curtain (Moonarc) A full-viewport wipe between pages: the next page opens through an iris from where you clicked, or through blinds, a shutter, doors, pixels, staggered columns, a diagonal, or a title panel that carries the next page's name. It animates the browser's own root view-transition snapshots with clip-path and mask, on Astro's router; back plays the shape in reverse. The only script is the click point. - Import: `import Curtain from '@moonarc/core/Curtain'` - Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/curtain.json` - Tier B · category transition · trigger click - Readout: `` - Browser support: newly (Chrome 120 · Firefox 144 · Safari 18); elsewhere: an instant swap between pages - Measured cost: 479 B raw JS · 266 B gzip (CSS 10.0 kB raw) - Page: https://moonarc.dev/components/curtain/ ## Props | Prop | Type | Default | Description | |---|---|---|---| | `mode` | `'iris' | 'blinds' | 'shutter' | 'doors' | 'pixels' | 'stagger' | 'diagonal' | 'title'` | `'iris'` | The shape. The destination page's mode plays, because the new document's CSS styles the transition. | | `title` | `string` | none | For title mode: the page's title, shown on the panel while it covers the swap. Give every page its own. | | `duration` | `number` | `preset (760; title 1390)` | Duration in ms. Unset, the preset's --ma-dur-gentle; title mode uses --ma-dur-ambient for its three beats. | | `color` | `string` | `var(--ma-panel)` | Panel colour in title mode: the page surface by default, over an opaque Canvas layer. | | `textColor` | `string` | `var(--ma-ink)` | Panel text colour in title mode. | ## Usage ```astro --- // in the layout, once, on every page --- ``` ## Reduced motion Astro's router skips view transitions under the OS setting; under the site's switch the snapshots are cut without a shape. ## With ClientRouter This is the ClientRouter: Curtain has no effect without it. The click-point script listens once on the document and rewrites the origin after every swap. ## Craft - Curtain owns the root and PageTransition owns regions: a named region on the same page is captured separately and keeps its own preset, and the curtain wipes everything else. Use both; never two curtains. - The old page holds still and the new one comes in through the shape. The default cross-fade is replaced (animation: none on the old snapshot, mix-blend-mode: normal on both), because a fade under a wipe looks muddy. - The mode is read with :root:has(.ma-curtain[data-mode]) on the destination page, so a page decides how it is entered. An editorial page can open with a title while the shop uses an iris. - The iris starts at the last pointer-down: one document listener, two custom properties on , rewritten after the swap because the router replaces the root's attributes. Back and forward open from the centre. - Blinds and pixels animate a registered custom property that a mask gradient reads, so the mask is re-rasterised on each frame. Eight stripes or a grid of squares are cheap to rasterise, and pixels use steps(6) because pixels do not tween. - Back plays the same keyframes reversed on the leaving page, above the arriving one, so going back looks like the forward move undone. - The title panel is a real element on every page, clipped away in normal life; its snapshot is what the browser slides across, so the title is the next page's own, not a copy the script knows about. ## Replaces - page-transition examples (motion.dev) - curtain / pixel transitions (Codrops) - Barba.js and Swup transitions ## Source ```astro --- /** * Curtain — a full-viewport wipe between two pages. Where PageTransition * animates a region, Curtain owns the root: it animates the browser's own * ::view-transition-old(root) / -new(root) with a clip-path (iris, doors, * shutter, diagonal) or a mask (blinds, stagger, pixels), so the new page * comes in through a shape while the old one stays put beneath it. Back * navigation plays the shape in reverse on the leaving page. `title` is a * real panel with a view-transition-name that carries the next page's title * across the swap, and only across a swap: a same-document transition the * library runs (html[data-ma-vt]) leaves it out. One element in the layout; * the mode is a prop and lives in the DOM, so :has() on the root selects the * rules — nothing global. * The only script is the iris origin: the last pointer-down, written on * and rewritten after every swap. */ import type { HTMLAttributes } from 'astro/types'; type Mode = 'iris' | 'blinds' | 'shutter' | 'doors' | 'pixels' | 'stagger' | 'diagonal' | 'title'; interface Props extends HTMLAttributes<'div'> { /** The shape. */ mode?: Mode; /** The page's title, for `title` mode: shown on the panel while it covers the swap. */ title?: string; /** Duration in ms. Unset: the preset's --ma-dur-gentle (title: --ma-dur-ambient). */ duration?: number; /** Panel colours for `title` mode. */ color?: string; textColor?: string; } const { mode = 'iris', title, duration, color, textColor, class: className, style, ...rest } = Astro.props; const vars = [color && `--ma-curtain-color:${color}`, textColor && `--ma-curtain-text:${textColor}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';'); --- ```