Canvas Text
Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.
Ship landing pages at
Installation
Run the following command
npx shadcn@latest add @aceternity/canvas-textExamples
Standard
With text
Ship landing pages at
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
text | string | - | The text to display with animated background. | Yes |
className | string | "" | Additional CSS classes for the text element. | No |
backgroundClassName | string | "bg-white dark:bg-neutral-950" | Tailwind classes to determine background color for dark mode. | No |
colors | string[] | ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7", ...] | Array of colors for the animated lines. Supports CSS variables. | No |
animationDuration | number | 5 | Duration in seconds for one complete animation cycle. | No |
lineWidth | number | 1.5 | Width of the animated lines in pixels. | No |
lineGap | number | 10 | Vertical gap between lines in pixels. | No |
curveIntensity | number | 60 | Intensity of the bezier curve animation. | No |
overlay | boolean | false | If true, positions the component absolutely for overlay use cases. | No |
CSS Variable Colors
You can use Tailwind CSS variables for colors:
<CanvasText
text="Colorful Text"
colors={[
"var(--color-blue-500)",
"var(--color-sky-500)",
"var(--color-violet-500)",
"var(--color-teal-500)",
]}
/>Dark Mode
The component automatically adapts to dark mode by detecting the backgroundClassName prop. Pass your page's background color classes to ensure proper rendering:
<CanvasText
text="Dark Mode Ready"
backgroundClassName="bg-white dark:bg-neutral-950"
/>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
