Orbiting Circles icons stuck in center on Next.js 13 App Router

[marcospassos]

The Orbiting Circles component does not behave as expected when used with Next.js 13 App Router. The icons appear stuck in the center of the circle, and a server-client hydration mismatch warning is shown in the console.

This issue does not occur on Next.js 15.

Steps to Reproduce

1. Create a new project using Next.js 13 with the App Router.
2. Run the command to add the component.
3. Start the development server.

Expected Behavior
Icons should animate and orbit around the center as expected.

Actual Behavior

• Icons are frozen in the center.
• The following hydration warning appears in the console:

  Warning: Extra attributes from the server: cz-shortcut-listen
  

Console Stack Trace

Warning: Extra attributes from the server: cz-shortcut-listen Error Component Stack
    at body (<anonymous>)
    at html (<anonymous>)
    at RedirectErrorBoundary (redirect-boundary.js:72:9)
    ...
    at Root (app-index.js:142:11)

Environment

• Framework: Next.js v13 (App Router)
• OS: macOS

[Rwinkah]

Hi, tried it out in Next14 and Next15 and the same error still occurs

[itsarghyadas]

so the problem occurs as soon as you freshly install/add this component to you next's 13/14 app router project?

[Rwinkah]

Yes I tried upgrading the project to Next15 but it didn’t help. By the way only the production version is broken on my local host it works fine but when I try to host with vercel it’s broken.

[itsarghyadas]

Hey! I just tested it in a fresh Next.js 14/15 App Router project, directly installed via the CLI, and it seems to be working fine.

Please check if any other part of your code might be causing the issue. You could also try installing this component in a fresh Next.js project to see if the problem persists. Let me know how it goes!

[marcospassos]

I ran all my tests using a fresh project.

[itsarghyadas]

@marcospassos For better understanding, did you try installing it from the CLI or by copying it manually?

[dillionverma]

This looks potentially like an issue related to the colorzilla extension?

Does it work for you in incognito?

Haven't been able to reproduce locally when installing it fresh from cli @marcospassos

https://x.com/rauchg/status/1871268516508381412

[YasminGonc]

I had the same issue.

I removed the colorzilla extension, but the problem still occurs. The same issue happens in incognito mode as well.

[itsarghyadas]

We still haven't been able to reproduce the error locally making it difficult to give a solution. We are closing the issue for now. Feel free to open another issue if anyone faces this again.

[lubojanski]

Installing through CLI fixes the problem for me ( next 15 )

[jamesdawsonWD]

I just experienced the same thing.

There was a conflicting keyframe in my global.css from when I installed the V4 OrbitingCircles by accident and I manually removed it and missed this class. I am using tailwind v3.

After removing the .animate-orbit from my global css and keeping this in my tailwind config it started working for me.

animation: {
    orbit: "orbit calc(var(--duration)*1s) linear infinite",
}

Can also confirm that it only becomes a noticeable problem when you push to prod, the minification from tailwind causes the conflict.

Hope that helps someone.

[krishgandhi1806]

This issue is still occuring in nextjs 15

[krishgandhi1806]

This issue is still occuring in nextjs 15

Found the solution, just past this in @theme inline{} in globals.css:

--animate-orbit: orbit calc(var(--duration) * 1s) linear infinite;

@keyframes orbit { 0% { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); } 100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); } }