Stripe Wipe

npx atelier-ui add stripe-wipe

npm install motion

import { type Easing, motion, type Variants } from "motion/react"

const EASE: Easing = [0.85, 0, 0.2, 1]

export interface StripeWipeProps {
    stripes?: number
    segments?: number
    reverse?: boolean
    stagger?: number
    duration?: number
    trigger?: boolean
    className?: string
}

export function StripeWipe({
    stripes = 8,
    segments = 5,
    reverse = false,
    stagger = 0.04,
    duration = 1.2,
    trigger = true,
    className,
}: StripeWipeProps) {
    const orchestrate: Variants = {
        initial: {},
        animate: {
            transition: {
                staggerChildren: stagger,
                staggerDirection: reverse ? -1 : 1,
            },
        },
    }

    const segment: Variants = {
        initial: { x: 0 },
        animate: {
            x: "-101%",
            transition: { duration, ease: EASE },
        },
    }

    return (
        <motion.div
            className={`flex overflow-hidden ${className ?? ""}`}
            initial="initial"
            animate={trigger ? "animate" : "initial"}
            variants={orchestrate}
        >
            {Array.from({ length: stripes }, (_, stripeIndex) => (
                <motion.div
                    key={stripeIndex}
                    className="flex flex-1 flex-col overflow-hidden"
                    variants={orchestrate}
                >
                    {Array.from({ length: segments }, (_, segmentIndex) => (
                        <motion.div
                            key={segmentIndex}
                            className="flex-1 bg-[black]"
                            variants={segment}
                        />
                    ))}
                </motion.div>
            ))}
        </motion.div>
    )
}
Expand code

## Integrate the <StripeWipe /> component from Atelier UI

You are helping integrate an open-source React component into an existing application.

### Component: StripeWipe
### Description: A staggered stripe wipe that reveals the page beneath an overlay.
### Dependencies: motion

---

### Usage Example

Render it as a fixed overlay; the stripes wipe away to reveal the page beneath.

```tsx
<StripeWipe className="fixed inset-0" />
```

---

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `stripes` | `number` | `8` | Number of vertical columns the overlay is split into. |
| `segments` | `number` | `5` | Number of segments each column is divided into. |
| `reverse` | `boolean` | `false` | Reverses the direction the staggered wipe travels. |
| `stagger` | `number` | `0.04` | Delay in seconds added per column and per segment. |
| `duration` | `number` | `1.2` | Duration in seconds of each segment's wipe. |
| `trigger` | `boolean` | `true` | Starts the wipe when set to true. |
| `className` | `string` | — | Extra classes applied to the wrapper (e.g. sizing). |

---

### Full Component Source

#### src/components/stripe-wipe/stripe-wipe.tsx

```tsx
import { type Easing, motion, type Variants } from "motion/react"

const EASE: Easing = [0.85, 0, 0.2, 1]

export interface StripeWipeProps {
    stripes?: number
    segments?: number
    reverse?: boolean
    stagger?: number
    duration?: number
    trigger?: boolean
    className?: string
}

export function StripeWipe({
    stripes = 8,
    segments = 5,
    reverse = false,
    stagger = 0.04,
    duration = 1.2,
    trigger = true,
    className,
}: StripeWipeProps) {
    const orchestrate: Variants = {
        initial: {},
        animate: {
            transition: {
                staggerChildren: stagger,
                staggerDirection: reverse ? -1 : 1,
            },
        },
    }

    const segment: Variants = {
        initial: { x: 0 },
        animate: {
            x: "-101%",
            transition: { duration, ease: EASE },
        },
    }

    return (
        <motion.div
            className={`flex overflow-hidden ${className ?? ""}`}
            initial="initial"
            animate={trigger ? "animate" : "initial"}
            variants={orchestrate}
        >
            {Array.from({ length: stripes }, (_, stripeIndex) => (
                <motion.div
                    key={stripeIndex}
                    className="flex flex-1 flex-col overflow-hidden"
                    variants={orchestrate}
                >
                    {Array.from({ length: segments }, (_, segmentIndex) => (
                        <motion.div
                            key={segmentIndex}
                            className="flex-1 bg-[black]"
                            variants={segment}
                        />
                    ))}
                </motion.div>
            ))}
        </motion.div>
    )
}
```

---

### Integration Instructions

1. If you can execute shell commands, run `npx atelier-ui add stripe-wipe` from the project root instead of steps 2-3 (it installs everything automatically).
2. Install the npm dependencies: motion.
3. Copy each file from the component source above to the exact path shown.
4. Render `<StripeWipe />` where it belongs in the app, using the usage example as a starting point and the props table to adjust it.

Full documentation: https://atelier-ui.com/en/docs/components/transition/stripe-wipe
Expand code