Tips to customize this cloneable

1. Avoid choosing busy images to go behind the text, so that the text stands out and is legible.
2. Try to use high contrast colors between the foreground and background.
3. Make sure to keep using the VW unit for text size for maximum responsiveness and setting the "Line" property to "No wrap".
4. Stick to sans serif fonts with bold variants and clean strokes.
5. Although smaller devices don't support cursors, the animation is enjoyable on tablet and mobile as well. Check it out on smaller breakpoints!

See more of this effect

This is Part 2 of the text outline animation series.

Check out part 1 of this cloneable that features the outline effect triggered by page scrolling.

Check out part 3 of this cloneable that features dual moving text lines and parallax effect.

See it in action!

Finding it hard to visualize how you could use this inside a complete website design? I've used it in a fintech app landing page template. Check it out below!

AI Artist Portfolio, Blog & E-commerce Website Template for Webflow

see it live