Is Good Vibes free to use?

Yes. Good Vibes is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Good Vibes?

One command: npx shadcn@latest add https://aicanvas.me/r/good-vibes.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Good Vibes for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Good Vibes built with?

Good Vibes is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Good Vibes?

Common uses include Hero section, Portfolio, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Good Vibes with AI?

Yes. Good Vibes ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Good VibesInteractive typography where letters scale 2x and become bold on hover.

TypographyHero sectionPortfolioMarketing site

GOOD VIBES

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/good-vibes

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

This component uses Science Gothic. Add it to your project:

Optional

<link href="https://fonts.googleapis.com/css2?family=Science+Gothic:wght@400;500;600;700;800&display=swap" rel="stylesheet">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Good Vibes

Good Vibes is interactive typography where each letter scales up to twice its size and snaps to bold the moment your cursor passes over it. The combination of size and weight together creates a deliberate, friendly emphasis rather than the more chaotic per-letter wobble effects. Motion drives the per-letter transitions with snappy springs. It is a strong pick for hero headlines, portfolio names, friendly marketing-site banners, and any moment that wants warmth without being twee.

Built with

MotionTailwind CSS

Frequently asked questions

Is Good Vibes free to use?: Yes. Good Vibes is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Good Vibes?: One command: npx shadcn@latest add https://aicanvas.me/r/good-vibes.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Good Vibes for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Good Vibes built with?: Good Vibes is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Good Vibes?: Common uses include Hero section, Portfolio, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Good Vibes with AI?: Yes. Good Vibes ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.