Layered Text

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

ScrollX UI

Installation

npx shadcn@latest add https://scrollxui.dev/registry/layered-text.json

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.