Hero Cursor Cards

A hero section with floating cursor pointers, following cursor effect, three overlapping cards in diamond layout, and logo cloud.

Overview

A dynamic hero section featuring animated cursor pointers, interactive following cursor, and a visually striking diamond-layout card showcase. Designed for SaaS platforms and collaboration tools to demonstrate real-time team features.

Key Features:

Floating cursor pointers with name badges (Editing, Commenting, Assigning)
Interactive following cursor that tracks mouse movement
Three overlapping cards in diamond arrangement
Corner cross decorations and border lines on cards
Dot pattern accents beside CTA buttons
Logo cloud section with responsive grid
Dark mode support
Responsive layout

Installation


pnpm dlx shadcn@latest add @ruixenui-pro/hero-cursor-cards

Introduction Hero Dot Pattern

On This Page

import { HeroCursorCards } from "@/components/ui/hero-cursor-cards"
 
export default function Example() {
  return (
    <HeroCursorCards
      title="Ship Products Faster with Intelligent Workflows"
      subtitle="One platform for your entire team to plan, build, and iterate."
      primaryCtaText="Get Started Free"
      primaryCtaHref="/signup"
      showFollowingCursor={true}
    />
  )
}

Prop	Type	Default	Description
`badgeText`	`string`	`"Now available for Enterprise"`	Badge announcement text
`badgeLink`	`string`	`"#"`	Badge link URL
`badgeLinkText`	`string`	`"Learn more"`	Badge link display text
`title`	`string`	`"Ship Products Faster with Intelligent Workflows"`	Hero heading text
`titleMobile`	`string`	Same as title without "Ship "	Mobile-specific title
`subtitle`	`string`	Default description	Hero subtitle text
`primaryCtaText`	`string`	`"Get Started Free"`	Primary CTA button text
`primaryCtaHref`	`string`	`"#"`	Primary CTA button link
`secondaryCtaText`	`string`	`"Request a Demo"`	Secondary CTA button text
`secondaryCtaHref`	`string`	`"#"`	Secondary CTA button link
`cursors`	`HeroCursorCardsCursor[]`	3 default cursors	Floating cursor configurations
`logos`	`HeroCursorCardsLogo[]`	8 default logos	Logo cloud images
`logoCloudTitle`	`string`	`"Powering workflows at industry leaders"`	Logo cloud section title
`logoCloudLinkText`	`string`	`"See customer stories"`	Logo cloud link text
`logoCloudLinkHref`	`string`	`"#"`	Logo cloud link URL
`showFollowingCursor`	`boolean`	`true`	Enable/disable following cursor
`className`	`string`	`undefined`	Additional CSS classes

interface HeroCursorCardsCursor {
  name: string      // Label shown on cursor badge
  color: string     // Hex color for cursor and badge
  position: "top-center" | "left" | "right"
  floatDelay?: number  // Animation delay in seconds
}

Hero Cursor Cards

Overview

Installation

Usage

Props

Cursor Configuration

Logo Configuration