geist mono

geist mono

Search…

Text cycle

Text cycle

Head to the desktop site to copy.

Lead text

label 1

label 2

label 3

label 4

label 5

label 1

label 2

label 3

label 4

label 5

label 5

label 1

label 2

label 3

label 4

label 5

Updated:

Feb 7, 2024

Type:

No-code

Notes

  • Effect is created by using two instances of each label and changing their position in the stack for each variant.

  • Add a space to the end of your lead text to create the most natural spacing.

  • Pay close attention to the layer setup and always set font styling on the primary variant so you don't break inheritance.

  • A Spacers stack is used to control how many layers are visible. Those labels are tied to the same variables as the real labels to keep the widths accurate.

Help

How do I add Framer components?