ClipPath Reveal
Code
| 1 | // 150% reliably covers corners on wide boxes (75% leaves gaps). |
| 2 | // The shape's from/to are derived from the `shape` prop. |
| 3 | <Anime |
| 4 | autoplay |
| 5 | loop |
| 6 | alternate |
| 7 | duration={1800} |
| 8 | ease="outExpo" |
| 9 | clipPath={['circle(0% at 50% 50%)', 'circle(150% at 50% 50%)']} |
| 10 | > |
| 11 | <div className="reveal-panel">{children}</div> |
| 12 | </Anime> |
clipPath wipe reveal — circle, diamond, star, or inset — with loop/alternate.
Live preview
ClipPath RevealCircular clip wipe
hidden
Revealedcircle()
Props
| Name | Type | Default | Description |
|---|---|---|---|
| clipPath | string[] | - | From/to clip paths derived from shape |
| shape | 'circle'|'diamond'|'horizontal'|'vertical'|'star' | 'circle' | Reveal shape |
| duration | number | 1200 | Duration in ms |
| ease | string | 'outCubic' | Easing (preview uses outExpo) |
| loop | boolean | false | Loop the wipe |
| alternate | boolean | false | Reverse each iteration |
| onComplete | function | - | Fires when the reveal finishes |