Draggable Letters

A playful component that makes each letter of a string draggable using GSAP. Customizable direction, spacing, and drag events. Ideal for interactive titles or creative UIs.
L
U
N
I
P
O
D

Props

PropertyTypeDefaultDescription
textstringThe string of characters to be rendered as individual draggable elements.
direction"x" | "y" | "both""both"Specifies the axis along which letters can be dragged: horizontal (`x`), vertical (`y`), or both.
spacingnumber12Spacing (in pixels) between each letter when they are initially laid out.
verticalCenterbooleantrueIf true, vertically centers the letters in the container. If false, uses a fixed top position.
containerClassNamestring""Optional custom class names for the outer container of the component.
containerStyleCSSProperties{}Inline styles to apply directly to the container element.
letterClassNamestring""Additional Tailwind or custom class names applied to each draggable letter.
onDragStart(char: string, index: number) => voidundefinedCallback function called when a letter drag starts. Receives the character and its index.
onDragEnd(char: string, index: number) => voidundefinedCallback function called when a letter drag ends. Receives the character and its index.

Made withby this guy