SVG Stroke Transition — Free React & Next.js Transitions Component

SVG wipe-draw page transition — two curved paths animate their stroke to cover and reveal pages with a dramatic wipe effect.

SVG Stroke Transition is a premium transitions component for React and Next.js applications. Built with Tailwind CSS, GSAP animations. Copy-paste ready. Part of the ValvetUI component library.

Installation

Install with CLI: npx shadcn add @valvetui/svg-stroke-transition

Category

Transitions — Page transitions, block reveals, and view transition effects

Tags

• svg
• stroke
• page-transition
• wipe
• gsap
• animation

Dependencies

• gsap