Neuralyn

Prompt

为“Neuralyn”——一款分析仪表板 SaaS——创建一个深色落地页。使用 React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui。

字体
正文/UI 使用通过 @fontsource/inter 引入的 Inter（400、500、600、700）
斜体强调词使用通过 @fontsource/instrument-serif 引入的 Instrument Serif（400、400-italic）

颜色主题（全部使用 HSL，默认在 :root 中启用深色模式）
背景：0 0% 0%（纯黑）
前景：0 0% 100%（纯白）
弱化前景：0 0% 65%
卡片：0 0% 5%
边框：0 0% 20%
首屏副标题：210 17% 95%

页面结构
Section 1：首屏（占满视口高度，overflow-hidden）

导航栏——横向布局，内边距 px-8 md:px-28 py-4：

左侧：Logo 图片 + “Neuralyn”文字（text-xl font-bold tracking-tight）+ 导航链接（Home、带 ChevronDown 图标的 Services、Reviews、Contact us）——移动端隐藏链接，链接之间 gap-1，Logo 与链接之间 gap-12 md:gap-20
右侧：“Sign In”按钮——纯白背景（bg-foreground）、黑色文字（text-background）、rounded-lg text-sm font-semibold，悬停时进行 opacity transition

首屏内容——居中纵向排列，mt-16 md:mt-20 px-4：

标签胶囊：一个“liquid glass”风格的胶囊（liquid-glass class），内部包含“New”徽章（白色背景、黑色文字、rounded-md text-sm font-medium px-2 py-0.5）+ 使用 text-sm font-medium text-muted-foreground 的“Say Hello to Corewave v3.2”。胶囊设置 px-3 py-2 rounded-lg mb-6。
标题：text-5xl md:text-7xl、tracking-[-2px]、font-medium、leading-tight md:leading-[1.15] mb-3。文字：“Your Insights.” / “One Clear Overview.”——其中“Overview”使用 Instrument Serif italic（font-serif italic font-normal）
副标题：text-lg font-normal leading-6 opacity-90 mb-8，颜色使用 CSS 变量 --hero-subtitle。文字：“Neuralyn helps teams track metrics, goals, and progress with precision.”，在“goals,”后添加一个 <br/>
CTA 按钮：“Get Started for Free”——纯白色（bg-foreground text-background），rounded-full px-8 py-3.5 text-base font-medium，whileHover: scale 1.03，whileTap: scale 0.98

仪表板 + 视频区域——使用 w-screen 和 marginLeft: calc(-50vw + 50%) 技巧占满整个视口宽度，aspect-ratio: 16/9，positioned relative：

背景视频：<video>，绝对定位，inset-0 w-full h-full object-cover。URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
仪表板图片：绝对定位，居中，max-w-5xl w-[90%] rounded-2xl，mixBlendMode: "luminosity"。具有视差滚动效果（y: 0→-250）。
底部渐变淡出：绝对定位在 section 底部，h-40，从背景色到透明色的渐变，z-30，pointer-events-none。

视差滚动效果（Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform）：

首屏文字内容组：y: [0, -200] 和 opacity: [1, 0]（在滚动的前 50% 逐渐淡出）
仪表板图片：y: [0, -250]

入场动画：交错的 initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}：

标签胶囊：y: 10，duration 0.5s，delay 0
标题：y: 20，duration 0.6s，delay 0.1
副标题：y: 20，duration 0.6s，delay 0.2
CTA：y: 20，duration 0.6s，delay 0.3
仪表板区域：y: 40，duration 0.8s，delay 0.4

Liquid Glass 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;
}

Section 2：客户评价（min-h-screen，居中，py-24 md:py-32 px-8 md:px-28）

引号符号图片（w-14 h-10 object-contain）
客户评价文字（text-4xl md:text-5xl font-medium leading-[1.2]，包裹在 flex flex-wrap 中）：“Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics.”
滚动驱动的逐词显现：每个单词都是一个带有 mr-[0.3em] 的 <motion.span>。使用 useScroll({ target: containerRef, offset: ["start end", "end center"] })。每个单词映射到连续区间 [i/total, (i+1)/total] → opacity: [0.2, 1] 和 color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"]。
末尾的 ” 引号使用 text-muted-foreground ml-2
作者行（flex items-center gap-4）：头像图片（w-14 h-14 rounded-full border-[3px] border-foreground object-cover）+ 姓名“Brooklyn Simmons”（text-base font-semibold leading-7 text-foreground）+ 职位“Product Manager”（text-sm font-normal leading-5 text-muted-foreground）
布局：max-w-3xl mx-auto，内容左对齐（items-start），元素之间 gap-10

所需资源：
logo.png——小型 Logo 图标
hero-dashboard.png——仪表板截图
quote-symbol.png——装饰性引号标记
testimonial-avatar.png——圆形头像

溯源 · 已核对已发布案例的 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

