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