加载中…
创作者 · MotionSites
查看原始来源 ↗
Prompt
创建一个高端私人飞机落地页首屏区域,规格如下: 视频背景: 使用此确切的 CloudFront 视频 URL:https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4 视频应自动播放、静音、连续循环,并包含 playsInline 属性 视频使用 object-cover 覆盖整个视口(100vh) 导航栏: 左侧显示品牌名称“SkyElite”(text-2xl、font-semibold、text-gray-900) 桌面端菜单项(移动端隐藏,md:flex 时显示):开始、品牌故事、价格、优势、常见问题 导航链接使用 gray-900,并带有 hover:text-gray-700 transition 使用 Lucide React 图标(Menu/X)的移动端汉堡菜单按钮 移动端菜单以白色/95 不透明度背景、背景模糊、圆角和阴影的下拉菜单形式出现 最大宽度为 7xl,居中并使用 px-8 py-6 首屏内容(居中,使用 -mt-80 向上拉): 小号大写标签:“私人飞机”(text-sm、font-semibold、gray-600、tracking-wider、mb-4) 带重叠效果的两行大标题: 第 1 行:“高端。”(text-6xl md:text-7xl lg:text-8xl、font-normal、text-gray-500、leading-none、tracking-tighter) 第 2 行:“触手可及。”(相同字号,颜色:#202A36,使用负上边距 -12px 实现重叠) 副标题:“你的付出值得被认可。”(text-lg md:text-xl、gray-600、mb-6、max-w-2xl) 两个行动号召按钮(gap-4,居中): “探索”按钮:px-4 py-2、rounded-full、bg-gray-300、text-gray-800、font-medium、hover:bg-gray-400 “立即预订”按钮:px-4 py-2、rounded-full、白色文字、背景色 #202A36、悬停颜色 #1a2229,并带平滑过渡 字体排印: 使用 Inter 字体(从 Google Fonts 导入 400、500、600、700 字重) 通过 CSS 应用于整个 body 技术设置: React + TypeScript 使用 Tailwind CSS 设置样式 使用 Lucide React 提供图标 使用 useState hook 切换移动端菜单 全屏高度容器(h-screen) 响应式断点:移动优先、md、lg 所有过渡均使用 transition-colors 类 布局结构: 外层容器:min-h-screen、bg-gray-50 首屏区域:relative、h-screen、overflow-hidden 内容包装器:relative、h-full、flex flex-col 主内容区域:flex-1、flex items-center justify-center 整体应简洁、现代且高端,并具有流畅的交互效果。
适用模型与稳定度
建议模型
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词:「设计一个机构网站,把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型,然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集,请保存这条 🛒
Aceternity UI 的 AI Coding (UI) 案例“3D Animated Pin”——GoodCase.ai 上提供完整提示词与原始来源。
提示语
// 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…

提示语
// 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 "…