bible-academy

byXCREATIONS

USING THE IMAGE ABOVE CREATE A WEB FIRST VIEW PAGE WITHT THESE PROMPT BELOW --- ## BIBLEKIDS ACADEMY — CINEMATIC HERO TRANSITION PROMPT **Objective:** Design a premium, animated hero/intro sequence for the BibleKids Academy homepage, styled as a laptop-screen showcase with a smooth, color-matched cross-fade carousel — similar in motion quality to a high-end product reveal reel, not a generic slideshow. ### Fixed Interface Elements (persist across every transition) - **Top left:** BibleKids Academy logo — open book with two children reaching upward, star above, "BIBLE ACADEMY / Learn · Grow · Discover" wordmark - **Top navigation:** Home · Bible Learning · School Learning · About Us - **Top right:** account icon + notification bell - **Left column, large headline (serif or premium sans-serif):** "Learn. Play. Grow. Discover." with supporting line: *"A joyful Christian learning journey for every child."* and a rounded CTA button: **"Start Learning →"** - **Bottom center:** two-line caption that updates with each slide - **Bottom left:** social icons - **Bottom right:** small circular preview thumbnail of the next image in sequence - **Left/right rounded arrow controls** at the vertical center for manual navigation, auto-advancing every 3.5–4 seconds if idle ### Image Sequence & Required Transition Behavior Each slide swaps **two things simultaneously**: the full-screen background gradient (pulled from the incoming image's dominant palette) and the central floating hero image, which fades/scales out and is replaced by the next image fading/scaling in from the same floating anchor point — accompanied by a soft, breathing drop-shadow beneath it. No hard cuts, no basic slide, no simple fade-to-black. 1. **Robot mascot** (white/teal AI companion, "Bible Academy" chest badge) — background shifts to soft cream/sky-blue → caption: *"Meet your AI Learning Buddy"* 2. **Castle on a hilltop** (painterly, misty green valley) — background shifts to muted sage/green → caption: *"Explore Bible Kingdoms & Stories"* 3. **Jesus teaching children under olive trees** — background shifts to warm golden sunlight tones → caption: *"Learn God's Word, Together"* 4. **Starry sky above a sea of clouds**, single bright star at center — background shifts to deep midnight blue → caption: *"Discover Wonders Beyond the Sky"* 5. **World map composed of national flags** — background shifts to sky blue/white → caption: *"Available in English, Hausa, Yoruba & Igbo"* 6. **BibleKids Academy logo** (navy on cream) — background settles to the brand's neutral cream tone → caption: *"Learn. Play. Grow. Discover."* ### Motion & Technical Specifications - Easing: ease-in-out, 600–800ms per cross-fade transition - Idle state: subtle continuous float/bob (2–4px vertical drift, ~3s loop) on the center image - Shadow beneath the image scales and softens in sync with the float - Background transition and image transition must be perfectly synchronized — never staggered - Fully responsive: recompose to a stacked, touch-swipeable layout on tablet/mobile, arrows replaced by swipe gestures - Performance: CSS/SVG-based transitions preferred over heavy WebGL or particle effects, to keep load times fast ---