All components
Animated Text Logo
TypographyAn outlined wordmark with a pointer-tracking glow and a looping shimmer.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/animated-text-logo.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/animated-text-logo.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The wordmark. |
| baseColor | string | "var(--primary)" | Stroke colour of the outlined text. |
| shimmerDuration | number | 4.5 | Seconds per shimmer pass; 0 disables it. |
| radius | number | 320 | Radius of the pointer glow. |
Accessibility
- The SVG carries role=img with an aria-label, so the word is announced.
- Gradient ids are per-instance, so two logos cannot fight over them.
- Shimmer stops under prefers-reduced-motion.
- Scales with its container via viewBox rather than a fixed font size.
Dependencies
motionclsxtailwind-merge