The Wavy Text Distortion Marquee is a high-performance kinetic typography component designed for Framer. Unlike standard marquees, this component applies complex mathematical physics to individual characters, allowing for fluid undulations, rubber-band elasticity, and 3D depth effects. It uses requestAnimationFrame to ensure buttery-smooth motion without impacting website performance.
Advanced Wave Physics: Choose from five distinct wave algorithms: Sine, Elastic, Bounce, Smooth, and Chaos.
3D & Chromatic Distortion: Apply true 3D perspective rotation, scale fluctuations, motion blur, and colour shifting (hue/saturation cycles).
Interactive Hover States: Engage users with reactive animations. Set the marquee to pause, slow down, or reverse direction when hovered.
Hero Sections: Create high-impact, moving typography for landing pages.
Creative Portfolios: Showcase a modern, edgy aesthetic using the Chaos or Elastic wave settings.
Ticker Tapes: Display seamless loops of keywords or client names with subtle motion.
Text & Appearance: Customise the content, toggle uppercase, and set font styles and colours.
Layout: Adjust the gap between text blocks and vertical padding.
Animation: Control scroll speed, direction (Left/Right), and hover behaviour.
Wave Settings: Select the wave type and fine-tune amplitude, frequency, and wave speed.
Distortion Matrix: A master intensity slider controls a suite of toggleable effects,s including Vertical/Horizontal motion, Scale, Rotation, Skew, Perspective, Colour Shift, and Blur.
Drag the component onto your canvas.
Input your desired text and choose a font.
Select a Wave Type (e.g., Sine for smooth, Elastic for snappy).
Open the Distortion section and toggle effects like Perspective or Colour Shift to achieve your desired look.
Adjust the Intensity slider to subtly refine or exaggerate the effect.
Evixel Studio
