Moiré Intro
A full-screen intro where progress is the pattern. Two fine line gratings interfere into dense bands that rotate, widen, and calm down as a counter runs from 000 to 100. At 100, the gratings lock into register with a mechanical settle, the counter fades, and the overlay splits into alternating slats that slide along the line axis to reveal the page.
Dependencies
gsap@gsap/react
Interaction
Canvas 2D dual line gratings animated via GSAP timeline with responsive counter scaling, reduced-motion fallback, and staggered alternating slat exit translation.
Props
| Prop | Type | Description |
|---|---|---|
| open | boolean | Controls visibility and playback of the intro overlay. |
| progress | number | Controlled progress value from 0 to 100. Disables internal timeline when provided. |
| duration | number | Duration of the progress animation in seconds. |
| onComplete | () => void | Callback invoked when progress reaches 100 and exit transition finishes. |
| label | string | Tracking label displayed below the central counter. |
| position | "fixed" | "absolute" | Positioning strategy for the overlay container. |
| lockScroll | boolean | Locks document body scroll while the fixed overlay is active. |
| pitch | number | Line spacing period in pixels (clamped 6 to 32). |
| thickness | number | Line weight duty cycle from 0 to 1 (coverage 0.20 to 0.70). |
| angle | number | Initial grating counter-rotation offset in degrees. |
| colorA | string | First grating stroke color. Defaults to theme accent. |
| colorB | string | Second grating stroke color. Defaults to colorA. |
| background | string | Base overlay background color. Defaults to theme canvas. |
| className | string | Optional additional CSS class names for the outer container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.