# Vizyble — full reference
> Turn your headline into live art that moves when visitors do: letters made of flowers that sway and follow the pointer. One script tag, free to start.
Vizyble makes live text effects for websites. It turns a headline, name or logo into letters made of flowers that sway in a breeze, follow the visitor's pointer and can be dragged. You add it to any site (Webflow, Framer, WordPress, Next.js or plain HTML) with one deferred script tag, and a static image fallback is built in. The real text can stay in the page as a normal heading for search engines and screen readers. It's free with a small badge. AI coding agents can add it through Vizyble's hosted MCP server.
## Embedding
No key is needed: keyless embeds show a small Vizyble badge and get 200 fresh renders a day per site. Add `&key=YOUR_API_KEY` to the URLs to remove the image badge and raise the limit; sign in at https://vizyble.dev/docs for a free key. Plans: https://vizyble.dev/pricing.
### Live (recommended)
One element plus one deferred script (about 7 KB gzipped), loaded once per page. The flowers sway in a breeze and react to the pointer; the static image inside is the fallback.
```html
```
### Static image
For emails, READMEs and places where scripts can't run: one `![]()
` tag, returning a transparent WebP (or PNG).
```html
```
For a heading, keep the real text in the page for SEO and screen readers: put the word in a visually hidden span inside the `` and mark the image `aria-hidden="true"`.
## When not to use it
Not for body text, buttons, navigation or anything longer than 24 characters; it's for one short, memorable word or name.
## Flower styles
- `flower-1` Violet Cosmos: Bright violet petals; bold and playful. Good for landing pages and launches.
- `flower-2` Yellow Frangipani: Sunny yellow, five-petal flowers; warm and cheerful. Good for summer, food and events.
- `flower-3` Pink Daisy: Soft pink daisies; romantic and gentle. Good for weddings, beauty and wellness.
- `flower-4` Violet Bunch: Clusters of purple violets; rich and dense. Good for portfolios and logos.
- `flower-5` Tropical Leaves: Green tropical leaves; fresh and natural. Good for nature, travel and eco brands.
- `flower-6` Blue Bouquet: Dusty blue and cream bouquets; calm and elegant. Good for weddings and invitations.
## MCP server for AI agents
Endpoint: https://vizyble.dev/api/mcp (Streamable HTTP, no auth, read-only; nothing is stored). Docs: https://vizyble.dev/docs/mcp
### Claude Code
Run in your terminal:
```
claude mcp add --transport http vizyble https://vizyble.dev/api/mcp
```
### Cursor
Add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project):
```
{
"mcpServers": {
"vizyble": {
"url": "https://vizyble.dev/api/mcp"
}
}
}
```
### VS Code (GitHub Copilot)
Add to .vscode/mcp.json:
```
{
"servers": {
"vizyble": {
"type": "http",
"url": "https://vizyble.dev/api/mcp"
}
}
}
```
### Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
```
{
"mcpServers": {
"vizyble": {
"serverUrl": "https://vizyble.dev/api/mcp"
}
}
}
```
### Gemini CLI
Add to ~/.gemini/settings.json:
```
{
"mcpServers": {
"vizyble": {
"httpUrl": "https://vizyble.dev/api/mcp"
}
}
}
```
### Claude Desktop and claude.ai
Settings → Connectors → Add custom connector, then paste the URL:
```
https://vizyble.dev/api/mcp
```
### Tools
- `create_text_effect`: Turns a short word or name (1–24 characters, shown in UPPERCASE) into a live text effect for a web page: letters made of flowers that sway and react to the visitor's pointer. Returns HTML to paste where the heading should go, plus one script tag to include once per page. Use it for hero headlines, names, logos and footer wordmarks on websites. Don't use it for body text, buttons, sentences longer than the limit, or apps without HTML; for emails and READMEs use embed: "image". No side effects and nothing is stored. Works without an API key; keyless embeds show a small Vizyble badge.
- `list_styles`: Lists the flower styles create_text_effect accepts, with colours, mood, best uses and a preview image for each. Call it before choosing a style to match the site's colours.
## Query parameters
Shared by the static image (`/api/v1`) and Live (`/api/v1/live`).
- `word` (default "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` (default 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` (default 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` (default 58; 10–90): Base size of each flower. Letter spacing auto-widens as this grows, so letters keep clearing their neighbors.
- `spacing` (default 15; 4–50): Distance between flowers along the letterforms.
- `jitter` (default 5; 0–12): Random offset applied to each flower for an organic (non-robotic) look.
- `strokeWidth` (default 0; 0–40): Widens the same perpendicular scatter jitter uses, so the letterforms read as a thicker band of flowers.
- `wordSize` (default 100; 40–250): Overall scale of the word as a percentage.
- `verticalStretch` (default 1.00; 1–2): Stretches letters taller without widening them.
- `letterSpacingScale` (default auto (from flowerSize); 1–10): Extra tracking between letters. Leave it out to let flowerSize drive it automatically.
- `lineSpacingScale` (default 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.
- `scale` (default 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.
- `format` (default 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.
- `bgcolor` (default none (transparent); any CSS color, or none/transparent): Fills the background instead of leaving it transparent — useful over busy page backgrounds.
- `fallback` (default (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` (default (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.
## Live element attributes
- `data-vizyble-live` (default (required); URL): The /api/v1/live URL. It takes the same query parameters as the image, except the image-only ones.
- `data-wind-speed` (default 1; 0–3): How fast the breeze sways the flowers. 0 keeps the air still; pointer and scroll gusts still move them.
- `data-butterflies` (default 0; 0–8): Butterflies fluttering around the word, in front of and behind the letters.
- `data-max-height` (default none; pixels): Largest height of the word. It shrinks to fit and stays centered; otherwise it fills the element's width.
- `aria-label` (default 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.
## FAQ
### What is Vizyble?
Vizyble makes live text effects for websites. It turns your headline, name or logo into letters made of flowers that sway, follow the pointer and can be dragged. You add it with one script tag, and a static image fallback is built in. There's also an image-only version for emails and places where scripts can't run.
### Who is Vizyble for?
People building a landing page, portfolio, launch page or event site who want one memorable headline without hiring a designer: developers and vibe coders first, plus couples and planners making wedding and event websites. AI coding agents can add it too, through the MCP server.
### Is Vizyble free to use?
Yes. You can embed live words and static images with no sign-up; they carry a small Vizyble badge and each site gets 200 fresh renders a day. A free API key removes the badge from images and raises your limit. A Pro plan (badge-free live words, higher limits) is coming; see the pricing page to join the waitlist. Existing free usage won't be broken without notice.
### Do I need an API key to try it?
No. Snippets work without a key: type a word on the homepage, copy the code and paste it into your site. Keyless embeds show a small badge and get 200 fresh renders a day per site. For no badge on images and a higher limit, sign in with Google and a free key is created automatically.
### How does embedding work? Do I need to install anything?
Nothing to install and no build step. The snippet is an HTML element plus one small deferred script tag. The script turns the element into the live word, and the static image inside it shows if scripts are blocked. If you'd rather not add any JavaScript, use the image-only snippet: a single ![]()
tag.
### How is Vizyble different from a GIF, video or animated SVG?
A GIF or video is a fixed recording: it plays the same way for everyone, is heavy to load, and search engines can't read the words in it. A Vizyble word is live: it reacts to the pointer and touch, its letters can be dragged, and the heading snippet keeps your real text in the page. Compared with drawing an animated SVG or Lottie file yourself, you type the word, pick a flower and paste one snippet; no design tool needed.
### Will it slow down my site?
The script is about 7 KB gzipped and loads with defer, after your page. Each word also loads a small layout file, its flower image and a light placeholder image (about 30 KB): about 48 KB in total, all cached after the first visit. The snippet reserves the word's shape, so nothing on the page jumps as it loads. The animation pauses when the word is off screen or the tab is hidden, and stays still for visitors who prefer reduced motion.
### Does it hurt SEO or accessibility?
No, if you use the heading snippet. It keeps your real text in the page as a normal heading, so search engines and screen readers read the words, while visitors see the live effect. Motion stops for visitors who prefer reduced motion.
### Will the flowers look identical every time I load the image?
The layout and style stay consistent, but flower placement includes a small random jitter for an organic, hand-placed look rather than a robotic grid. That means two requests with identical parameters won't be pixel-identical, though they'll look the same at a glance.
### Can I use a Vizyble image as an SEO-friendly or ?
Yes. The embed builder's "As a heading" snippet wraps the word in a heading tag with the real text kept as visually-hidden text in the page, while the artwork is hidden from screen readers. Search engines and screen readers see the actual heading text; sighted visitors see the flower artwork, so you don't lose that heading's SEO weight.
### What are the rate limits?
Without a key, each site gets 200 fresh renders a day; repeat views of the same word are served from cache and don't count. With a free API key, the limit is 60 requests per minute per key. Requests with a wrong key are limited tightly to discourage key-guessing. Limits may change over time.
### What data do you store when I sign in?
Your name, email and avatar from your Google account, plus a one-way hash of your API key, a separately encrypted copy (so you can reveal it again later), a masked preview and when it was created. Rate limits use your IP address as a short-lived counter that expires within a day. See the Privacy Policy for the full breakdown.
### Do you store the words or images I generate?
No. Each request renders the image on the fly from the parameters you send and returns it directly; nothing is written to a database or disk afterward. The CDN caches the response so repeat views load fast.
### Can I use Vizyble commercially?
Yes. Words you make are yours to use anywhere, including commercial and client sites, as long as your usage follows the Terms of Service (no reselling the raw API as your own product, no abusing rate limits). Agencies that want custom objects or white-label use can get in touch.
### Can I customize the font, flower style, size, spacing, or colors?
Yes. The API accepts query parameters for font, flower style, flower size, spacing, jitter, word size, vertical stretch, letter spacing, a resolution multiplier for retina screens, and an optional background color (it's transparent by default). Colour comes from the flower style you pick. The builder at /docs lets you tune all of these visually and copies the snippet for you.
### What happens if I lose my API key?
Sign in and click "Reveal key" from the account menu to see it again. Only regenerate if you think the key's been exposed: that immediately invalidates the old one, so update any embeds still using it first. (Keys created before reveal shipped can't be revealed retroactively; regenerate once to enable it.)
### Can I embed this on any website?
Yes, on any site that lets you add HTML: Webflow, Framer, WordPress, Shopify, Next.js or plain HTML. Live words need the site to allow a script from vizyble.dev; where scripts aren't allowed (some email tools and site builders), use the image-only snippet.
### Is Vizyble production-ready? What uptime can I expect?
Vizyble is made and run by vikas, an independent developer, and is used in production by real sites. There's no formal SLA yet. Every live embed carries a static image fallback, so if the live script can't load, your page still shows the word.
### When shouldn't I use Vizyble?
For body text, buttons, navigation or anything longer than 24 characters; it's made for one short, memorable word or name. It's also not a fit when your site can't load any third-party script and you need motion, or when your brand needs exact custom lettering.
### Does Vizyble work with AI coding agents?
Yes. Vizyble has a hosted MCP server at /api/mcp. Claude Code, Cursor, VS Code and other MCP clients can call it to get a ready-to-paste snippet for your word. It's read-only and needs no key. Setup is on the MCP docs page.
### Why flowers? Can I use other shapes?
Flowers are where Vizyble started, not a permanent limit. Letters made of other objects are planned for future updates. If you want letters made of your own products, shapes or brand colours now, request a custom design on the custom designs page.
### Is Vizyble open source or self-hostable?
No. Vizyble is a hosted service. Static images can be downloaded and used anywhere; live words need the hosted script.
### Is Vizyble the same as Vizible?
Vizyble (vizyble.dev) is not related to Vizible, the VR presentation tool, or Vizibl, the supplier-collaboration platform.