CanvasText
Animated canvas-based text effect that renders colored bezier curves passing through text. Supports dark/light mode auto-detection.
Installation
$ npx shadcn@latest add canvas-textPreview
CanvasText renders on a canvas element — see the live page for the animated effect.
Usage (React/TSX)
import { CanvasText } from "@/components/ui/canvas-text"
export default function Hero() {
return (
<CanvasText
text="HelpTribe"
fontSize={72}
fontFamily="Nohemi"
/>
)
}Design Notes
- Use sparingly — this is a decorative effect, not for body text.
- Works best with large bold text (48px+).
- Auto-detects dark/light mode via MutationObserver.