Add animated components to Next.js without turning your pages into Client Components

Most animated components need the browser: pointer positions, requestAnimationFrame, ResizeObserver or an animation library that runs on the client. In the App Router that means the component itself must be a Client Component. It does not mean the page that renders it has to be one.

A common mistake is adding "use client" to the top of a page because one button inside it animates. Everything that page imports then ships to the browser and hydrates, including content that could have been rendered once on the server and cached. The fix is to move the directive down to the smallest component that genuinely needs it.

Put the boundary on the leaf

Keep the animated component in its own file that starts with "use client", and import it from a Server Component. Server Components can render Client Components and pass them serialisable props or other server-rendered elements as children.

// app/(marketing)/page.tsx — stays a Server Component
import { MagneticButton } from "@/components/magnetic-button";

export default async function Page() {
  const plan = await getFeaturedPlan(); // runs on the server, can be cached
  return (
    <section>
      <h1>{plan.headline}</h1>
      <MagneticButton>Start with {plan.name}</MagneticButton>
    </section>
  );
}

Pass server content through children

Wrappers such as a tilt card only need to own the transform. Render the card's image, title and price on the server and pass them in as children. The wrapper hydrates; its contents arrive as already-rendered HTML.

Avoid hydration mismatches

• Never read window, matchMedia or element sizes during render. Do it in an effect or event handler.
• Start animated values at their resting state so the server HTML and first client render match.
• Respect prefers-reduced-motion by skipping the effect rather than rendering different markup.
• Reserve the component's space with real dimensions so animation never causes layout shift.

Let your coding agent apply the same rule

Every uiux.ink integration prompt tells the receiving agent to inspect your existing rendering strategy and keep the client boundary at the component. If you integrate by component ID through MCP, the uiux.ink Skill carries the same instruction, so the agent adapts to your architecture instead of rewriting it.