Task IntentTheme
Build a Ken Burns Effect Hero
Create a hero section with slow Ken Burns zoom and pan animation on the background image.
What This Sidekick Query Does
Create a hero section with slow Ken Burns zoom and pan animation on the background image.
Prompts
Copy, adapt, and run this directly in Shopify Sidekick.
Create a hero section on my homepage with a Ken Burns effect on the background image. Use [IMAGE_URL] as the background. Apply a slow zoom-and-pan animation that gradually scales the image from [SCALE_START] to [SCALE_END] over [DURATION_SECONDS] seconds and then reverses. The animation should loop continuously and feel cinematic. Overlay the heading [HEADLINE_TEXT] in [TEXT_COLOR] at [HEADING_SIZE] pixels, centered on the section. Add a subheadline [SUBHEADLINE_TEXT] and a CTA button labeled [CTA_TEXT] linking to [CTA_URL] in [BUTTON_COLOR]. Apply a [OVERLAY_COLOR] overlay at [OVERLAY_OPACITY] percent opacity. Set the section height to [HEIGHT] pixels. Use CSS animations rather than JavaScript for smooth performance. On mobile, reduce the animation scale range for better performance.
Expected Output
Create a hero section with slow Ken Burns zoom and pan animation on the background image.
Tips to Improve Results
Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions