Component
Vaporize Text Cycle Component for Framer
This is a fully customizable vaporize text cycle component for Framer recreated from Rauno’s work. It cycles through texts using a particle-based vaporizing effect. A clean way to add animated headlines or attention-grabbing text.
Created by
About the resource
To use the Vaporize Text Cycle component in Framer, start by adding your list of texts—they'll cycle through with a vaporizing particle effect. You can change the font, size, weight, and spacing to match your design. Use the color setting to control both the text and particle color.
Density controls how many particles appear during the effect, and spread sets how far they move. Animation duration changes how long the vaporizing effect runs, fade in sets how long the next text takes to appear, and delay adjusts the pause between each cycle. You can align the text left, center, or right, and choose the direction the animation flows.
Set the correct HTML tag for your text for better SEO, and use the preview toggle to turn the animation on or off while editing.
The text is not responsive due to constraints of
<canvas>HTML element, which this component uses. Setting the width or height tofit-contentwill not work.
About the resource
To use the Vaporize Text Cycle component in Framer, start by adding your list of texts—they'll cycle through with a vaporizing particle effect. You can change the font, size, weight, and spacing to match your design. Use the color setting to control both the text and particle color.
Density controls how many particles appear during the effect, and spread sets how far they move. Animation duration changes how long the vaporizing effect runs, fade in sets how long the next text takes to appear, and delay adjusts the pause between each cycle. You can align the text left, center, or right, and choose the direction the animation flows.
Set the correct HTML tag for your text for better SEO, and use the preview toggle to turn the animation on or off while editing.
The text is not responsive due to constraints of
<canvas>HTML element, which this component uses. Setting the width or height tofit-contentwill not work.
About the resource
To use the Vaporize Text Cycle component in Framer, start by adding your list of texts—they'll cycle through with a vaporizing particle effect. You can change the font, size, weight, and spacing to match your design. Use the color setting to control both the text and particle color.
Density controls how many particles appear during the effect, and spread sets how far they move. Animation duration changes how long the vaporizing effect runs, fade in sets how long the next text takes to appear, and delay adjusts the pause between each cycle. You can align the text left, center, or right, and choose the direction the animation flows.
Set the correct HTML tag for your text for better SEO, and use the preview toggle to turn the animation on or off while editing.
The text is not responsive due to constraints of
<canvas>HTML element, which this component uses. Setting the width or height tofit-contentwill not work.
The vaporize text cycle component properties in Framer.
The vaporize text cycle component properties in Framer.
The vaporize text cycle component properties in Framer.
