Skip to content
Pinky UI

heroes

Magnetic CTA Hero

A production Hero with one tactile primary action and optional local light.

  • heroes
  • hero
  • cta
  • conversion

Live preview

Pinky workshop

Motion people can trust.

Read guide

Quick usage

usage
import { MagneticCtaHero } from "@pinky-ui/experiences";

<MagneticCtaHero title="Ship softer interfaces" primaryAction={{ label: "Explore", href: "/components" }} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

spotlight={false} disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
primaryActionHeroAction—The single tactile anchor or button action.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • Uses the shared pointer source through existing primitives.
  • Only the primary CTA moves and travel is capped.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Production landing pages with one clear CTA

When not to use

  • Dense action groups or destructive workflows

Skill

Purpose

MagneticCtaHero is a production-oriented Hero with strong type, one tactile primary action and an optional local spotlight. Use it when the conversion action deserves a subtle physical cue.

Keep magnetic travel under roughly 8px and use one primary CTA. Avoid applying magnetism to both actions, using it on dangerous controls, or adding cursor trails around it. The content should still work as a completely static Hero.

The CTA remains a real anchor or button with visible focus and a generous hit area. Touch and reduced motion remove pointer response. Prefer a restrained background and concise copy so the tactile action remains the signature interaction.

Open this skill on its own page