Guide · Framer
Add a live animated heading to Framer
Framer's Embed component takes HTML, which is all a Vizyble word needs. Paste one snippet and your headline sways, follows the pointer and can be dragged.
<div data-vizyble-live="https://vizyble.dev/api/v1/live?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1" data-wind-speed="1.4" aria-label="HELLO"> <img src="https://vizyble.dev/api/v1?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&fallback=1" alt="HELLO" style="width:100%;height:auto"> </div> <script src="https://vizyble.dev/embed/vizyble-live.js" defer></script>
Works as-is, no sign-up: a small “Vizyble” badge and 200 fresh renders a day per site. More styles in the builder; plans on pricing.
Steps
Make your snippet
Type your word in the box above and copy the snippet. It works as it is, with no key or sign-up. For more styles, use the builder on the docs page.
Insert an Embed
From the Insert menu, add an Embed component where the word should go. Set its type to HTML and paste the snippet.
Size it
The word scales to the Embed's width and keeps its proportions. Set the width (Fill works well) and give the Embed enough height for the word, so there's no gap or cut-off.
Preview and publish
Check the word in Preview or on your published site, and adjust the Embed's height until it fits at each breakpoint.
Good to know
- The badge link opens in a new tab, so it never navigates visitors away from your Framer site.
- If your site sets a Content Security Policy, allow vizyble.dev in script-src, connect-src and img-src.