Ribbon Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import RibbonText from "./RibbonText";

export default function Example() {
  return (
    <RibbonText
      text={"Soft spoken."}
      color={"#e5c6a7"}
      amplitude={12}
      speed={3}
      stagger={90}
      paused={false}
      style={{
        "fontSize": 64
      }}
    />
  );
}

Using Ribbon Text

Use a short word or phrase so the travelling wave remains easy to read. amplitude controls how far the letters move.

stagger changes the delay between letters and speed changes the wave's pace. Use paused when the surrounding composition should remain still.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to render; characters are read once by assistive technology.
color	string	No	"#ead8c5"	Letter colour.
amplitude	number	No	12	Vertical wave height in pixels.
speed	number	No	3	Wave cycle duration in seconds.
stagger	number	No	90	Phase offset between letters in milliseconds.
paused	boolean	No	false	Freeze the wave at its current position.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.