Loading…
Loading…
Loading the case library.
Loading…
Case library · Public evidence

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI 3D Marquee component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images:…

Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Tooltip Card. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…

Showcase page with two iOS device frames side by side, using a fixed 370x790 frame and an adaptive scaling stage, as a single HTML file.
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…

Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Webcam Pixel Grid. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// components/ui/webcam-pixel-grid.tsx "use client"; import React, { useRef, useEffect, useState, useCallback } from "react"; import { cn } from "@/lib/utils"; type WebcamPixelGridProps =…

Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Terminal. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
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 section of a stablecoin landing page, built with React, TypeScript and Tailwind, as a companion piece in the same brand system as 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…

Scroll-driven landing page for the fashion brand prmpt, where the story advances by scrolling after the first screen. The choreography of the scroll stages is the core.
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,…

A video streaming component named FreedomSection, built with React, TypeScript, Tailwind v3 and hls.js. The engineering detail is in how useEffect and useRef are used.
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…

Animated 404 page for the playful brand TinyTrails, built with React and Tailwind and delivered as a single 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…

An e-commerce ad short for fruit cookies, with four flavors and their matching fruits arranged in a geometric array. At the climax a cookie breaks open in slow motion as jam filling splashes out, then English copy appears word by word to close. The cut is brisk and stresses flavor variety and texture.

Full-screen hero for the vinyl record label quietpress, built with React, TypeScript and Tailwind, with a retro texture suited to music.
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…

Landing page for the premium beauty brand Serene, with two full-screen sections, built with React, Vite and 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…

Landing site for Drift, a schedule app friendly to people with ADHD, built with React, Vite, TypeScript and Tailwind. The calm, low-stimulation visual direction is itself the selling point.
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…

Full-screen hero for the design agency Atelier, built with React, Tailwind and Lucide, with mobile responsiveness as a hard requirement.
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…

One-page hero for the holistic healing brand Vibrant Wellness, built with React, TypeScript and 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"…

Full-screen hero for the SaaS product flowpath, built with React, Tailwind and 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…

A single-screen 404 page built with React, Vite and Tailwind v4, composed to the standard of a proper landing page even though it is an error page.
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:…

Exact recreation of an F1 hero themed on Hamilton at Silverstone, built with React and TypeScript in the Albert Sans typeface.
Prompt
# Recreate This Page Exactly — Lewis Hamilton / Silverstone F1 Hero ## Tech stack - React + TypeScript + Vite - Tailwind CSS (config extends `fontFamily.sans` = `['"Albert Sans"',…

A gameplay showcase for the cyberpunk game “Magnet Riot.” After NIX clicks CONTINUE on the main menu, the game opens a magnetic-shoe loadout screen where the soles, coils, and grappling-hook modules are disassembled and rebuilt piece by piece. Once the configuration is complete, the city environment loads and the video ends with NIX firing the grappling hook and sprinting forward.
Prompt
Use reference image 1 for the character and reference image 2 for the UI style. High-angle overhead shot: NIX sits cross-legged on an electric-cyan graffiti-covered floor, looking up at…

Full-screen cinematic hero for the mindfulness focus app Lumora, built with React and Tailwind, with Instrument Serif as the heading typeface setting a calm, dark first screen.
Prompt
Create a fullscreen cinematic hero section for a mindfulness/focus app called "Lumora" using React, Tailwind CSS, and Lucide React icons. ## Font Use **Instrument Serif** (Google Fonts,…