为“Neuralyn”——一款分析仪表板 SaaS——创建一个深色落地页。使用 React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui。

字体
正文/UI 使用通过 @fontsource/inter 引入的 Inter（400、500、600、700）
斜体强调词使用通过 @fontsource/instrument-serif 引入的 Instrument Serif（400、400-italic）

颜色主题（全部使用 HSL，默认在 :root 中启用深色模式）
背景：0 0% 0%（纯黑）
前景：0 0% 100%（纯白）
弱化前景：0 0% 65%
卡片：0 0% 5%
边框：0 0% 20%
首屏副标题：210 17% 95%

页面结构
Section 1：首屏（占满视口高度，overflow-hidden）

导航栏——横向布局，内边距 px-8 md:px-28 py-4：

左侧：Logo 图片 + “Neuralyn”文字（text-xl font-bold tracking-tight）+ 导航链接（Home、带 ChevronDown 图标的 Services、Reviews、Contact us）——移动端隐藏链接，链接之间 gap-1，Logo 与链接之间 gap-12 md:gap-20
右侧：“Sign In”按钮——纯白背景（bg-foreground）、黑色文字（text-background）、rounded-lg text-sm font-semibold，悬停时进行 opacity transition

首屏内容——居中纵向排列，mt-16 md:mt-20 px-4：

标签胶囊：一个“liquid glass”风格的胶囊（liquid-glass class），内部包含“New”徽章（白色背景、黑色文字、rounded-md text-sm font-medium px-2 py-0.5）+ 使用 text-sm font-medium text-muted-foreground 的“Say Hello to Corewave v3.2”。胶囊设置 px-3 py-2 rounded-lg mb-6。
标题：text-5xl md:text-7xl、tracking-[-2px]、font-medium、leading-tight md:leading-[1.15] mb-3。文字：“Your Insights.” / “One Clear Overview.”——其中“Overview”使用 Instrument Serif italic（font-serif italic font-normal）
副标题：text-lg font-normal leading-6 opacity-90 mb-8，颜色使用 CSS 变量 --hero-subtitle。文字：“Neuralyn helps teams track metrics, goals, and progress with precision.”，在“goals,”后添加一个 <br/>
CTA 按钮：“Get Started for Free”——纯白色（bg-foreground text-background），rounded-full px-8 py-3.5 text-base font-medium，whileHover: scale 1.03，whileTap: scale 0.98

仪表板 + 视频区域——使用 w-screen 和 marginLeft: calc(-50vw + 50%) 技巧占满整个视口宽度，aspect-ratio: 16/9，positioned relative：

背景视频：<video>，绝对定位，inset-0 w-full h-full object-cover。URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
仪表板图片：绝对定位，居中，max-w-5xl w-[90%] rounded-2xl，mixBlendMode: "luminosity"。具有视差滚动效果（y: 0→-250）。
底部渐变淡出：绝对定位在 section 底部，h-40，从背景色到透明色的渐变，z-30，pointer-events-none。

视差滚动效果（Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform）：

首屏文字内容组：y: [0, -200] 和 opacity: [1, 0]（在滚动的前 50% 逐渐淡出）
仪表板图片：y: [0, -250]

入场动画：交错的 initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}：

标签胶囊：y: 10，duration 0.5s，delay 0
标题：y: 20，duration 0.6s，delay 0.1
副标题：y: 20，duration 0.6s，delay 0.2
CTA：y: 20，duration 0.6s，delay 0.3
仪表板区域：y: 40，duration 0.8s，delay 0.4

Liquid Glass 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;
}

Section 2：客户评价（min-h-screen，居中，py-24 md:py-32 px-8 md:px-28）

引号符号图片（w-14 h-10 object-contain）
客户评价文字（text-4xl md:text-5xl font-medium leading-[1.2]，包裹在 flex flex-wrap 中）：“Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics.”
滚动驱动的逐词显现：每个单词都是一个带有 mr-[0.3em] 的 <motion.span>。使用 useScroll({ target: containerRef, offset: ["start end", "end center"] })。每个单词映射到连续区间 [i/total, (i+1)/total] → opacity: [0.2, 1] 和 color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"]。
末尾的 ” 引号使用 text-muted-foreground ml-2
作者行（flex items-center gap-4）：头像图片（w-14 h-14 rounded-full border-[3px] border-foreground object-cover）+ 姓名“Brooklyn Simmons”（text-base font-semibold leading-7 text-foreground）+ 职位“Product Manager”（text-sm font-normal leading-5 text-muted-foreground）
布局：max-w-3xl mx-auto，内容左对齐（items-start），元素之间 gap-10

所需资源：
logo.png——小型 Logo 图标
hero-dashboard.png——仪表板截图
quote-symbol.png——装饰性引号标记
testimonial-avatar.png——圆形头像

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

适用模型与稳定度

建议模型

待补充模型