Spoiler.js Telegram-style Spoiler Effect Demos

Download Back To CSSScript.Com

Lightweight web component for Telegram-style spoiler text effects. Works with React, Vue, Svelte. Configurable particle animations.

Default Usage

In the latest movie, there's a huge twist: the main character was a ghost all along.

<p>
    In the latest movie, there's a huge twist: 
    <spoiler-span>the main character was a ghost all along.</spoiler-span>
</p>

Customization Examples

High Particle Density

This spoiler has a much higher particle density (density="20"). The secret ingredient is love.

<spoiler-span density="20">
    The secret ingredient is love.
</spoiler-span>

Longer Lifetime & Slow Velocity

These particles last longer (particle-lifetime="300") and move slower (max-velocity="0.02"). The treasure is buried under the old oak tree.

<spoiler-span particle-lifetime="300" max-velocity="0.02">
    The treasure is buried under the old oak tree.
</spoiler-span>

Large Particles

The particles are scaled up (scale="2.5") for a chunkier effect. Secret access code: 4-8-15-16-23-42.

<spoiler-span scale="2.5">
    Secret access code: 4-8-15-16-23-42.
</spoiler-span>

Slow Reveal Duration

The text fades in slowly after being revealed (reveal-duration="1500"). The killer is the detective's own partner.

<spoiler-span reveal-duration="1500">
    The killer is the detective's own partner.
</spoiler-span>

Combined Effects

This example combines multiple attributes for a unique, "disintegration" style effect. The simulation is running inside another, larger simulation.

<spoiler-span 
    density="12" 
    scale="1.5" 
    particle-lifetime="100" 
    max-velocity="0.08" 
    reveal-duration="500">
    The simulation is running inside another, larger simulation.
</spoiler-span>