Lumina

Prompt

使用 Tailwind CSS v4、用于动画的 `motion/react` 库和用于图标的 `lucide-react` 创建一个 React 前端。我想构建一个拥有沉浸式视频背景和高度风格化“液态玻璃”页脚的页面。

请严格遵循以下规范：

1. 全局 CSS 与字体（`index.css`）：
将以下完全一致的 `@font-face` 添加到 CSS 文件中，并将其设置为根 Tailwind `--font-sans`：
@font-face {
    font-family: "Helvetica Regular";
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg");
}

2. “液态玻璃”CSS：
添加以下完全一致的自定义 CSS，以实现液态玻璃边框效果：
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

3. 主应用结构（`App.tsx`）：
- 使用带有 `relative w-full min-h-[115vh] overflow-x-hidden flex flex-col items-center font-sans selection:bg-white/20 selection:text-white` 的 `<main>` 包裹页面。
- 添加一个固定在背景中的 `<video>` 元素（`fixed inset-0 w-full h-full object-cover z-[0]`），使其自动播放、循环播放并静音。
- 视频的 `src` 必须完全采用此 CloudFront URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_114316_1c7889ad-2885-410e-b493-98119fee0ddb.mp4`

4. 内容容器：
在视频之上（`z-10`）添加一个 `max-w-7xl` 容器，用于容纳顶部 CTA（可以使用 CTA 占位内容），并将页脚推至底部。

5. 页脚（`motion.footer`）：
- 使用以下完全一致的 Framer Motion 属性作为起始设置：`initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}`
- 为其添加以下类：`liquid-glass w-full rounded-3xl p-6 md:p-10 text-white/70 mt-32 md:mt-64`。

6. 页脚布局——顶部网格：
- 一个 12 列网格（`grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10`）。
- 第一列（md:col-span-5）：
  - 一个 SVG Logo `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" fill="currentColor"><path d="M 4.688 136 C 68.373 136 120 187.627 120 251.312 C 120 252.883 119.967 254.445 119.905 256 L 0 256 L 0 136.096 C 1.555 136.034 3.117 136 4.688 136 Z M 251.312 136 C 252.883 136 254.445 136.034 256 136.096 L 256 256 L 136.095 256 C 136.032 254.438 136.001 252.875 136 251.312 C 136 187.627 187.627 136 251.312 136 Z M 119.905 0 C 119.967 1.555 120 3.117 120 4.688 C 120 68.373 68.373 120 4.687 120 C 3.117 120 1.555 119.967 0 119.905 L 0 0 Z M 256 119.905 C 254.445 119.967 252.883 120 251.312 120 C 187.627 120 136 68.373 136 4.687 C 136 3.117 136.033 1.555 136.095 0 L 256 0 Z" /></svg>`，旁边配有文字“LUMINA”（text-xl font-medium）。
  - 下方添加说明：“Lumina 免费为所有人提供关于全球事件和宇宙奇观的优质清晰信息。”（`text-sm leading-relaxed max-w-sm`）。

7. 页脚布局——链接部分（md:col-span-7）：
创建一个三列网格，其中包含以下列表：
- 探索：实验室与工作坊、深度探索系列、全球社群、资源库、未来路线图
- 使命：起源故事、共同体、新闻中心、加入团队
- 礼宾服务：联系我们、隐私法律条款、用户协议、举报问题
（标题应使用 `text-sm uppercase tracking-wider text-white font-medium mb-4`，链接应使用 `text-xs space-y-2 hover:text-white transition-colors`）。

8. 页脚布局——底部栏：
- 创建一条顶部边框（`pt-6 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4`）。
- 左侧：`<p className="text-[10px] uppercase tracking-widest opacity-50">由 @GotInGeorgiG 策划</p>`
- 右侧：一个标签 `<span className="text-[10px] uppercase tracking-widest opacity-50">加入旅程：</span>`，旁边是一排水平排列的 `lucide-react` 图标（大小为 16）：Music2、Facebook、Twitter、Youtube 和 Instagram。将每个图标包裹在带有 `opacity-70 hover:opacity-100 transition-colors hover:text-white` 的 `<a>` 中。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

AI 编程(UI)X

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

复测未通过

查看 Case →

AI 编程(UI)Aceternity UI

3D 动画图钉

Aceternity UI 的 AI Coding (UI) 案例“3D Animated Pin”——GoodCase.ai 上提供完整提示词与原始来源。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)Aceternity UI

