Fade Up
Good default for cards, text blocks, and most tidy UI bits.
Long-scroll reveal showcase
A tiny reveal library with a bigger stage.
This page shows every data-reveal preset, plus delay, duration, distance,
easing, and replay behaviour. It’s built to feel a bit more showroom than spreadsheet.
Fade up
Fade right
Zoom in
Blur up
Presets
Every reveal option, laid out like a tasting flight.
Each card below is using one of the supported presets. Delays are handled per item, which fits nicely with your PHP-driven approach for row resets.
Fade Down
Useful for sticky bars, nav elements, or content arriving from above.
Fade Left
Starts offset to the right, then slides inward with a bit of polish.
Fade Right
Handy for split layouts where one column wants to enter from the side.
Zoom In
Subtle scale-up. Nice for CTAs, icons, and compact panels.
compactbuttons
Zoom Out
Starts slightly larger, then settles into place with a soft exhale.
hero panelsstats
Blur Up
Use sparingly. Looks rich, costs more than the transform-only presets.
heavieruse sparingly
Rotate Soft
A mild tilt with motion. Great for editorial blocks or playful accents.
editorialplayful
Preset batches
The same preset, repeated in proper rows.
These grouped sections show each preset applied across eight cards so you can see the rhythm, weight, and readability when the animation is used in bulk rather than as a single showroom tile.
Fade Up x 8
Eight cards using data-reveal="fade-up" so you can judge how the preset feels when repeated across a row-based layout.
Fade Up
The sensible default for cards and content blocks. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Up
The sensible default for cards and content blocks. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down x 8
Eight cards using data-reveal="fade-down" so you can judge how the preset feels when repeated across a row-based layout.
Fade Down
Good for bars, nav, and anything arriving from above. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Down
Good for bars, nav, and anything arriving from above. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left x 8
Eight cards using data-reveal="fade-left" so you can judge how the preset feels when repeated across a row-based layout.
Fade Left
Useful when a layout wants a side entry with restraint. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Left
Useful when a layout wants a side entry with restraint. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right x 8
Eight cards using data-reveal="fade-right" so you can judge how the preset feels when repeated across a row-based layout.
Fade Right
Works nicely for split layouts and secondary panels. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Fade Right
Works nicely for split layouts and secondary panels. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In x 8
Eight cards using data-reveal="zoom-in" so you can judge how the preset feels when repeated across a row-based layout.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom In
Compact scale-up for buttons, stats, and cards. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out x 8
Eight cards using data-reveal="zoom-out" so you can judge how the preset feels when repeated across a row-based layout.
Zoom Out
Starts slightly larger and settles into place softly. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Zoom Out
Starts slightly larger and settles into place softly. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up x 8
Eight cards using data-reveal="blur-up" so you can judge how the preset feels when repeated across a row-based layout.
Blur Up
Richer and heavier, best saved for occasional moments. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Blur Up
Richer and heavier, best saved for occasional moments. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft x 8
Eight cards using data-reveal="rotate-soft" so you can judge how the preset feels when repeated across a row-based layout.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Rotate Soft
A small tilt for editorial sections and playful accents. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up x 8
Eight cards using data-reveal="clip-up" so you can judge how the preset feels when repeated across a row-based layout.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 1 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 2 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 3 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 4 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 5 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 6 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 7 lets you see the preset repeated in a real row instead of a one-off sample.
Clip Up
A masked reveal that feels crisp and a bit theatrical. Card 8 lets you see the preset repeated in a real row instead of a one-off sample.
Timing
Delay and duration, without needing a full brass band of JS plugins.
These examples show how different values affect the feel. The JS stays tiny while CSS does the heavy lifting.
380ms
Snappy for UI atoms, badges, and shorter sections.
data-reveal-duration="380"
800ms
The sweet spot for most cards and section intros.
data-reveal-duration="800"
1000ms
Better for larger feature panels and scenes with more air around them.
data-reveal-duration="1000"
Subtle. Nice for text and components that just need a whisper of motion.
Default territory. Clean and noticeable without making a scene.
Stronger movement. Fine for heroes or larger tiles, but not for every crumb on the page.
Replay mode
Scroll away, come back, and it reveals again.
These items use data-reveal-once="false" so they animate each time they enter the viewport.
Handy for testers, less handy if overused in real builds.
Fade Right, replaying
Scroll down and then back up to trigger this one again.
Rotate Soft, replaying
A touch of tilt on every re-entry.
Blur Up, replaying
Heavier effect, so this is more demo candy than daily bread.