Basic widget
Text Path
Short text along a curve: a circle, an arc, a wave or your own path. Perfect for round badges.
Build it with your AI
“Add a circular badge with the words “Built with AI · Edited by hand” that slowly spins.”
Live demo
See it working
Settings
21 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
10 settings
Text path
Text
Path
Path data
View box
Link
Text alignment
Starting point
Reverse direction
Text position
Show the path
Design
11 settings
Text
Typography
Color
Path
Color
Width
Dashed
Shape
Size
Alignment
Rotation
Spin continuously
Seconds per turn
Spin counter-clockwise
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Text Path settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a circular badge with the words “Built with AI · Edited by hand” that slowly spins.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "text-path",
"settings": {
"text": "Built with AI • Edited by hand • Built with AI • Edited by hand • ",
"path": "circle",
"spin": true,
"width": { "size": 200, "unit": "px" },
"align": "center",
"typography": { "preset": "eyebrow", "size": "15px" }
}
}More basic widgets
Works well with
Alert
A friendly notice for news, warnings and success messages.
Blockquote
A quote that stands out, with its author and source.
Button
A link that looks like a button, in your Design System’s styles: primary, secondary, outline, ghost or link.
Counter
A number that counts up when it scrolls into view — and stays readable for search engines.
Divider
A line between sections, plain or with a word or icon in the middle.
Heading
Titles from h1 to h6, sized by your text styles, with a second font for words in italics.