Landing
漂浮球体 Hero
带有漂浮玻璃球体的 hero,球体响应鼠标移动并带模糊重叠。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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
柔和、有氛围的 hero,使用玻璃球体和光标响应动效营造高级空间感。
Features
- 3-4 个模糊漂浮球体
- 半透明渐变表面
- 缓慢漂移动画
- 鼠标响应视差
- 居中标题 + CTA
- 玻璃面板背景
Usage
适用于 AI 产品、设计工具或希望留下平静但高端第一印象的作品集。
Customization
修改 prompt 以:
- 球体随时间改变颜色
- 让球体轻轻碰撞/反弹
- 添加噪点纹理叠加
- 使用不同形状(椭圆、圆角方形)