LineShadowText
line-shadow-textOffsets a hard-edged striped shadow behind short display text.
Usage
Basic usage
A static striped shadow that defaults to --color-foreground, so it holds up in both light and dark themes.
<LineShadowText className="text-5xl font-bold">Hulian</LineShadowText>Shadow color
shadowColor accepts any CSS color; a token needs the --color- prefix.
<LineShadowText className="text-5xl font-bold" shadowColor="var(--color-primary)">
Hulian
</LineShadowText>Stripe width and offset
lineWidth sets the stripe density and offset sets the shadow distance; both use em, so they scale with the font size.
<LineShadowText className="text-5xl font-bold" lineWidth="0.12em" offset="0.08em">
Bold
</LineShadowText>Drift (optional)
animated drifts the stripes slowly along the diagonal. It is off by default because this preset is the most restrained member of the text-effect family, usable on print pages and corporate sites. Even when enabled it still respects prefers-reduced-motion.
<LineShadowText className="text-5xl font-bold" animated duration="8s">
Motion
</LineShadowText>Accenting a brand word in a hero heading
Shadow only the two-to-four word brand phrase and leave the rest of the heading in ordinary type.
Hulian admin component library
<h1 className="text-4xl font-bold text-foreground">
<LineShadowText shadowColor="var(--color-primary)">Hulian</LineShadowText> admin component library
</h1>When to use
Use LineShadowText to give a two-to-four word brand phrase or hero heading a hard-edged diagonal shadow. It is the most restrained member of the text-effect family: static by default, no animation frame loop, pure CSS, so print pages, corporate sites, and prefers-reduced-motion environments can all use it.
For a flowing gradient use AuroraText, for a sweeping highlight use AnimatedShinyText, and for per-character entrances use SplitText. Use Text for ordinary copy.
Import
import { LineShadowText } from "@hulianui/ui"Props
Inherits the native <span> attributes; children is narrowed below.
| Name | Type | Default | Description |
|---|---|---|---|
| children * | string | - | Text to shadow. Strings only: the shadow layer is a copy of the same text, and non-text nodes cannot be reproduced. |
| shadowColor | string | var(--color-foreground) | Shadow color. Tokens need the --color- prefix; a bare var(--primary) does not resolve under Tailwind v4's @theme. |
| offset | string | "0.04em" | Shadow offset from the text. Using em keeps it proportional to the font size. |
| lineWidth | string | "0.06em" | Stripe thickness and spacing. Larger values give coarse stripes, smaller ones approach a solid shadow. |
| animated | boolean | false | Drifts the stripes along the diagonal. See Usage guidelines for why this is off by default. |
| duration | string | "15s" | Seconds per drift cycle; only effective while animated is true. |
Usage guidelines
- Static by default is deliberate, not unfinished. The value of this preset is precisely "design flourish without motion"; making
animatedthe default would erase what separates it from the rest of the family. Even when enabled, the animation still respectsprefers-reduced-motion. - `children` accepts strings only. The shadow layer renders the same text again and clips the stripes to the glyphs with
bg-clip-text; passing an icon or nested element only produces visual noise. Use another effect for rich nodes. - The shadow layer is a real DOM node marked `aria-hidden`, not
::afterwithcontent: attr(data-text). Some screen readers announce pseudo-element content, which reads the same word twice; a real node can be marked decorative explicitly. - Do not apply it to long body copy: at small sizes the stripes blur into a grey fringe, and every glyph carries an extra paint.
- Do not hard-code the shadow as
black(the upstream default): under a dark theme that is an invisible black smudge. Use a token.
Related
AuroraText · AnimatedShinyText · SparklesText · GlitchText · SplitText · Text
Playground
<LineShadowText offset="0.04em" lineWidth="0.06em">Hulian</LineShadowText>