Stripe Wipe
A colored stripe sweeps across the viewport to mask route changes.
Component Showcase
Stripe Wipe
A colored stripe sweeps across the viewport to mask route changes.
GSAPTimeline
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add stripe-wipe
How to import and use
app/page.tsx
import { RindWipeTransition } from "@/components/stripe-wipe";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<RindWipeTransition />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Stripe Wipe" component into my React/Next.js project.
Component description: "A colored stripe sweeps across the viewport to mask route changes."
CLI Installation command: `npx @melonui-dev/cli add stripe-wipe`
Tags/Technologies used: GSAP, Timeline
Please write a premium, responsive React page component in Next.js that:
1. Imports `RindWipeTransition` from `@/components/stripe-wipe`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.