All Prompts

Featured Prompts

Featured
AI Ready

Gradient Hero with Spotlight

Hero section with animated gradient background and spotlight effect following cursor

Create a React hero section component with these specifications: LAYOUT: - Full viewport height (mi...
Unlock to copy
herogradientspotlight
Works with
ClaudeGPTCursor
Featured
AI Ready

Floating Navbar

Navbar that floats and transforms on scroll with glass effect

Create a React floating navbar component: BEHAVIOR: - Starts transparent at top of page - On scroll...
Unlock to copy
navbarfloatingscroll
Works with
ClaudeGPTCursor
Featured
AI Ready

3D Tilt Card

Card with 3D perspective tilt effect following mouse movement

Create a React 3D tilt card component: EFFECT: - Card tilts in 3D space based on mouse position - C...
Unlock to copy
card3dtilt
Works with
ClaudeGPTCursor

33 prompts

Featured
AI Ready

Gradient Hero with Spotlight

Hero section with animated gradient background and spotlight effect following cursor

Create a React hero section component with these specifications: LAYOUT: - Full viewport height (mi...
Unlock to copy
herogradientspotlight
Works with
ClaudeGPTCursor
New
AI Ready

Hero with Particle Background

Modern hero with animated particle/star field background

Create a React hero section with animated particle/star background: PARTICLE SYSTEM: - Generate 50-...
Unlock to copy
heroparticlesstars
Works with
ClaudeGPTCursor
AI Ready

Bento Grid Hero

Hero section with bento-style grid layout showcasing features

Create a React hero section with bento grid layout: STRUCTURE: - Split layout: left side has main h...
Unlock to copy
herobentogrid
Works with
ClaudeGPTCursor
Featured
AI Ready

Floating Navbar

Navbar that floats and transforms on scroll with glass effect

Create a React floating navbar component: BEHAVIOR: - Starts transparent at top of page - On scroll...
Unlock to copy
navbarfloatingscroll
Works with
ClaudeGPTCursor
AI Ready

Collapsible Sidebar

Dashboard sidebar that collapses to icons with smooth animations

Create a React collapsible sidebar component for dashboards: LAYOUT: - Fixed position on left side ...
Unlock to copy
sidebardashboardcollapsible
Works with
ClaudeGPTCursor
AI Ready

Animated Tabs

Tab component with sliding indicator animation

Create a React animated tabs component: VISUAL: - Horizontal tab bar with tab buttons - Active tab ...
Unlock to copy
tabsanimationindicator
Works with
ClaudeGPTCursor
New
AI Ready

Floating Dock

macOS-style dock with magnification effect on hover

Create a React floating dock component with macOS-style magnification: LAYOUT: - Fixed at bottom ce...
Unlock to copy
dockmacosmagnification
Works with
ClaudeGPTCursor
Featured
AI Ready

3D Tilt Card

Card with 3D perspective tilt effect following mouse movement

Create a React 3D tilt card component: EFFECT: - Card tilts in 3D space based on mouse position - C...
Unlock to copy
card3dtilt
Works with
ClaudeGPTCursor
AI Ready

Spotlight Card

Card with spotlight gradient effect that follows cursor

Create a React spotlight card component: EFFECT: - Radial gradient "spotlight" follows mouse cursor...
Unlock to copy
cardspotlightgradient
Works with
ClaudeGPTCursor
AI Ready

Hover Reveal Card

Card that reveals additional content on hover with smooth animation

Create a React hover reveal card component: STATES: Default: Shows image/visual with overlay gradie...
Unlock to copy
cardhoverreveal
Works with
ClaudeGPTCursor
Featured
AI Ready

Bento Grid Layout

Flexible bento-style grid for showcasing features or content

Create a React bento grid component: GRID STRUCTURE: - CSS Grid with variable cell sizes - Support ...
Unlock to copy
bentogridlayout
Works with
ClaudeGPTCursor
Featured
AI Ready

Shimmer Button

Button with animated shimmer/shine effect across surface

Create a React shimmer button component: SHIMMER EFFECT: - Diagonal gradient that animates across b...
Unlock to copy
buttonshimmeranimation
Works with
ClaudeGPTCursor
New
AI Ready

Magnetic Button

Button that subtly follows cursor when nearby, magnetic effect

Create a React magnetic button component: MAGNETIC EFFECT: - Button slightly moves toward cursor wh...
Unlock to copy
buttonmagneticcursor
Works with
ClaudeGPTCursor
AI Ready

Animated Border Gradient Button

Button with rotating gradient border animation

Create a React button with animated gradient border: EFFECT: - Border has gradient that rotates con...
Unlock to copy
buttongradientborder
Works with
ClaudeGPTCursor
AI Ready

Typewriter Effect

Text that types out character by character with cursor

Create a React typewriter text component: EFFECT: - Text appears character by character - Blinking ...
Unlock to copy
texttypewriteranimation
Works with
ClaudeGPTCursor
Featured
AI Ready

Word-by-Word Reveal

Text that reveals word by word with staggered animation

Create a React word reveal animation component: EFFECT: - Text split into words - Each word animate...
Unlock to copy
textrevealanimation
Works with
ClaudeGPTCursor
AI Ready

Animated Gradient Text

Text with animated flowing gradient colors

Create a React animated gradient text component: EFFECT: - Text has gradient fill - Gradient animat...
Unlock to copy
textgradientanimation
Works with
ClaudeGPTCursor
AI Ready

Flip Words

Words that flip/rotate to reveal different text

Create a React flip words component: EFFECT: - Static text with one word that changes - Word flips ...
Unlock to copy
textfliprotate
Works with
ClaudeGPTCursor
Featured
AI Ready

Grid & Dots Background

Subtle grid or dot pattern background with gradient fade

Create React background components for grid and dot patterns: GRID BACKGROUND: ```css .grid-bg { ...
Unlock to copy
backgroundgriddots
Works with
ClaudeGPTCursor
New
AI Ready

Aurora Background

Animated aurora borealis gradient effect

Create a React aurora background component: EFFECT: - Colorful, flowing gradients like northern lig...
Unlock to copy
backgroundauroragradient
Works with
ClaudeGPTCursor
AI Ready

Background Beams

Animated light beams radiating from a point

Create a React background beams component: EFFECT: - Light beams/rays emanating from a point - Beam...
Unlock to copy
backgroundbeamsrays
Works with
ClaudeGPTCursor
AI Ready

Connected Particles

Particle network with connecting lines between nearby particles

Create a React connected particles background: EFFECT: - Floating particles (dots) moving slowly - ...
Unlock to copy
backgroundparticlesnetwork
Works with
ClaudeGPTCursor
AI Ready

Floating Label Input

Input field with label that floats up when focused or filled

Create a React floating label input component: BEHAVIOR: - Label starts inside input as placeholder...
Unlock to copy
inputformfloating
Works with
ClaudeGPTCursor
AI Ready

OTP Input

One-time password input with individual digit boxes

Create a React OTP input component: LAYOUT: - Row of individual digit inputs (4 or 6) - Each input ...
Unlock to copy
inputotpverification
Works with
ClaudeGPTCursor
Featured
AI Ready

Testimonials Carousel

Auto-scrolling testimonial cards with infinite loop

Create a React testimonials carousel component: LAYOUT: - Horizontal scrolling testimonial cards - ...
Unlock to copy
testimonialscarouselsocial-proof
Works with
ClaudeGPTCursor
Featured
AI Ready

Pricing with Toggle

Pricing section with monthly/yearly toggle and animation

Create a React pricing section with billing toggle: TOGGLE: - Monthly / Yearly switch - Yearly show...
Unlock to copy
pricingtogglebilling
Works with
ClaudeGPTCursor
AI Ready

Features Grid

Grid of feature cards with icons and descriptions

Create a React features grid component: LAYOUT: - 2x3 or 3x3 grid of feature cards - Responsive: fe...
Unlock to copy
featuresgridicons
Works with
ClaudeGPTCursor
AI Ready

Gradient CTA Section

Call-to-action section with gradient background and glow effects

Create a React CTA section component: LAYOUT: - Full width section with generous padding - Centered...
Unlock to copy
ctagradientconversion
Works with
ClaudeGPTCursor
AI Ready

Animated Spinner

Modern loading spinner with various styles

Create a React loading spinner component with multiple variants: VARIANTS: 1. Ring spinner (rotatin...
Unlock to copy
loaderspinnerloading
Works with
ClaudeGPTCursor
AI Ready

Skeleton Loader

Content placeholder with shimmer animation

Create a React skeleton loader component: EFFECT: - Gray placeholder shapes - Shimmer animation mov...
Unlock to copy
loaderskeletonplaceholder
Works with
ClaudeGPTCursor
AI Ready

Animated Modal

Modal dialog with smooth enter/exit animations

Create a React animated modal component: STRUCTURE: - Backdrop (semi-transparent overlay) - Modal c...
Unlock to copy
modaldialogoverlay
Works with
ClaudeGPTCursor
AI Ready

Image Carousel

Smooth image carousel with navigation and indicators

Create a React image carousel component: FEATURES: - Smooth slide transitions - Previous/Next navig...
Unlock to copy
carouselsliderimages
Works with
ClaudeGPTCursor
Featured
AI Ready

FAQ Accordion

Expandable FAQ section with smooth animations

Create a React FAQ accordion component: LAYOUT: - List of question/answer pairs - Click question to...
Unlock to copy
faqaccordioncollapse
Works with
ClaudeGPTCursor

Ready to vibe code?

Get instant access to all 33+ prompts and start building beautiful UIs with AI.

Unlock All Prompts$42/yr