MMridha UI

Quiet Orbit Hero

A full-viewport hero section featuring concentric orbital rings animated with Motion. Clean typographic hierarchy, CTA buttons, and a subtle grid background. Designed for portfolios, SaaS products, and agency landing pages.

ReactNext.jsClient ComponentReactMotionCSS
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/quiet-orbit-hero

Registry endpoint: https://ui.mridha.net/r/quiet-orbit-hero.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/quiet-orbit-hero.tsx

3. Import the component

import { QuietOrbitHero } from "@/components/ui/quiet-orbit-hero";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <QuietOrbitHero />
    </main>
  );
}

Dependencies

motion

Accessibility

  • Orbital animations are decorative and use aria-hidden='true'.
  • Hero text maintains readable contrast without the animation.
  • Animation is disabled when prefers-reduced-motion is active.

Performance

  • Uses CSS transform-based animation for GPU-accelerated rendering.
  • The component is a client component due to motion usage.