Hub/Theme/Build a Ken Burns Effect Hero
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