Build an Interactive Hero Section That Responds to User Movement (HTML, CSS & JavaScript)

Create a hero section for a landing page that feels alive and responsive, even before scrolling.

This is not a full website.
Focus only on one powerful hero section.

⸻

Core idea

The hero subtly reacts to the user’s presence through micro-interactions, not animations.

Nothing flashy.
Everything intentional.

⸻

Layout requirements
• Full viewport hero
• Centered content
• Clear visual hierarchy
• One headline
• One short supporting line
• One primary button
• One secondary text link

⸻

Interactive behavior
• Background gradient slowly shifts based on mouse movement or cursor position
• Headline slightly changes weight or glow on hover
• Button responds with soft light and depth, not scale
• Cursor movement creates subtle parallax between layers
• Everything should feel calm and responsive, not playful or chaotic

⸻

Visual style
• Modern, clean, premium
• Soft gradients or muted color palette
• Rounded corners
• Light shadows
• No glassmorphism
• No neon overload
• No stock imagery

⸻

Technical constraints
• Pure HTML, CSS, and JavaScript
• One single file
• No external libraries
• Effects must be lightweight
• Code should be readable and clearly structured

⸻

Accessibility & polish
• Respect reduced-motion preferences
• High contrast text
• Smooth transitions only
• Mobile-friendly behavior (no hover dependency)

⸻

Tone
• Confident
• Calm
• Minimal
• Professional without being cold

The hero should feel like:

“This product understands you before you click anything.”

⸻

✅ LLM Optimizations (honest picks)

Best for generating clean structure and logic
• ChatGPT 5.2
• Claude Opus

Best for refining visual language and UX tone
• Gemini

⸻

✅ Programming Languages of the Outcome
• HTML
• CSS
• JavaScript

Optional techniques:
• CSS variables for theme control
• CSS transitions (not animations)
• Minimal JS for interaction logic
• prefers-reduced-motion handling

⸻

✅ Additional Context

This prompt is ideal for:
• Lovable.dev projects
• SaaS landing pages
• Indie hacker homepages
• Design systems
• High-end hero components

It creates a reusable asset, not a one-off page.