Angie prompt library

Create a native Elementor widget called Interactive Dock Menu that mimics the macOS dock magnification effect.

Requirements:

Layout: Horizontal container with a repeater. Each item includes an icon, link, and tooltip.

Magnification: Use JavaScript to scale icons based on the cursor’s distance from each icon’s center. Nearby icons should smoothly scale (e.g., 1x → 1.5x), including adjacent neighbors.

Style:

• Glassmorphism container (translucent + backdrop blur)
• Tooltip appearing above icons on hover
• Elementor Controls: Icon base size, max scale, effect distance, container padding, tooltip typography/colors.

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.

Create a custom Elementor widget for a Store Locator using Leaflet.js and OpenStreetMap. The widget should feature a searchable sidebar list and an interactive map. Each location in the list must include a name, address, coordinates (latitude/longitude), and an image field. When a location is clicked, the map should center on its marker and open a popup displaying the store’s name, address, and the uploaded image. Include a repeater control in the Elementor editor for manual location management and ensure the layout is fully responsive (side-by-side on desktop, stacked on mobile).

Create an image comparison slider widget with adjustable before/after labels, draggable handle settings, and options for overlay color and transition speed.

Create a news ticker widget with scrolling direction, speed, pause-on-hover, and and option for both static and dynamic content with query controls for selecting posts

Create a logo showcase widget with grid, carousel, and justified layouts, including controls for grayscale on hover, clickable logo links, and infinite smooth visual scroll .

Create a dual button widget that allows two buttons in one container with shared alignment controls and independent label, icon, and link settings

Create a custom Elementor widget called ‘Interactive Team Accordion’. It should show team members as a series of vertical image strips. By default, all images must have a 100% grayscale filter. When an item is clicked, it should expand smoothly (using flex-grow) to reveal a content area on the left and the full-color image on the right. The content area should include a Name, Job Title, Social Icons, and a Bio. Include a Repeater control for the members. Use Vanilla JS for the click interaction and CSS transitions for the animation. Ensure it stacks vertically on mobile.

Create a page navigation widget that displays a fixed navigation menu (dots, icons, or labels) linked to page anchor that i can set. It should support smooth scroll to anchors, highlight the active section on scroll, customizable icons/text, tooltips, and flexible positioning (top, bottom, left, right). Include responsive design and styling options for colors and typography.

Create a Dual Color Heading widget that lets style a headline with two differently colored parts. Include controls for the two text fields, individual colors, typography, spacing, alignment, and responsive settings

Create a horizontal timeline widget with events laid out left to right along a continuous horizontal line. Each event should have a circular marker showing a number or icon, connected to the line, with content displayed above or below. Include navigation for overflow, smooth animations, and responsive layout.