Reveal Wipe
Uilora Reveal Wipe — full-viewport chapters that wipe in with unique clip-path animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{img: string, title: string, label: string}> | [{img: '...', title: 'Serenity', label: 'Uilora — I'}, ...] | 4 sections — each gets a distinct clip-path reveal: horizontal wipe, radial burst, vertical split. |
| backgroundColor | string | #080808 | Background color (hex, rgb, or hsl). |
When to Use
Ideal for sequential storytelling — case studies, lookbooks, or magazine-style features. Each chapter gets its own reveal signature that builds editorial structure.
Best Practices
Use exactly 4 items. Images should have strong focal points near center since the radial clip-path reveals outward from center. Keep titles short (1–2 words).
Why This Component Matters
Clip-path animations create visceral discovery — the image doesn't fade in, it physically materialises. Each variant gives each chapter a unique visual identity.
FAQ
QCan I use more than 4 items?
Yes — items beyond index 3 reuse the horizontal wipe. Add more clips to the clips array in RevealSlide for custom styles.
QHow do I change reveal speed?
Adjust segEnd = Math.min(segStart + 0.32, 1) — a smaller number makes the reveal snap faster.
QCan I change when the title appears?
Adjust the [50, 85] input range in titleY / titleOp useTransform calls inside RevealSlide.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.