Jose Tamu
February 18, 2025 /
Beginner

Decode Card

How it works

Decode Card is a nestable block element. It comes with the Content Mask element nested, that will mask the content put here inside a Blur layer that won’t be affected by the Decode animation.

Content tab

Decode Settings group

Typography: of the Decode letters.
Gradient Left & Right: the 2 colors that will create the Decode gradient.
Backdrop Filter Blur: the Backdrop Filter to apply to the Decode spotlight.
Fade Duration
Fade CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Content Mask group

You can set the Content Mask’s styles at the Style Tab or using this section, especially to change the Blur and Dimensions.

Animation group

Include Characters: if disabled, the Decode spotlight will consist of just the Gradient.
Characters: the alphabet to be used. Include Characters must be enabled.
Backdrop Filter Blur: the Backdrop Filter to apply to the Decode spotlight.
Text Length: how much text to generate that will be illuminated by the spotlight. It should be a big value if the Decode Card is also a big one.
Gradient size: the size of the Decode’s spotlight.