HoverClip

Navigation 15

About

Hover over the links above to see the smooth clip-path animation in action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HoverClip to your project and fits it to your theme.

Code

How HoverClip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HoverClip } from '@/components/ui/test'

export default function DemoOne() {
  return (
    <div className="bg-background text-foreground min-h-screen flex flex-col leading-tight font-mono items-center justify-center p-10">
      <h1 className="text-3xl font-bold mb-8">
        HoverClip Animation Demo
      </h1>

      {/* Container for hover links */}
      <div className="bg-background p-8 rounded-2xl shadow-xl">
        <HoverClip />
      </div>

      <p className="mt-8 text-foreground text-center max-w-md">
        Hover over the links above to see the smooth clip-path animation in action.
      </p>
    </div>
  )
}