Cursor-Reactive Hero – Interactive Section

Bring your landing pages and portfolios to life with a smooth, cursor-reactive hero. Add depth, motion, and subtle parallax for a modern, immersive experience.

Resize the component frame to control the hero size. Width automatically fills the container.

✨ Key Features

Motion & Effects

• Cursor-reactive motion with adjustable intensity (Low / Medium / High)

• Touch-device friendly with static fallback

Layout & Typography

• 9 content position options (top-left, center, bottom-right, etc.)

• Independent text alignment (left, center, right)

• Adjustable spacing: title-subtitle gap & max width control

• Full font customization with extended controls (family, size, weight, line height)

• Precise control over text positioning and spacing

Visual Customization

• 5 image size modes: Cover, Contain, Original Size, Fit to Image, Custom

• Background options: Solid color, Linear gradient, Radial gradient

• Text color customization

• Optional hero image with subtle parallax

Technical

• Fully responsive & resizable

• No external dependencies

• Clean, production-ready code

Props

💡 Use Cases

• Landing pages for products, apps, or portfolios

• Personal portfolios and creative projects

• Marketing pages and promotional sites

• Experimental UI / motion studies