Distorted Reveal Slider
A scroll-driven reveal slideshow that pairs full-bleed background imagery with inset detail images and a liquid distortion effect.
The Distorted Reveal Slider is a signature SAISON effect. Instead of a standard fade or slide, it uses a WebGL-style reveal to move between slides while exposing an inset detail image over a full-bleed background.
scroll reveal
Static reveal model: use a full-bleed background image and a closely related inset detail image. This avoids confusing customers with unrelated before/after imagery.
Understanding the Physics
Because this section relies on WebGL (Canvas), its settings behave more like a physics engine than standard web CSS.
Distortion Intensity
In the section settings, you'll find Distortion intensity. A value around 60 creates a noticeable ripple. Values above 100 create chaotic, heavy distortion, while values below 30 feel closer to a standard crossfade.
Scroll Travel per Slide
If you have multiple slides in this section, they progress via scroll. Scroll travel per slide dictates how far the user must scroll (in pixels/vh) to trigger the next slide. A value of 70 means they must scroll a fair distance, preventing accidental slide skips.
Animation Style
You can toggle between Distorted and Expanding aperture. Use Expanding aperture when the imagery should feel cleaner and less liquid.
Configuring the Images
Each slide block in this section can use desktop and mobile image pairs:
- Background image: This fills the entire section background.
- Background image mobile: Use this when the desktop crop loses the subject on phones.
- Inset image: This appears as the smaller reveal/detail image.
- Inset image mobile: Use this when the detail needs a tighter mobile crop.
- Title, meta text, label, and link: Keep these short so the visual reveal stays dominant.
- Both images must be high resolution, as WebGL scaling can sometimes make low-res images look softer.
Key Settings Reference
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| Inset Aspect Ratio | Section | 0.8 to 1.2 | Controls the shape of the revealed area. 1.0 is a perfect square. |
| Top/Bottom overlay opacity | Section | 10-50% | Adds a gradient overlay to ensure text is readable against the background image. |
| Transition duration | Section | 1.1s | How long the ripple takes to settle after interaction. |
| Scroll travel per slide | Section | 55-70 | Controls how much scroll is needed before the next reveal. |
| Meta text | Slide block | Used only when helpful | Perfect for describing the material, color, or detail being revealed. |
Common mistakes
- Using unrelated background and inset images, which makes the reveal feel confusing.
- Making text unreadable by leaving top or bottom overlay opacity too low.
- Using low-resolution images that soften when scaled through the reveal effect.
- Setting distortion intensity too high for commerce pages where customers need to inspect product detail.