OrbitKinetic text animation arranged in a circle.
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/orbitFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses Anton. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=Anton: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.
About Orbit
Orbit arranges a phrase into a circular layout that rotates continuously, with each letter pushing outward radially as you hover so the entire ring breathes. The whole effect runs on CSS transforms with no Motion runtime, so the bundle stays tiny and the animation runs cool even on weaker devices. Use it for hero typographic features, about-page sections that want a sense of motion, and type specimens that want to show off rhythm rather than just rendering.
Built with
Frequently asked questions
- Is Orbit free to use?
- Yes. Orbit 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 Orbit?
- One command: npx shadcn@latest add https://aicanvas.me/r/orbit.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Orbit 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 Orbit built with?
- Orbit is built with React and TypeScript, using Tailwind CSS. It ships with both light and dark styling.
- Where would I use Orbit?
- Common uses include Hero section, About page, and Type specimen. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Orbit with AI?
- Yes. Orbit 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.
AI Canvas