Clip Reveal

npx atelier-ui add clip-reveal

npm install motion

import { motion } from "motion/react"
import type { ReactNode } from "react"

export type ClipRevealProps = {
    children: ReactNode
    className?: string
    duration?: number
    depth?: number
    top?: number
    left?: number
    bottom?: number
    right?: number
    trigger?: boolean
    onComplete?: () => void
}

export function ClipReveal({
    children,
    className,
    duration = 2,
    depth = 2,
    top = 70,
    left = 25,
    bottom = 40,
    right = 25,
    trigger = true,
    onComplete,
}: ClipRevealProps) {
    const insets = `inset(${top}% ${right}% ${bottom}% ${left}%)`

    return (
        <div className={`relative overflow-hidden ${className ?? ""}`}>
            <motion.div
                className="absolute inset-0"
                initial={{ clipPath: insets }}
                animate={{ clipPath: trigger ? "inset(0% 0% 0% 0%)" : insets }}
                transition={{ duration, ease: [0.85, 0, 0.2, 1] }}
                onAnimationComplete={() => trigger && onComplete?.()}
            >
                <motion.div
                    className="w-full h-full"
                    initial={{ scale: depth }}
                    animate={{ scale: trigger ? 1 : depth }}
                    transition={{ duration, ease: [0.85, 0, 0.2, 1] }}
                >
                    {children}
                </motion.div>
            </motion.div>
        </div>
    )
}
Expand code

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

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

### Component: ClipReveal
### Description: A clip-path reveal that scales the content from a starting inset to fullscreen.
### Dependencies: motion

---

### Usage Example

```tsx
<ClipReveal className="h-full w-full">
  <img src="/photo.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
</ClipReveal>
```

---

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Content to reveal. Required. |
| `className` | `string` | — | Extra classes applied to the wrapper. |
| `duration` | `number` | `2` | Duration of both animations in seconds. |
| `depth` | `number` | `2` | Initial scale of the content before reveal. |
| `top` | `number` | `70` | Starting inset from the top in percent. |
| `left` | `number` | `25` | Starting inset from the left in percent. |
| `bottom` | `number` | `40` | Starting inset from the bottom in percent. |
| `right` | `number` | `25` | Starting inset from the right in percent. |
| `trigger` | `boolean` | `true` | Starts the animation when set to true. |
| `onComplete` | `() => void` | — | Called when the animation finishes. |

---

### Full Component Source

#### src/components/clip-reveal/clip-reveal.tsx

```tsx
import { motion } from "motion/react"
import type { ReactNode } from "react"

export type ClipRevealProps = {
    children: ReactNode
    className?: string
    duration?: number
    depth?: number
    top?: number
    left?: number
    bottom?: number
    right?: number
    trigger?: boolean
    onComplete?: () => void
}

export function ClipReveal({
    children,
    className,
    duration = 2,
    depth = 2,
    top = 70,
    left = 25,
    bottom = 40,
    right = 25,
    trigger = true,
    onComplete,
}: ClipRevealProps) {
    const insets = `inset(${top}% ${right}% ${bottom}% ${left}%)`

    return (
        <div className={`relative overflow-hidden ${className ?? ""}`}>
            <motion.div
                className="absolute inset-0"
                initial={{ clipPath: insets }}
                animate={{ clipPath: trigger ? "inset(0% 0% 0% 0%)" : insets }}
                transition={{ duration, ease: [0.85, 0, 0.2, 1] }}
                onAnimationComplete={() => trigger && onComplete?.()}
            >
                <motion.div
                    className="w-full h-full"
                    initial={{ scale: depth }}
                    animate={{ scale: trigger ? 1 : depth }}
                    transition={{ duration, ease: [0.85, 0, 0.2, 1] }}
                >
                    {children}
                </motion.div>
            </motion.div>
        </div>
    )
}
```

---

### Integration Instructions

1. If you can execute shell commands, run `npx atelier-ui add clip-reveal` 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 `<ClipReveal />` 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/clip-reveal
Expand code