Floating Orbs Hero

Create a dark hero section with 3-4 large floating glass orbs. The orbs should be blurred circles with translucent gradients, slowly drifting in place. On mouse move, they should shift slightly toward or away from the cursor to create depth. Place a headline and CTA in the center with a subtle glass panel behind them. Use CSS blur, opacity, and transform. Use Tailwind CSS. No images.

创建一个深色 hero 区域，包含 3-4 个漂浮玻璃球体。球体应为半透明渐变的模糊圆形，缓慢漂移。鼠标移动时，它们应轻微向光标方向移动或远离，营造深度。在中央放置标题和 CTA，后方有微妙玻璃面板。使用 CSS blur、opacity 和 transform。使用 Tailwind CSS。无图片。

Overview

A soft, atmospheric hero that uses glass orbs and cursor-reactive motion to create a premium, spatial feel.

Features

• 3-4 blurred floating orbs
• Translucent gradient surfaces
• Slow drift animation
• Mouse-reactive parallax
• Centered headline + CTA
• Glass panel backdrop

Usage

Use for AI products, design tools, or portfolios that want a calm but premium first impression.

Customization

Modify the prompt to:

• Add color-changing orbs over time
• Make orbs collide/bounce gently
• Add a noise texture overlay
• Use different shapes (ovals, rounded squares)