3D 地球

Aceternity UI 的 AI 编程（UI）案例“3D 地球”——完整提示词和原始来源见 GoodCase.ai。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

Prompt

使用 Tailwind CSS v4、用于动画的 `motion/react` 库和用于图标的 `lucide-react` 创建一个 React 前端。我想构建一个拥有沉浸式视频背景和高度风格化“液态玻璃”页脚的页面。

请严格遵循以下规范：

1. 全局 CSS 与字体（`index.css`）：
将以下完全一致的 `@font-face` 添加到 CSS 文件中，并将其设置为根 Tailwind `--font-sans`：
@font-face {
    font-family: "Helvetica Regular";
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg");
}

2. “液态玻璃”CSS：
添加以下完全一致的自定义 CSS，以实现液态玻璃边框效果：
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

3. 主应用结构（`App.tsx`）：
- 使用带有 `relative w-full min-h-[115vh] overflow-x-hidden flex flex-col items-center font-sans selection:bg-white/20 selection:text-white` 的 `<main>` 包裹页面。
- 添加一个固定在背景中的 `<video>` 元素（`fixed inset-0 w-full h-full object-cover z-[0]`），使其自动播放、循环播放并静音。
- 视频的 `src` 必须完全采用此 CloudFront URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_114316_1c7889ad-2885-410e-b493-98119fee0ddb.mp4`

4. 内容容器：
在视频之上（`z-10`）添加一个 `max-w-7xl` 容器，用于容纳顶部 CTA（可以使用 CTA 占位内容），并将页脚推至底部。

5. 页脚（`motion.footer`）：
- 使用以下完全一致的 Framer Motion 属性作为起始设置：`initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}`
- 为其添加以下类：`liquid-glass w-full rounded-3xl p-6 md:p-10 text-white/70 mt-32 md:mt-64`。

6. 页脚布局——顶部网格：
- 一个 12 列网格（`grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10`）。
- 第一列（md:col-span-5）：
  - 一个 SVG Logo `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" fill="currentColor"><path d="M 4.688 136 C 68.373 136 120 187.627 120 251.312 C 120 252.883 119.967 254.445 119.905 256 L 0 256 L 0 136.096 C 1.555 136.034 3.117 136 4.688 136 Z M 251.312 136 C 252.883 136 254.445 136.034 256 136.096 L 256 256 L 136.095 256 C 136.032 254.438 136.001 252.875 136 251.312 C 136 187.627 187.627 136 251.312 136 Z M 119.905 0 C 119.967 1.555 120 3.117 120 4.688 C 120 68.373 68.373 120 4.687 120 C 3.117 120 1.555 119.967 0 119.905 L 0 0 Z M 256 119.905 C 254.445 119.967 252.883 120 251.312 120 C 187.627 120 136 68.373 136 4.687 C 136 3.117 136.033 1.555 136.095 0 L 256 0 Z" /></svg>`，旁边配有文字“LUMINA”（text-xl font-medium）。
  - 下方添加说明：“Lumina 免费为所有人提供关于全球事件和宇宙奇观的优质清晰信息。”（`text-sm leading-relaxed max-w-sm`）。

7. 页脚布局——链接部分（md:col-span-7）：
创建一个三列网格，其中包含以下列表：
- 探索：实验室与工作坊、深度探索系列、全球社群、资源库、未来路线图
- 使命：起源故事、共同体、新闻中心、加入团队
- 礼宾服务：联系我们、隐私法律条款、用户协议、举报问题
（标题应使用 `text-sm uppercase tracking-wider text-white font-medium mb-4`，链接应使用 `text-xs space-y-2 hover:text-white transition-colors`）。

8. 页脚布局——底部栏：
- 创建一条顶部边框（`pt-6 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4`）。
- 左侧：`<p className="text-[10px] uppercase tracking-widest opacity-50">由 @GotInGeorgiG 策划</p>`
- 右侧：一个标签 `<span className="text-[10px] uppercase tracking-widest opacity-50">加入旅程：</span>`，旁边是一排水平排列的 `lucide-react` 图标（大小为 16）：Music2、Facebook、Twitter、Youtube 和 Instagram。将每个图标包裹在带有 `opacity-70 hover:opacity-100 transition-colors hover:text-white` 的 `<a>` 中。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型