Line Shadow Text
An animation wrapping text elements in a retro 3D shadow gradient overlay.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add line-shadow-text
Global Configuration (CSS Styles)
Ensure the following CSS keyframes and animations are configured in your global theme file:
@theme {
--animate-line-shadow: line-shadow 15s linear infinite;
@keyframes line-shadow {
0% {
background-position: 0 0;
}
100% {
background-position: 100% -100%;
}
}
}Examples
Left Side Shadow
You can orient the retro line shadow towards the left side of the characters by setting the direction="left" prop.
Right to Left Animation Flow
You can reverse the motion direction of the line shadow animation (flowing from right to left) by setting the animateDirection="right-to-left" prop.
Usage
import { LineShadowText } from "@/components/ui/line-shadow-text"<h1 className="text-6xl font-extrabold tracking-tighter sm:text-7xl md:text-8xl leading-none">
<LineShadowText shadowColor="#3b82f6">Vibe UI</LineShadowText>
</h1>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | "" | The text content to render with shadow animation |
shadowColor | string | "currentColor" | Color of the retro line shadow overlay gradient |
as | "article" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "p" | "section" | "span" | "span" | The element type to render |
direction | "left" | "right" | "right" | Direction offset and pattern flow of the retro 3D shadow |
animateDirection | "left-to-right" | "right-to-left" | "left-to-right" | Flow direction of the shadow keyframe animation stripes |
className | string? | "" | Additional classes for the element |
This LineShadowText component creates a retro 3D striped shadow effect behind typography.
Contributors
JS
Jenish Sabhadiya