Spoiler Alert
Turn plain text into an interactive mystery. A dynamic blur-and-particle reveal effect that invites users to uncover hidden content with a click or hover.
Make it with Workshop
Build your own component with AI
Turn plain text into an interactive mystery. A dynamic blur-and-particle reveal effect that invites users to uncover hidden content with a click or hover.
Make it with Workshop
Build your own component with AI
Spoiler Alert is an interactive text component that transforms static content into an engaging reveal experience. It hides your text behind a beautiful animated blur and particle effect, unveiling it only when users interact — through hover or click.
The component adds curiosity, playfulness, and a modern touch to any design. The reveal animation feels smooth, cinematic, and purposeful — drawing users to explore what lies beneath.
Dynamic blur reveal effect with adjustable intensity (0–100px)
Particle animation layer for a lively, futuristic aesthetic
Smooth transitions between hidden and revealed states
Click or hover triggers with optional replay for hover reveals
Fully customizable text and particle colors to fit your brand
Responsive typography controls for font, alignment, size, and spacing
Performance-optimized rendering with device pixel-ratio precision
Engagement booster — turns passive reading into active participation
Set reveal trigger: click or hover
Enter and style the text content
Choose font family, weight, size, and color
Adjust blur intensity (0–100px)
Control particle count (0–1000)
Customize particle color
1. Copy and paste the component into your Framer project.
2. Enter the text you’d like to hide using the properties panel.
3. Adjust blur, particle, and typography settings to suit your design.
4. Choose your reveal trigger and you’re done — an interactive “spoiler” effect ready to engage users.
