masked-reveallisted
Install: claude install-skill sahiltolani30/Interior-designer-Website-Template
# Masked Reveal
## Use When
- A headline or short text block needs a premium reveal on scroll.
- Words should rise through an invisible mask with a staggered sequence.
- The project already uses GSAP or needs ScrollTrigger-based motion.
## Motion Defaults
- Trigger: start when the text top reaches `82%` of the viewport.
- Duration: `0.7s` to `0.9s`.
- Stagger: `0.025s` to `0.045s` per word.
- Offset: `yPercent: 110` to `0`.
- Ease: `power3.out` or `expo.out`.
- Replay: reveal once by default.
## HTML
```html
<h1 class="masked-reveal" data-masked-reveal>
Design systems that feel alive from the first scroll.
</h1>
```
## CSS Mask
```css
.masked-reveal {
visibility: visible;
}
html.js .masked-reveal[data-masked-reveal] {
visibility: hidden;
}
html.js .masked-reveal.is-split {
visibility: visible;
}
.masked-reveal .word-mask {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.masked-reveal .word {
display: inline-block;
transform: translateY(110%);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
html.js .masked-reveal[data-masked-reveal] {
visibility: visible;
}
.masked-reveal .word {
transform: none;
}
}
```
## GSAP ScrollTrigger
This helper avoids the paid SplitText plugin and keeps spaces intact.
```js
document.documentElement.classList.add("js");
gsap.registerPlugin(ScrollTrigger);
function escapeHTML(value) {
return value
.replace(/&/g, "&")
.replace(/</g, "<")
.replace