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 Magnetic Button 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/magnetic-button.tsx "use client"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; export const MagneticButton = ({ children,…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Carousel 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/carousel.tsx "use client"; import { IconArrowNarrowRight } from "@tabler/icons-react"; import { useState, useRef, useId, useEffect } from "react"; interface SlideData {…

Product benefits section in white text on a black background, built with React, TypeScript and Tailwind with no extra dependencies.
Prompt
Build a single React + TypeScript section using Tailwind CSS. No extra libraries. Fully mobile-responsive. Black background, white text. ## Global Prerequisites - Font: `@import…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Code Block 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/code-block.tsx "use client"; import React from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { atomDark } from…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Animated Testimonials 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/animated-testimonials.tsx "use client"; import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"; import { motion, AnimatePresence } from "motion/react"; import…

A 404 page for the hosting provider NEXOVA, with a looping video background and navigation, giving an error page the polish of a landing page.
Prompt
Build a full-page 404 error page for a hosting company called "NEXOVA". The entire page is a single viewport-height layout with a looping background video, a navigation bar, a centered…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Lens 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/lens.tsx "use client"; import React, { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; interface LensProps { children:…

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 Timeline. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// components/ui/timeline.tsx "use client"; import { useMotionValueEvent, useScroll, useTransform, motion, } from "motion/react"; import React, { useEffect, useRef, useState } from…

A 3D cylindrical carousel of bank cards driven by React hooks, a high-performance interactive component and the most complex interaction in this batch.
Prompt
Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards. Core Features & Interactions: Use React (useState, useEffect, useRef), Tailwind…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Background Beams With Collision 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/background-beams-with-collision.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence } from "motion/react"; import React, { useRef,…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Floating Dock 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/floating-dock.tsx "use client"; /** * Note: Use position fixed according to your needs * Desktop navbar is better positioned at the bottom * Mobile navbar is better…

Landing hero for the subscription creative agency Alwayzz, built with React and Vite, with styling deliberately done in custom CSS instead of Tailwind utility classes.
Prompt
**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Card Spotlight 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/card-spotlight.tsx "use client"; import { useMotionValue, motion, useMotionTemplate } from "motion/react"; import React, { MouseEvent as ReactMouseEvent, useState } from…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Animated Modal 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/animated-modal.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import React, { ReactNode, createContext,…

Hero section for the pet shop CozyPaws, built with React, Tailwind and Lucide, in a warm and friendly style.
Prompt
## Prompt to Recreate CozyPaws Hero Section **Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Glare Card 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/glare-card.tsx "use client"; import { cn } from "@/lib/utils"; import { useRef } from "react"; export const GlareCard = ({ children, className, }: { children:…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Link Preview 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/link-preview.tsx "use client"; import * as HoverCardPrimitive from "@radix-ui/react-hover-card"; import { encode } from "qss"; import React from "react"; import {…

Three iPhones side by side showing the mobile design of a church website, built on React Native and Expo Router. A rare native mobile prompt in this batch.
Prompt
Create a mobile app showcase page displaying 3 iPhone mockups for "Christ Family Church" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Flip Words 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/flip-words.tsx "use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, LayoutGroup } from "motion/react";…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Aurora Background 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/aurora-background.tsx "use client"; import { cn } from "@/lib/utils"; import React, { ReactNode } from "react"; interface AuroraBackgroundProps extends…

Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Vision Reveal, then swap in your own copy, brand and asset links to reuse it.
Prompt
<!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…

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 Multi Step Loader. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// components/ui/multi-step-loader.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react";…

Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Fey.com Macbook Scroll 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/macbook-scroll.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { MotionValue, motion, useScroll, useTransform } from…

Travel journal app UI mockup inside an iPhone frame, built with React, TypeScript and Tailwind, showing one way to present mobile designs on the web.
Prompt
Create a mobile travel app UI mockup displayed inside a realistic iPhone-style phone frame, centered on a white webpage. Tech stack: React + TypeScript, Tailwind CSS, Lucide React icons,…