Skip to main content
Create eye-catching 3D text effects with customizable colors, shadows, and wiggle animations.

​
Usage

<Text3d
  textColor="white"
  strokeColor="black"
  shadowColor="yellow"
  :animate="true"
>
  Your 3D Text Here
</Text3d>

​
Props

​
textColor
string
default:"white"
Color of the main text.
​
letterSpacing
number
default:"-0.1"
Adjusts the spacing between letters in ch units.
​
strokeColor
string
default:"black"
Color of the text stroke.
​
shadowColor
string
default:"yellow"
Color of the text shadow.
​
strokeSize
number
default:"20"
Thickness of the text stroke in pixels.
​
shadow1Size
number
default:"7"
Size of the first shadow layer in pixels.
​
shadow2Size
number
default:"10"
Size of the second shadow layer in pixels.
​
class
string
default:""
Additional CSS classes for custom styling.
​
animate
boolean
default:"true"
Enables wiggle animation when set to true.
​
animationDuration
number
default:"1500"
Duration of the wiggle animation in milliseconds.

Build docs developers (and LLMs) love

Get started for freeTalk to us