Prompt Inspiration library for Visual Editor Copilot
Last updated
Was this helpful?
Last updated
Was this helpful?
To learn more about the Editor Copilot, refer to the article
Animated Hero Section Headline
As a landing page, I want the main headline in the hero section to grab attention when the page loads.
Effect: The headline should fade in over 1 second, starting from 0% opacity to 100%.
Timing: The animation should begin 500 milliseconds after the page is fully loaded.
Style: Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.
Behavior: No animation replay if the user scrolls back to the top.
Progressive Image Reveal in Article Cards
On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.
Effect: Apply a fade-in effect combined with a zoom from 95% to 100%.
Trigger: The animation should start when at least 50% of the image is visible in the viewport.
Performance: Use CSS-only animations to avoid JavaScript performance issues.
Hover Glow Effect on "Read More" Links
On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.
Effect: Create a soft outer glow around the text using a light blue color (#4A90E2).
Duration: Smooth transition over 0.3 seconds.
Behavior: The glow should disappear immediately when the user moves the mouse away.
Animated Scroll-to-Top Button
On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.
Effect: The button should slide in from the right and pulse three times to attract attention.
Trigger: Animation starts when the user scrolls past 80% of the page height.
Behavior: The button should smoothly scroll the page back to the top when clicked.
Add a Parallax Background Effect
On my homepage, I want the background image of the hero section to have a parallax scrolling effect.
Effect: The background should move at half the speed of the foreground content when scrolling.
Style: Add a slight blur to the background to increase the focus on the text.
Performance: Ensure the effect does not impact page load speed.
Highlight Section Headings on Scroll
On my long-form article, I want each section heading to animate when it scrolls into view.
Effect: The heading should slide in from the left with a fade-in effect.
Trigger: Animation should start when the heading is 25% visible in the viewport.
Duration: The animation should complete within 0.5 seconds.
Active Form Field Highlighting
On my checkout form, I want the active input fields to visually stand out.
Effect: Change the border color of the active field to green (#28A745) and add a subtle box shadow.
Behavior: The highlight should disappear immediately when the user clicks outside the field.
Style: Keep the animation subtle to avoid distracting the user.
Step Highlight in Progress Bar
On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.
Effect: Change the current step's background color to blue (#007BFF) with a slight pulse animation.
Behavior: Automatically advance the highlight as users complete steps.
Style: Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").
Animated CTA Button Hover Effect
On my pricing page, I want the "Get Started" button to animate when hovered over.
Effect: The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).
Duration: Transition over 0.4 seconds.
Behavior: The button should return to its original color instantly when the user moves the mouse away.
Pulsing "Add to Cart" Button
On my product page, I want the "Add to Cart" button to pulse periodically.
Effect: Scale the button to 1.05x its size and back over 1 second.
Timing: The animation should repeat every 3 seconds.
Visual Feedback for Invalid Fields
On my checkout form, I want to provide instant visual feedback for invalid inputs.
Effect: The border of invalid fields should flash red (#FF0000) three times.
Behavior: Show an error message beneath the field with a red exclamation icon.
Highlight Cart Section on Hover
On my cart page, I want the summary section to visually stand out when hovered over.
Effect: Add a shadow and change the background color to light yellow (#FFF9C4).
Behavior: The highlight should disappear smoothly over 0.2 seconds after hover.
Show a Custom Welcome Message for Logged-In Users
On my homepage, I want to display a personalized welcome message for returning users.
Effect: Replace the default "Welcome to Our Site" with "Welcome back, [First Name]!" dynamically.
Behavior: The message should appear instantly when the page loads.
Fallback: If no name is available, display "Welcome to Our Site!" as the default text.
Change Background Color Based on User Preference
On my profile page, I want the background to reflect the user's theme preference.
Effect: If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.
Trigger: The change should occur dynamically when the page is loaded.
Fallback: Use the default light theme for users without a preference.
Countdown Timer for Flash Sales
On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.
Effect: Display a live countdown showing hours, minutes, and seconds dynamically decreasing.
Style: Use bold red text (#FF0000) with a clean font to make it stand out.
Behavior: Reset the timer when the sale ends and replace it with a "Sale Ended" message.
Personalized Call-to-Action for Returning Visitors
On my product page, I want to tailor the call-to-action text for returning visitors.
Effect: Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.
Trigger: Update the text immediately when the page loads for known users.
Show Recently Viewed Products
On my product pages, I want to display a horizontal carousel of products the user has recently viewed.
Effect: Populate the carousel with the last 5 products the user clicked on.
Behavior: Allow users to scroll through the carousel horizontally.
Fallback: If no history is available, display the top 5 most popular products.
Display Location-Based Promotions
On my homepage, I want to show special offers based on the user’s location.
Effect: Show "Free Shipping to [City]!" dynamically based on the user’s IP address.
Style: Use a banner with bold, localized messaging at the top of the page.
Auto-Scroll to the First Error in Forms
On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.
Effect: Add a smooth scroll effect to bring the invalid input into view.
Behavior: Highlight the input with a red border and display an error message beneath it.
Add Smart Autofill for Address Fields
On my checkout form, I want address fields to auto-suggest based on user input.
Effect: Show a dropdown of matching addresses dynamically as users type.
Behavior: Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.
Add Keyboard Navigation for Menus
On my navigation bar, I want users to navigate menu items using the keyboard.
Effect: Highlight the current menu item with a blue border when using the Tab key.
Behavior: Ensure Enter activates the menu item, and Escape closes any dropdowns.
Improve Readability with Adjustable Font Sizes
On my article pages, I want users to adjust the font size for better readability.
Effect: Add small, medium, and large size buttons that dynamically change the font size.
Behavior: Maintain the chosen size even when users navigate to another page.
Add Real-Time Validation for Email Fields
On my signup form, I want the email field to validate user input as they type.
Effect: Display a green checkmark when the email format is valid, and a red warning icon when invalid.
Behavior: Show the validation feedback immediately without requiring form submission.
Add Loading Indicators to Buttons
On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.
Effect: Replace the button text with a spinner icon and disable the button until the action completes.
Behavior: Revert to the original text once the order is successfully placed or an error occurs.