Mask Wipe Sections
- from @motiq
Chaptered storytelling with hard cuts instead of crossfades: each section is revealed by a scroll-driven clip-path wipe - an angled sweep, an expanding iris, or a centre-split curtain - led by a lit accent edge. The iris ring is an SVG circle whose radius animates, so the stroke hugs the clip edge at constant width. Reduced motion collapses the sticky stack into plain stacked sections.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @motiq/mask-wipe-sectionsLive preview
No live preview has been built for this component yet.
Registry dependencies2
Packages0
No npm packages are installed with it.