Docs · Builder
Add a live text effect to your site
A live text effect visitors can play with. It moves in a breeze, follows the pointer and lets people drag the flowers around — from one <script> tag. Configure the look below and copy the snippet.
Made to be touched
Moves with the pointer and scroll; every flower can be dragged.
Safe by default
Pauses off screen and stays still for reduced-motion visitors.
Fallback built in
The snippet carries a static image for when scripts can't run.
The word moves: flowers sway, follow the pointer and can be dragged. One small script.
Flower
Preview
Hover, scroll or drag the flowers
Motion pauses when the word is off screen or the tab is hidden, and stays still for visitors who prefer reduced motion.
Embed snippet
<div data-vizyble-live="/api/v1/live?word=VIZYBLE&font=font-2&flowerSize=42&spacing=7&jitter=8&wordSize=46&verticalStretch=2&letterSpacingScale=3.7" data-butterflies="2" aria-label="VIZYBLE" > <img src="/api/v1?word=VIZYBLE&font=font-2&flowerSize=42&spacing=7&jitter=8&wordSize=46&verticalStretch=2&letterSpacingScale=3.7&fallback=1" alt="VIZYBLE" style="width:100%;height:auto"> </div> <script src="/embed/vizyble-live.js" defer></script>
The word fills the width of its container. Add the <script> once per page — it brings every data-vizyble-live element to life, so more words need only more elements. The <img> inside is the static fallback: visitors see it until the live word is ready, or if scripts are blocked.
The live word shows a small “Vizyble” badge on the free plan. Pro removes it.
Works as-is, no key needed: keyless embeds carry a small “Vizyble” badge and get 200 fresh renders a day per site. Reuse the same URL with a different word to keep the look consistent across pages.
Sign in for a free key (below, or from the menu top right) to remove the image badge and raise the limit. Once you reveal it, it's added to these snippets for you.
Get an API key
Platform guides
Use with AI agents
Vizyble has a hosted MCP server, so Claude Code, Cursor, VS Code and other agents can add a live headline to the site they're building. Read-only, no install, no key. Add it with:
claude mcp add --transport http vizyble https://vizyble.dev/api/mcp
Or add it to any client's MCP config:
{
"mcpServers": {
"vizyble": {
"url": "https://vizyble.dev/api/mcp"
}
}
}Live embed attributes
Set on the element that holds the live word. Load /embed/vizyble-live.js once per page and it brings every such element to life.
| Name | Default | Range | Description |
|---|---|---|---|
| data-vizyble-live | (required) | URL | The /api/v1/live URL. It takes the same query parameters as the image, except the image-only ones. |
| data-wind-speed | 1 | 0–3 | How fast the breeze sways the flowers. 0 keeps the air still; pointer and scroll gusts still move them. |
| data-butterflies | 0 | 0–8 | Butterflies fluttering around the word, in front of and behind the letters. |
| data-max-height | none | pixels | Largest height of the word. It shrinks to fit and stays centered; otherwise it fills the element's width. |
| aria-label | none | text | What screen readers announce, usually the word. Leave it out when the text is already on the page, like in the heading snippet. |
Query parameters
Shared by Live (/api/v1/live) and its static fallback (/api/v1), so one look works in both.
| Name | Default | Range | Description |
|---|---|---|---|
| word | "Vizyble" | up to 24 chars | The text to render. Omit it (or leave it blank) and the endpoint renders its own name — handy as a working example. |
| font | font-1 | font-1 / font-2 | Which lettering style to use — see the Font picker's previews. Unknown values fall back to the default. |
| object | flower-1 | flower-1 / flower-2 / flower-3 / flower-4 / flower-5 / flower-6 | What the letters are made of: flower-1 Violet Cosmos, flower-2 Yellow Frangipani, flower-3 Pink Daisy, flower-4 Violet Bunch, flower-5 Tropical Leaves, flower-6 Blue Bouquet. Unknown values fall back to the default. The earlier name, flower, still works. |
| flowerSize | 58 | 10–90 | Base size of each flower. Letter spacing auto-widens as this grows, so letters keep clearing their neighbors. |
| spacing | 15 | 4–50 | Distance between flowers along the letterforms. |
| jitter | 5 | 0–12 | Random offset applied to each flower for an organic (non-robotic) look. |
| strokeWidth | 0 | 0–40 | Widens the same perpendicular scatter jitter uses, so the letterforms read as a thicker band of flowers. |
| wordSize | 100 | 40–250 | Overall scale of the word as a percentage. |
| verticalStretch | 1.00 | 1–2 | Stretches letters taller without widening them. |
| letterSpacingScale | auto (from flowerSize) | 1–10 | Extra tracking between letters. Leave it out to let flowerSize drive it automatically. |
| lineSpacingScale | 1 | 0.5–3 | Multiplier on the gap between wrapped rows. Only visible once a multi-word `word` actually wraps onto more than one line. |
| scaleImage only | 1 | 1–3 | Pixel density multiplier. Layout, flower count and spacing are unchanged — only the resolution goes up. Use 2 when the image is laid out at a fixed size, so browsers and high-DPI screens aren't downscaling a 1x render. |
| formatImage only | webp | webp / png | Image format. webp keeps the transparent background in a much smaller file, so it loads faster. Use png for emails and newsletters — desktop Outlook can't display WebP. |
| bgcolorImage only | none (transparent) | any CSS color, or none/transparent | Fills the background instead of leaving it transparent — useful over busy page backgrounds. |
| fallbackImage only | (off) | 1 | Set to 1 for the placeholder inside a live snippet: half resolution at lower quality, about a quarter of the download. It shows for a moment before the live word, or if scripts can't run. Leave it out for images shown on their own. |
| key | (none) | — | Optional. Without it, the word carries a small Vizyble badge and each site gets 200 fresh renders a day. Your free API key (sign in below or from the account menu) removes the image badge and raises the limit. Pro (coming soon) will also remove the Live badge. A wrong key gets a 401. |