Angie prompt library

Create a custom Elementor widget named “Ripple Effect Image” with the following requirements:
1. Functionality:

• Implement a WebGL-based liquid ripple distortion effect on image hover using Three.js.
• The effect should be driven by mouse movement, creating fluid, water-like ripples that distort the background image.
• Ensure the effect is smooth and performs well.

2. Content Controls:

• Image: Media control to upload the background image.
• Title: Text control for a main heading overlay (centered).
• Subtitle: Text control for a sub-heading overlay (centered).

3. Settings Controls (Sliders):

• Ripple Intensity: Control the strength/amplitude of the distortion.
• Speed: Control the animation speed of the ripples.

4. Style Controls:

• Dimensions: Width and Height controls for the widget container (responsive).
• Typography: Standard Elementor typography controls for the Title.
• Colors: Color control for the Title text.

5. Technical Implementation:
Use Three.js (load from CDN) for the rendering.
Implement proper resizing logic to ensure the image covers the container aspect ratio (like CSS object-fit: cover) without distortion or cutting off.

• Use standard Elementor widget structure (PHP class, render method, JS handler).
• Ensure all assets (CSS/JS) are enqueued correctly and only when the widget is used.

Create a custom Elementor widget called ‘Bouncing QR Code’ for a 404 page.
Concept:

• A retro-inspired, physics-based animation (like the DVD bouncing logo).
• The widget is a solid colored box that moves at a constant velocity across the viewport.
• Inside this box, display a QR Code image centered with some padding.
• The QR code must be clearly visible on top of the box’s background color (use an <img> tag, not a CSS mask).

Behavior:

1. Movement: The box moves automatically. When it hits the browser edge (viewport boundary), it bounces off.
2. Color Cycling: Every time the box hits a wall, its background color changes. Cycle through 5 user-defined colors.
3. Corner Hit: If it hits a corner perfectly, trigger a visual ‘celebration’ effect (e.g., glow or shadow pulse).
4. Resizing: Detect window resizing to keep the box inside the visible area.

Controls:

• Content Tab:
• QR Code Image upload.
• Link URL (for the QR code anchor).
• Style Tab:
• Color Cycling: 5 color pickers for the bounce sequence.
• Dimensions: Controls for Box Size and Internal Padding (to frame the QR code).
• Physics: Sliders for Horizontal and Vertical velocity.

Technical Requirements:

• Use requestAnimationFrame for smooth performance.
• Pure JavaScript (no jQuery dependencies if possible, but Elementor handler structure is required).
• Ensure the widget is responsive and touch-friendly.

Create a tooltip widget that has a hover effect. Tooltip Design and Behavior Instructions Design Guidelines – Text: Display a paragraph designed in an elegant Serif font.
Specific Words: Certain words (such as names of places) should be highlighted with a light yellow background (Highlight).
Behavior: When the user hovers with the mouse over the highlighted word, a small image (Thumbnail) should appear.
Frame: The image should appear in a frame with Rounded corners.
Animation: The image should appear via a “Pop-up” or “Scale up” effect.

Create a Solar System Explorer widget featuring animated orbits for all eight planets, orbiting the Sun. Include smooth animations and allow users to customize each planet’s size, speed, color, and orbital distance directly from the widget settings

Create a custom Image Reveal Menu widget using a full-screen Elementor container with a vertical text menu on the left side (items: England, Brazil, France, Japan, Italy). Add custom CSS and JavaScript so that when I hover over each menu item, the parent container’s background image changes to a specific image for that country, and the text gets a bottom border (underline) on hover.

Create a Flipbook PDF Reader widget that displays a PDF like a real book with page-flip animation (drag/click to turn pages). Users can upload a PDF or paste a URL. Include controls for next/prev, page thumbnails or page picker, zoom, and fullscreen. Add settings for single-page vs spread, LTR/RTL, cover page toggle, page flip speed, shadow/depth effect, and responsive behavior (swipe on mobile). Ensure accessibility (keyboard nav + reduced motion option) and a fallback to standard PDF view if flip mode can’t load.

Create a responsive Data Table widget with dual input modes: manual entry via Repeater controls or CSV file upload for bulk import. Display tables with customizable styling including rounded borders, background opacity, alternating row colors, and hover effects. Include Font Awesome icon support in column headers with icon picker control. Add text alignment options per column (left, center, right), adjustable padding, border controls, and typography settings. Support sortable columns with click-to-sort functionality, search/filter bar, pagination or scroll options, and mobile-responsive behavior (horizontal scroll or stacked card view). Include CSV parser with column mapping interface, data validation, and ability to update table by re-uploading CSV.

Create a Pricing Table widget with a Monthly/Yearly toggle switcher at the top. Display multiple pricing plans in columns showing plan name, icon, price (that updates when switching between monthly/yearly), feature list with checkmarks/icons, highlighted “Popular” or “Best Value” badge on recommended plan, and CTA button. Include a Repeater control for multiple plans with fields for both monthly and yearly prices. Add smooth price transition animations when toggling between billing periods, optional discount badge for yearly plans (e.g., “Save 20%”), and customizable column layouts. Support styling options for colors, typography, button styles, feature icons, hover effects (lift, glow, scale), and ribbon badges. Include currency symbol control and price formatting options. Ensure mobile-responsive stacking with the toggle remaining accessible.

Create an Image Scroll widget that animates images scrolling vertically or horizontally on hover or page scroll. Include direction options (top-to-bottom, bottom-to-top, left-to-right, right-to-left) with customizable scroll speed and duration controls. Add a container with adjustable height/width that acts as a viewport mask, with the full image scrolling within it. Include trigger options (hover, scroll-based, continuous auto-scroll, reverse on hover-out). Add controls for initial image position (top, center, bottom for vertical / left, center, right for horizontal) to set the starting view.

Create a custom Elementor widget called ‘Bento Grid Posts’. Display blog posts in an asymmetric bento-box style grid where cards have varying sizes (1×1, 2×1, 1×2, 2×2) creating a dynamic masonry effect. Each card should show a featured image background with an option of adding overlay gradient, category tag, post title, author, date, comment count, and excerpt. Include a Repeater or Query control to pull posts dynamically, with manual size assignment for each grid item. Add hover effects (zoom image, lift card, brighten overlay). Support filtering by category. Ensure responsive behavior where large cards break into smaller units on tablet/mobile. Include customizable gap spacing, border radius, overlay colors, typography controls, and lazy loading for images.