Reveal Cards
Card animations that reveal on hover, click or scroll. Various reveal effects with 5 directions and 5 animation types.
Pro Features
Unlock advanced capabilities with the Pro version
Reveal Animation
Animations that effectively reveal cards
5 Animation Types
Fade, slide, scale, flip and blur animation options
3 Trigger Types
Hover, click and scroll triggers
5 Direction Options
Up, down, left, right and center direction support
Stagger Effect
Sequential card reveal effect
Callback Support
Capture reveal and hide events
Installation
Install via CLI
npx moonui-cli@latest add reveal-cardsUsage
Hover Effect
This card reveals sliding up on hover.
Examples
Hover Trigger
Card that reveals on mouse hover (👆 Hover over the card)
Hover Card
👆 Hover over me!
Click Trigger
Card that reveals on click (👆 Click the card to toggle)
Click Card
👆 Click to toggle!
Scroll Trigger
Card that reveals when entering viewport (🔄 Scroll down to see it appear)
Scroll Card
🔄 Triggers on scroll into view
Flip Animation
Card that reveals with 3D flip effect (👆 Hover to see 3D flip)
Blur Animation
Card that reveals with blur effect (👆 Hover to blur/unblur)
Blur Card
👆 Hover for blur effect!
Stagger Effect
Sequential reveal effect (🔄 Scroll down to see cards appear in sequence)
Card 1
🔄 Stagger delay: 0ms
Card 2
🔄 Stagger delay: 100ms
Card 3
🔄 Stagger delay: 200ms