RippleLine squiggly text — React Component

Hero-grade headline with an animated wave underline, turbulence + Gaussian blur + displacement, optional glyph micro-warp, and reduced-motion fallbacks.

Motion Effectsspringlayouttypographysvgmotionherounderlinefilters

RippleLine squiggly text

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

text

Convenience text content (when children not provided).

steps

Number of turbulence/displacement frames.

stepDuration

Duration per frame in ms.

baseFrequency

Turbulence base frequency.

numOctaves

Number of turbulence octaves.

Root tag for SquigglyText.

textClassName

Class names applied to animated text node.

Generated JSX

Copy this into your page.

<SquigglyDrinksHeadline
  text=""
  steps={5}
  stepDuration={80}
  baseFrequency={0.02}
  numOctaves={3}
  as="span"
  textClassName=""
/>

Animation effects

springlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About RippleLine squiggly text

Squiggly Text adds an animated SVG underline that ripples continuously beneath highlighted words. The SVG path is drawn relative to the text element's bounding box and animates with a horizontal ripple motion using Framer Motion. The component adapts to any font size and text length automatically. Use it in hero headings or feature callouts to draw visual attention to a keyword without disrupting the overall typographic layout.

Common use cases

Hero heading keyword emphasis
Feature and benefit callout text
Landing page promotional headlines
Marketing copy emphasis effects

Installation