Guide · Next.js
Add a live animated heading to Next.js
No package to install. Load the Vizyble script once in your root layout, then use the word anywhere in your components, including on pages reached by client-side navigation.
<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">
{/* eslint-disable-next-line @next/next/no-img-element -- static fallback until the live word is ready */}
<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>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
Load the script once
Add the script to your root layout with next/script, as shown below. It brings every Vizyble element to life, including ones added later.
Add the word
Type your word in the box above, copy the JSX and put it in any component. It works in Server Components too: it's plain markup.
Changing words
If the word comes from props or state, give the element a key based on the word (key={word}), so React swaps in a new element when it changes.
app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script src="https://vizyble.dev/embed/vizyble-live.js" strategy="afterInteractive" />
</body>
</html>
);
}Good to know
- The same approach works in any React app: add the script tag to your HTML once and render the element in JSX.
- If your site sets a Content Security Policy, allow vizyble.dev in script-src, connect-src and img-src.
Questions
Yes. The script watches the page for new Vizyble elements, so words on pages reached by client-side navigation come to life too.
Yes, if you use the heading version. In the builder on the docs page, choose "As a heading": the snippet keeps the real text in the page, hidden visually, and hides the artwork from screen readers.
The script is about 7 KB gzipped and loads with defer, so it never blocks the page. The animation pauses when the word is off screen or the tab is hidden, and stays still for visitors who prefer reduced motion.
Sign in for a free API key to remove the badge from the image. The live word keeps a small badge on the free plan; Pro (coming soon) removes it. Join the waitlist on the pricing page.