Squiggly Text
A squiggly text effect using SVG turbulence and displacement filters, animated with Motion.
How many drinks
are too many drinks?
Installation
Run the following command
npx shadcn@latest add @aceternity/squiggly-textProps
SquigglyText Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The text or nodes to wrap with the squiggly effect. |
steps | number | 5 | Number of distinct displacement frames to cycle through. Higher means smoother wobble at the cost of more SVG filters in the DOM. |
stepDuration | number | 80 | Time between filter swaps, in milliseconds. Lower values feel jittery, higher values feel lazy. Full cycle = steps * stepDuration ms. |
scale | number | [number, number] | [6, 8] | Maximum displacement in pixels. Pass a number for a constant scale, or a tuple to alternate between two values per step. |
baseFrequency | number | 0.02 | Turbulence base frequency. Lower values give longer, smoother waves; higher values give tighter noise. |
numOctaves | number | 3 | Number of turbulence octaves. Higher means more detailed noise. |
as | "span" | "div" | "span" | The wrapper element. Use span to keep it inline inside a heading, div for a block-level wrapper. |
className | string | — | Optional class names for the wrapper (use this for color, size, font, etc). |
style | CSSProperties | — | Optional inline styles for the wrapper. The filter property is reserved by the component. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
