Loading…
Case library · Public evidence
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Squiggly Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/squiggly-text.tsx "use client"; import React, { useId } from "react"; import { motion, useTime, useTransform } from "motion/react"; import { cn } from "@/lib/utils";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Noise Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/noise-background.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform,…
黑与奶油色的编辑风个人作品集 hero，明确禁卡片禁紫色禁 Inter，反 AI 味的约束直接写进了 prompt。
Prompt
Recreate this page **pixel-faithfully**. Single full-viewport hero. React + Tailwind CSS. No cards, no purple, no Inter/Roboto. Black/cream editorial portfolio look. --- ## Stack & page…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Marquee」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Tooltip Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
Prompt
**Build a single-page HTML showcase displaying two iOS device frames (370x790px each) side by side on a neutral `#F4F4F4` stage. The stage auto-scales to fit the viewport using JS. Both…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Webcam Pixel Grid」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/webcam-pixel-grid.tsx "use client"; import React, { useRef, useEffect, useState, useCallback } from "react"; import { cn } from "@/lib/utils"; type WebcamPixelGridProps =…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Terminal」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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,…
稳定币落地页的 Use Cases 区块，React + TypeScript + Tailwind，与 USD Halo 同一品牌体系的配套件。
Prompt
**Prompt:** Build a "Use Cases" section for a fintech stablecoin landing page using **React + TypeScript + Tailwind CSS** with **lucide-react** for icons (use `ArrowRight`). Make it fully…
Prompt
### Overview Build a full-screen, scroll-driven fashion/archive landing page for a brand called "prmpt". The page has two main phases: 1. **Hero phase** (first 100vh of scroll):…
A localized editing case based on an original biscuit advertisement video. It keeps the camera movement, lighting, and audio completely unchanged while replacing four types of biscuits in place with corresponding ice cream flavors. The slow-motion breaking sequence is also changed to ice cream fragments and jam textures, demonstrating precise reference-based localized video replacement.
Prompt
Make localized edits to the video based on 【@原视频】. Keep the types, shapes, colors, details, positions, time-freeze effects, motion effects, camera movements, orbiting trajectories,…
名为 FreedomSection 的视频流组件，React + TypeScript + Tailwind v3 + hls.js，工程细节在 useEffect 与 useRef 的用法。
Prompt
Build a single React + TypeScript + Tailwind CSS v3 component called `FreedomSection`. It uses `hls.js` for HLS video streaming and `useEffect` / `useRef` from React. No external icon…
童趣品牌 TinyTrails 的动画 404 页，React + Tailwind，单个 App.tsx 交付。
Prompt
Build a full-screen animated 404 error page for a children's brand called "TinyTrails" using React, Tailwind CSS, and Lucide React icons. The page must be a single `App.tsx` component. Use…
水果饼干电商广告短片，四种口味饼干与对应水果按几何阵列排列，高潮处饼干掰开慢动作展现果酱内馅飞溅，随后英文文案逐词打出收尾。整体剪辑明快，突出产品口味丰富与颗粒质感。
黑胶唱片厂牌 quietpress 的全屏 hero，React + TypeScript + Tailwind，音乐品类的复古质感。
Prompt
Build a full-screen hero section for a fictional vinyl record label called **"quietpress"** using React, TypeScript, Tailwind CSS, and Vite. The page is a single viewport-height hero with…
高端美容品牌 Serene 的双全屏区块落地页，React + Vite + Tailwind。
Prompt
**Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called "Serene". Use TypeScript.** --- ### Fonts (loaded via Google…
A long-take superhero transformation video generated from a solo photo. After leaping from a windowsill, the male lead shoots webs twice in succession to perform pendulum-style swings, pushes off a wall to cross a building, and finally reaches the rooftop. The storyboard specifies camera movements second by second, seamlessly linking the action in a single continuous take from a diving follow shot to a low-angle tracking shot.
Prompt
Video prompt: Time: 0–1.8 seconds. Visual: A young Asian male lead wearing silver over-ear headphones, a gray hooded varsity jacket, and dark pants sits facing forward on an open…
ADHD 友好的日程应用 Drift 落地站，React + Vite + TypeScript + Tailwind，安静低刺激的视觉方向本身就是产品卖点。
Prompt
Build a single-page landing site for "Drift" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries. ### Fonts…
设计机构 Atelier 的全屏 hero，React + Tailwind + Lucide，移动端响应式是硬要求。
Prompt
Create a fullscreen hero landing page section for a design agency called "Atelier" using React, Tailwind CSS, and Lucide React icons. The section must be fully mobile responsive with an…
A European cinematic-style short film set in a time-frozen amusement park. After a boy claps, the entire park freezes, and he moves through the motionless crowd to pull three pranks: catching an elderly man’s dentures, swapping a couple’s cotton candy, and tying a passerby’s shoelaces. The storyboard specifies a timed combination of locked-off shots and low-angle tracking shots.
Prompt
Generate a European cinematic-style short film, approximately 24 seconds long, starring a handsome American teenage boy with curly hair, with an authentic European film aesthetic, set in a…
整体疗愈品牌 Vibrant Wellness 的单页 hero，React + TypeScript + Tailwind。
Prompt
Build a single-page hero landing page for a holistic wellness brand called "Vibrant Wellness." Use React, TypeScript, Tailwind CSS, and Lucide React icons. Load Google Fonts "Inter"…
SaaS 产品 flowpath 的全屏 hero，React + Tailwind + Lucide。
Prompt
Create a fullscreen hero section for a SaaS product called "flowpath" using React, Tailwind CSS, and Lucide React icons. The section should be a single `<section>` filling the viewport…
A UI/UX motion video for the SONORA over-ear headphones website. The page uses a black, gray, and warm-white palette with oversized bold typography, scrolling smoothly down a single page in one continuous shot to showcase noise cancellation, sound quality, and battery life. A sticky effect keeps the headphones fixed while scaling and moving them to the right, and hovering produces localized enlargement and elastic feedback on buttons.
Prompt
A premium UI/UX motion video for the SONORA over-ear headphones website, centered on the white headphones shown in image 1. The page uses a black, gray, and warm-white color palette with…
单屏 404 页面，React + Vite + Tailwind v4，错误页也按正经落地页的标准做构图。
Prompt
Create a single-page, full-viewport 404 error screen in React + Vite + Tailwind CSS v4. Match this composition precisely. PAGE / CANVAS - The page must occupy the full viewport:…
