Text Trail

npx shadcn@latest add https://motion-x.vercel.app/r/v0/text-trail-demo.json

Installation

Usage

import TextTrail from "@/components/motionx/text-trail";

Basic usage

<div className="w-full h-[400px]">
  <TextTrail text="Hello World" />
</div>

Custom colors

<div className="w-full h-[400px]">
  <TextTrail
    text="MotionX UI"
    textColor="#ffffff"
    backgroundColor={0x0a0a0a}
    fontWeight="900"
  />
</div>

Animated color cycling

<div className="w-full h-[400px]">
  <TextTrail
    text="Rainbow"
    animateColor={true}
    textColor=""
    colorCycleInterval={2000}
  />
</div>

Props

Prop	Type	Default	Description
`text`	`string`	`"Trail"`	Text content to display
`fontFamily`	`string`	`"Figtree"`	Font family for the text
`fontWeight`	`string \| number`	`"900"`	Font weight value
`noiseFactor`	`number`	`1`	Simplex noise frequency multiplier
`noiseScale`	`number`	`0.0005`	Scale of noise displacement
`rgbPersistFactor`	`number`	`0.98`	RGB fade persistence (0-1, higher = longer trails)
`alphaPersistFactor`	`number`	`0.95`	Alpha fade persistence (0-1, higher = longer trails)
`animateColor`	`boolean`	`false`	Enable automatic color cycling
`startColor`	`string`	`"#ffffff"`	Initial color when animateColor is enabled
`textColor`	`string`	`"#ffffff"`	Fixed text color (set to `""` for color cycling)
`backgroundColor`	`number \| string`	`0x271e37`	WebGL clear color (hex number or string)
`colorCycleInterval`	`number`	`3000`	Color change interval in ms (when animateColor)
`supersample`	`number`	`2`	Text rendering supersample factor for clarity

Note: The component requires a parent container with explicit width and height. It fills 100% of its parent using w-full h-full.