Animated Website Guide — Prompts

Replace <SUBJECT> with your hero/character. Use in GPT-Img or any image model.

Create a cinematic 16:9 image in an Arcane-inspired animation style featuring <SUBJECT> standing firmly on the ground in a powerful heroic pose, holding a sword after a massive battle. The scene should feel like the middle of an intense action sequence where time has suddenly frozen.

Around <SUBJECT>, defeated enemies are suspended in mid-air, as if thrown upward by the impact of his attack. Weapons, dust, debris, broken armor pieces, sparks, cloth fragments, and battlefield elements are all floating in the air, frozen in motion. The entire scene should have a dramatic time-freeze effect, with everything around him paused mid-action while <SUBJECT> remains calm, grounded, and dominant.

Make <SUBJECT> look like a fierce mythological warrior with a heroic presence, sharp features, intense eyes, strong posture, battle-worn armor, and a glowing cinematic aura. The lighting should be dramatic, with golden highlights, deep shadows, flying particles, and a strong sense of motion frozen in time. The mood should feel epic, powerful, and visually intense, like a high-budget animated action scene.

Drop the image from Step 1 into Seedance (or Higgsfield) along with this prompt.

Create a video where the original picture, character, and subject remain exactly the same. The scene should feel like a dramatic mid-action freeze-frame moment. The camera slowly zooms in toward the main character, revealing the entire frozen battlefield around him. As the zoom progresses, show all the objects, people, weapons, dust, debris, and action elements suspended in mid-air, as if time has suddenly stopped.

The focus should stay on the main character, who is standing firmly on the ground in a heroic pose, while everything around him is frozen in motion. The camera movement should feel cinematic, intense, and immersive, giving a clear overview of what has happened in the scene before ending on a powerful close-up of the character.

Paste this into Cloud Design with your video link. Replace WISA / football with your brand and theme.

Create a React + Vite + Tailwind CSS v4 landing page for "WISA" — a premium football/soccer organization website. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.

GLOBAL SETUP

package.json dependencies (exact):
- react, react-dom ^19.0.0
- motion ^12.23.24
- gsap ^3.14.2
- lucide-react ^0.546.0
- tailwindcss ^4.1.14
- @tailwindcss/vite ^4.1.14
- @vitejs/plugin-react ^5.0.4
- vite ^6.2.0

vite.config.ts: Use @tailwindcss/vite plugin + @vitejs/plugin-react. Alias @ to project root.

index.html: Standard HTML5. Include model-viewer script in head.

src/index.css — EXACT:
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

Define keyframe animations: flyOutRight / flyInLeft (250% translateX, 0.5s) for arrow button hover, and flyOutUp / flyInUp (150% translateY, 0.4s) for nav text hover. All use cubic-bezier(0.4, 0, 0.2, 1) easing with forwards fill mode.

COMPONENT: ScrollReveal — A GSAP-powered word-by-word scroll reveal component with three ScrollTrigger animations (rotation from baseRotation to 0, opacity from baseOpacity to 1 with 0.05 stagger, blur from blurStrength to 0px).

COMPONENT: Reveal — A motion.div wrapper for viewport-triggered fade-in with easing [0.16, 1, 0.3, 1].

COMPONENT: NavItem — Hover-animated navigation link with vertical text fly animation using a cycle counter pattern.

MAIN APP ARCHITECTURE
- Video URL constant for the cinematic background.
- State: arrowCycle, videoRef, videoContainerRef, isLoaded, screen3Ref.
- scrollY from motion's useScroll(); headerY = useTransform(scrollY, [0, 500, 800], [0, 0, -150]).

SCROLL-DRIVEN VIDEO — CRITICAL
Use a video.seeking guard inside the scroll handler. Without it, rapid scroll events queue up competing currentTime assignments causing visible frame tearing. Map scroll fraction from 0 (top) to 1 (when footer is 20% of viewport from top).

LAYER STRUCTURE
1. Fixed video background (fixed inset-0 z-0 bg-black) with object-fit: cover.
2. Fixed header (z-20) animated via headerY transform.
3. Scrollable content (relative z-10 pointer-events-none) with pointer-events-auto on interactive areas.

SECTION 1: HERO — 12-col grid. Heading "Championing The Pitch Of Legends" bottom-left at clamp(2.5rem, 6vw, 5rem). Description paragraph center-right with max-w-[460px] and bold accent. Two-part CTA button (text + arrow) with white/8 backdrop-blur-[80px], turning solid white on hover.

SECTION 2: ScrollReveal heading + 3-column grid (Globe + WISA logo, "Performance Analytics / Facilities", "Matchday Premium / Fan Experiences").

SECTION 3: FOOTER (ref={screen3Ref}) — Glassmorphism card with rgba(26,26,26,0.6), backdrop-blur 80px, border rgba(255,255,255,0.1). Top CTA "Ready To Score / Your Winning Season?" + 4-col footer grid (Brand, Company, Services, Connect) + copyright bar.

FIXED HEADER — motion.header sliding out via headerY. Left: WISA logo SVG. Right: nav with 5 NavItem links and white "BUY MATCH PASS" CTA.

DESIGN TOKENS
- Pure black background.
- Text: white, white/64, white/60, white/40, white/25.
- Glass: #1A1A1A at 40% opacity, blur 80px, border rgba(255,255,255,0.1).
- Easing: motion [0.16, 1, 0.3, 1], CSS cubic-bezier(0.4, 0, 0.2, 1).
- Spacing: 90% viewport width container with clamp-based responsive values.

Replace "WISA / football" with the user's brand and theme. Keep the scroll-driven video background, glassmorphism footer, and cinematic dark aesthetic intact.