Layered Text

Layered text effect with offset shadows, customizable styling, and animations.

Installation

npx shadcn@latest add @scrollxui/layered-text

Usage

import { LayeredText } from '@/components/ui/layered-text';

<LayeredText
  text='ScrollX UI'
  className='text-4xl md:text-6xl font-bold text-black dark:text-white [--stroke-color:#FFFFFF] dark:[--stroke-color:#000000]'
  layers={['#06B6D4', '#14B8A6', '#84CC16']}
  offsetX={2}
  offsetY={2}
  strokeWidth={2}
  animate={true}
/>

API Reference

Layered Text

Layered text effect with offset shadows, customizable styling, and animations.

Props

Property	Type	Default	Description
`text`	string	`required`	Main text to be displayed in layered style.
`layers`	string[]	`required`	Array of colors used to create layered depth effects.
`offsetX`	number	`6`	Horizontal offset applied between each text layer.
`offsetY`	number	`6`	Vertical offset applied between each text layer.
`strokeWidth`	number	`4`	Width of the text stroke for the top visible layer.
`animate`	boolean	`true`	Whether to apply fade-in animation on text layers.
`animationDuration`	number	`0.6`	Duration (in seconds) of the fade-in animation.
`className`	string	`-`	Optional className for additional styling.