加载中…
案例库 · 公开证据
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/layout-text-flip.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/canvas-reveal-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import React, { useMemo, useRef }…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/squiggly-text.tsx "use client"; import React, { useId } from "react"; import { motion, useTime, useTransform } from "motion/react"; import { cn } from "@/lib/utils";…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/noise-background.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform,…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images:…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
source-aceternity prompt-public not-rerun license-review web-ui motion-3d
提示语
// components/ui/terminal.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const KEY_SOUNDS_DOWN: Record<string,…
提示语
**提示词：** 使用 React、Tailwind CSS 和 **framer-motion** 创建一个“关于我”section。网站使用 **Google Font "Kanit"**（字重 300-900）和深色背景 `#0C0C0C`。 **Section 布局：** - 全宽…
提示语
构建一个单页 React + Vite + TypeScript + Tailwind CSS 网站，包含恰好两个全屏区块（Hero 和 Capabilities）。页面是一个深色、富有电影感的网页设计机构落地页，使用“液态玻璃”拟态 UI 元素，并通过…
提示语
使用 React + TypeScript + Vite + Tailwind CSS，为名为 "Wanderful" 的旅行品牌构建一个占满视口、具有电影感的首屏区域。使用 GSAP 制作动画，并使用 `lucide-react` 提供图标。 **字体（通过…
提示语
构建一个与以下规范完全一致的 `PricingSection` React 组件。 ## 技术栈与全局设置 - React 18 + Vite + TypeScript、TailwindCSS、`framer-motion`、`clsx` + `tailwind-merge`，通过 `@/lib/utils`…
提示语
构建一个独立的 React + TypeScript + Tailwind CSS 区块组件。这是一个左右两半的香水产品展示：LEFT 是循环播放的视频，RIGHT 是青柠绿色产品面板。在移动端，它会垂直堆叠，产品面板位于视频…
提示语
使用 React + TypeScript 和 Tailwind CSS 构建单个区块。不使用额外库。完全适配移动端。黑色背景，白色文字。 ## 全局前置条件 - 字体：`@import…
提示语
为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局，包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React…
source-motionsites prompt-public not-rerun license-review web-ui motion-3d
提示语
创建一个高性能、可交互的 3D 水平圆柱轮播，展示高端动态银行卡。 核心功能与交互： 使用 React (useState, useEffect, useRef)、Tailwind CSS v4 和标准 requestAnimationFrame，实现流畅的 60fps…
提示语
**使用 React + Vite + Tailwind CSS，为名为 "Alwayzz" 的创意机构创建一个单页落地页 hero section。所有样式均使用自定义 CSS（不要使用 Tailwind…
提示语
**使用 React、Tailwind CSS 和 Lucide React icons 构建一个单页“CozyPaws”宠物商店 Hero Section。布局高度为视口高度（h-screen），不可滚动，包含三个响应式断点（移动端、平板端 md、桌面端…
提示语
创建一个移动应用展示页面，为“Christ Family Church”展示 3 个 iPhone mockups——这是一款教会网站移动端设计。使用 React Native、Expo Router、react-native-reanimated 和 Manrope…
提示语
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Creative Studio Showcase</title> <link…
提示语
创建一个移动旅行应用 UI mockup，显示在逼真的 iPhone-style phone frame 内，并居中置于白色网页上。技术栈：React + TypeScript、Tailwind CSS、Lucide React icons、Vite。字体：Google Fonts…
提示语
Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library…
提示语
构建一个 404“找不到页面”hero page，作为单一全 viewport（100vh、不可滚动）的 React + Vite + Tailwind CSS 应用，使用 DM Sans font 和 Google Material Symbols Rounded…
提示语
构建提示词：电影感太空旅行落地页 构建一个单页落地网站，包含两个全屏高度区块（Hero + Capabilities）。两个区块都使用循环背景视频，通过自定义 JS 实现 crossfade，并共享一套 liquid-glass…
提示语
--- > **构建此区块前的设置要求：** > > **Google Fonts** -- 在 `index.html` 的 `<head>` 中加载以下内容： > ```html > <link rel="preconnect" href="https://fonts.googleapis.com" /> > <link…
