Build a Ken Burns Effect Hero

What This Sidekick Query Does

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

Tips to Improve Results