React Line Shadow Text

Powered by

Motion

Most text shadow effects are static and boring—just fixed drop shadows that don't engage users. This component creates an animated line pattern that continuously moves across text as a shadow, using CSS gradients and keyframe animations. The shadow appears as diagonal lines that flow dynamically, creating depth and motion that draws attention.

Animated line shadow with continuous movement

Text with moving diagonal line shadows that create dynamic depth:

import { LineShadowText } from '@/components/ui/shadcn-io/line-shadow-text';const LineShadowTextDemo = () => {  return (    <div className="flex items-center justify-center p-8">      <h1 className="text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl">        Shad{' '}        <LineShadowText           className="italic"           shadowColor="rgb(59, 130, 246)"        >          CN        </LineShadowText>      </h1>    </div>  );};export default LineShadowTextDemo;

'use client';import { cn } from '@/lib/utils';import { motion, MotionProps } from 'motion/react';import * as React from 'react';interface LineShadowTextProps  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,    MotionProps {  shadowColor?: string;  as?: React.ElementType;}export function LineShadowText({  children,  shadowColor = 'black',  className,  as: Component = 'span',  ...props}: LineShadowTextProps) {  const MotionComponent = motion.create(Component);  const content = typeof children === 'string' ? children : null;  if (!content) {    throw new Error('LineShadowText only accepts string content');  }  return (    <MotionComponent      style={{ '--shadow-color': shadowColor } as React.CSSProperties}      className={cn(        'relative z-0 inline-flex',        'after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]',        'after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]',        'after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent',        'after:animate-line-shadow',        className,      )}      data-text={content}      {...props}    >      {content}    </MotionComponent>  );}

Built with TypeScript and Motion for React applications, using CSS custom properties and gradient animations. The shadow effect uses a 45-degree linear gradient that moves diagonally across the text, creating the illusion of animated hatching or line work.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/line-shadow-text.json

npx shadcn@latest add https://www.shadcn.io/registry/line-shadow-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/line-shadow-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/line-shadow-text.json

Usage

import { LineShadowText } from "@/components/text/line-shadow-text";

<LineShadowText 
  shadowColor="rgb(59, 130, 246)"
  className="text-6xl font-bold italic"
>
  Fast
</LineShadowText>;

Why most text shadows suck

Most developers use basic CSS text-shadow with static offsets—predictable, lifeless effects that users ignore. The shadows sit there doing nothing, adding visual weight without personality or engagement. There's no movement, no dynamism, just another static design element.

This React component uses animated CSS gradients positioned as pseudo-element backgrounds. The gradient creates diagonal line patterns that continuously move across the text using keyframe animations. The effect appears as a moving shadow made of parallel lines, creating depth and motion that feels organic and engaging.

The key insight: animated shadows create visual interest. When shadow patterns move continuously, they suggest energy and craftsmanship, like hand-drawn hatching in illustrations. The diagonal movement adds sophistication while remaining subtle enough not to distract from readability.

Features

• Continuous line shadow animation with customizable colors for React applications
• CSS gradient-based shadows using diagonal line patterns and background positioning
• Configurable shadow colors with CSS custom properties for theme integration
• Motion component integration with flexible element rendering (span, div, h1, etc.)
• Complete TypeScript support with proper prop validation and element types
• Performance optimized with CSS-only animations and GPU acceleration
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

LineShadowText

Animated text component with moving line shadow effects.

Shadow Color Options

Choose colors that complement your design:

Animation Timing

The animation runs for 15 seconds in a continuous loop:

Common gotchas

Shadow doesn't appear: The shadow uses CSS content attribute with data-text in React applications. Ensure the text content is a string, not JSX elements. The component validates this and throws an error for non-string children in TypeScript projects.

Animation feels too fast or slow: The 15-second duration balances visibility with subtlety in JavaScript applications. Faster animations (5-10s) create more energetic effects, while slower animations (20-30s) feel more sophisticated in Next.js projects.

Shadow color doesn't match theme: Use CSS custom properties or computed values for theme-responsive shadows in React applications. The shadowColor prop accepts any CSS color value, including theme variables in TypeScript projects.

Text readability issues: High contrast shadow colors can interfere with text legibility in JavaScript applications. Use subtle color differences or lower opacity shadows for better readability while maintaining the animation effect in React projects.

Performance concerns on mobile: CSS animations are GPU-accelerated and efficient in TypeScript applications. However, very large text with complex shadows might impact performance on older devices. Test across target devices in Next.js projects.

Integration with other components

Perfect for hero headlines in Card layouts or attention-grabbing text in Badge components within React applications. Works excellently with Button components for dynamic call-to-action styling in Next.js projects.

For branding interfaces, combine with Avatar for profile names or Dialog for modal titles. This TypeScript component pairs well with Tabs for section headers and Progress for status indicators, all with seamless shadcn/ui integration.

Questions developers actually ask