Gradient Type Waves

What it is Hero Type Waves turns any headline into a fluid, wave-driven showpiece.

What it is Hero Type Waves turns any headline into a fluid, wave-driven showpiece. It’s SVG-based (no libraries), fully responsive, and built for performance. Highlights Auto-fit type : headline fills the path without clipping Per-device control : separate sizes or scales for mobile & tablet Seamless gradient flow (no flicker or resets) Smooth motion : high-resolution wave path Accessible : respects prefers-reduced-motion Framer-ready : single drop-in component, no dependencies Controls (props) Text / Font – your headline & Framer font Auto-fit – let the component size text to the wave (recommended) Desktop / Tablet / Mobile Size (px) – manual sizes when Auto-fit is off Mobile Scale / Tablet Scale – tweak only those breakpoints when Auto-fit is on Use Gradient, Color 1, Color 2 – brand colors with endless flow Wave Amplitude, Wave Speed – motion feel Gradient Speed – how fast the gradient travels Align – left / center / right Background – optional backdrop color How to use Drop Hero Type Waves into your frame and set a height. Type your headline and pick your Font . Leave Auto-fit: Yes for instant sizing, or turn it off to enter Desktop/Tablet/Mobile sizes. Adjust Wave/Gradient speeds to taste. Optional: fine-tune Mobile/Tablet Scale for tiny screens. Accessibility Honors prefers-reduced-motion: animations pause for motion-sensitive users. Pure text masking, so screen readers still announce your headline. Performance GPU-friendly SVG + CSS; no external libraries. Animations pause in Framer Canvas (when needed) to keep editing smooth; Preview/Publish run at full quality. Notes Works with any background (images, videos, solid colors). For ultra-long words, reduce Wave Amplitude or use Auto-fit. Support Questions or ideas? Reach out and I’ll help you tune it for your brand.