Reveal
Play a short entrance when content reaches the viewport.
Installation
One prompt for your coding agent to set up Reflow and use this system in Remix.
Landing
Use a default or subtle entrance for a page people read from top to bottom. Each section arrives when it reaches the viewport.
- Preset
landing- Travel
12px- Scale
0.94- Stagger
100ms
Product
Give a frequently visited workspace a short entrance. The product presets keep vertical position and scale steady.
- Preset
product- Travel
0px- Scale
1- Stagger
60ms
For slow data, keep the final rows’ footprint in the loading placeholders. Replace the placeholders when data arrives and stagger the real rows with the product preset.
Set it up
- Include the product screenshot in the hero when it appears on first paint.
- Keep the header, sidebar, and footer outside the reveal groups.
- Set
scroll: truefor content that should follow scroll progress. - Use
overflow: clipwhen you need clipping without a new scroll container.
Built in
- Landing uses the slow spring, product uses the moderate spring.
- Indices apply the same stagger interval to related elements.
- Browsers without scroll timelines use the entrance animation.
- Reduced motion keeps the content still.
Reference
Presets
| Preset | Travel / scale | Stagger |
|---|---|---|
landing | 12px / 0.94 | 100ms |
landing-subtle | 8px / 0.98 | 60ms |
product | 0px / 1 | 60ms |
product-subtle | 0px / 1 | 40ms |
Loading
Mount the real rows as their data becomes available. Keep the placeholder and loaded rows at the same height to avoid shifting the layout.
Apply the reveal mix to the loaded row and pass its index for the stagger.
Scroll-linked sections
Sections arrive as they enter the viewport and leave as they cross its top. Scroll in either direction to reverse the progress.