Gemini Flash 3.7 + Seedance 2.5 = cinematic websites I built this experimental website dedicated to the Arsenal winning the first trophy of the season in a few hours - all with AI Remix (Google AI Studio): Preview: Pipeline🔽

1. Start with the keyframes (images) 1. Generate one keyframe per scene Think of each section of the site as a visual anchor for the video. If your site has 5 scenes, start with 5 strong frames. Think ahead: 1) leave negative space for UI and headlines 2) keep important subjects away from the edges 3) preserve enough contrast for text 4) decide early if your UI will use white or dark typography 5) keep the visual language consistent across every frame This matters more than it seems. I made a mistake: I designed bright sky-heavy frames first, then realized I wanted white typography on top - which forced me to add dark gradients later (and I didn't want to start my experiment from scratch) Don't repeat my fails - keep an eye on these 5 takes

2. Turn the keyframes into one continuous video Upload the frames to a multi-image video model in chronological order. The important part is the prompt (I used ChatGPT Sol to help me craft one): (x) Don’t tell the model to “transition from image A to image B.” (v) Describe one camera moving through one physical world. Think: approach → pass → reveal → move forward → reveal next scene The keyframes are spatial anchors, not slides. The fewer times the model feels forced to get creative about "how to connect two images," the less likely you are to get obvious morphs or crossfades. You can reproduce this pipeline in open-sourced models like LTX 2.5: generate the keyframes first, then animate the camera journey between them

3. Plan transitions inside the scene AI video models love solving difficult transitions with: - crossfades - warping - morphing Give them a physical reason to hide the cut instead. Useful transition objects: ✔️ clouds ✔️smoke ✔️fabric ✔️darkness ✔️lens flare ✔️explosions ✔️foreground objects passing close to camera Example: Instead of: scene A → scene B Use: scene A → camera enters cloud → cloud fills frame → camera emerges into scene B The transition becomes part of the cinematography

4. UI design prompt for @GoogleAIStudio: (create a new project, paste the prompt below - and the AI assistant will guide you through the next steps) - - - - - - - - - - # Role & Architecture Directive: Cinematic Video Scrollytelling Interactive Experience Act as an Elite Creative Technologist and Art Director. Build a luxury, Apple/Nike-grade interactive scrollytelling web application powered by React 18+, TypeScript, Tailwind CSS, Lucide React, and Motion. The core concept is a **Cinematic Video Storytelling Experience**, where an underlying background video syncs seamlessly with an interactive editorial HUD overlay, timecoded chapters, ambient audio engine, and modal popups. --- ## 1. Interaction & Visual Architecture Standards 1. **Background Cinema Engine:** - Full-viewport responsive `<video>` element with seamless playback controls (Play/Pause, scrub, smooth seek, sound toggle, loop/restart). - Subtle vignette, cinematic gradient fades (`from-black/80 via-transparent to-black/90`), and atmospheric grain. - Smooth non-blocking synchronization between the video's current playback time (`currentTime`) and the active editorial scene overlay. 2. **Editorial UI & Luxury Glassmorphism:** - **Header HUD**: Left brand mark + current chapter pill (`Chapter 01 · ...`), center/right minimalist scene navigation links with active underlines, sound toggle pill, and an external brand CTA. - **Main Content Area**: - Giant high-impact display headlines (e.g. tracking-tight, uppercase bold typography). - Clean, balanced body paragraphs using `[text-wrap:balance]` (avoiding awkward ragging or single-word orphan lines). - Contextual interactive CTA buttons that trigger sleek glassmorphic modal windows (e.g., Match Report, Tactical Breakdown, Highlights, Trophy Specs). - **Side Elevator Navigation**: Vertical bullet pill rail on the right edge allowing 1-click jumps to specific video chapters. - **Bottom Cinema Bar**: Glassmorphic timeline with Play/Pause button, running timecode (`00:01.5 / 00:18.0`), segmented chapter progress bars with animated fill, and chapter number chips (`01`, `02`, `03`...). 3. **Interactive Components (e.g., Player/Product/Feature Cards):** - Interactive glass cards with cursor-following radial spotlight sheens (`radial-gradient` tracking mouse coordinates). - Clean badges, avatars with smooth fallback handlers, stats highlights, and external detail links. 4. **Web Audio & Sound Design Engine:** - Built-in Web Audio API synthesizer for tactile UI clicks, cinematic bass whooshes on chapter transitions, and ambient audio support with a master mute toggle. 5. **Data Architecture (`src/scenes.ts`):** - Create a clean, modular configuration array where each scene is defined with: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Provide a realistic 5-scene placeholder setup initially so the app compiles and looks complete out of the box. --- ## 2. Interactive User Guidance / Coaching Workflow When this prompt is first submitted, implement the complete, working template immediately using clean placeholder video and assets. After completing the initial build, **guide the user in your response with the following 4-step onboarding plan**, explaining how they can customize the project: - **Step 1: Upload Your Video**: Provide the link to your video (or upload it into `/public/videos/`). - **Step 2: Define Your Chapters & Timecodes**: Tell the AI what scenes or moments exist in your video (e.g., `00:00 - 00:04: Intro`, `00:04 - 00:09: Key Feature`, etc.). - **Step 3: Add Your Content & Media**: Provide your brand name, headlines, subtitles, and player/product cards with photos or URLs. - **Step 4: Art Direction & Branding**: Choose your brand accent color (e.g., Arsenal Red, Cyber Cyan, Luxury Gold, Stealth Monochrome) and typography style. --- Let's begin: Build the initial production-ready version of this application now with placeholder scenes and interactive features.

Boss, your ideas and the way you bring them to life are amazing!

My brother 🫂🫂🫂 Are you for real?

yes bro

🙏

how much easier it has become to create such complex projects thanks to AI 🫰

Works so well. Websites of tomorrow

Thanks Wan Are you vibe-coding something btw?

I'm working on some little projects with Claude (I do wish he could generate images, though). What about you? And by the way, what AIs do you use?

impressive but not smooth at all on my end with the scroll - I believe the loading size behind must be affecting the ux

Thank you Anthony! I’m planning to optimize the whole workflow in the next projects and see howit will perform Not a UI designer nor a developer - so I have to figure out some tech stuff via these experiments

I think the artistic direction is going in the right direction for this kind of passionate football fans! It's great for the mind to be able to be immersed in a universe we love anywa. :) I've been experimenting also this lately with specific repos that generate video/decompose them frame by frame, etc. pretty ingenious but there is really a work to be done after on optimization so we actually have the "apple like" experience.

u seem to be die hard arsenal fan

Not a die hard, but I used to - since 2003. Now I’m a die hard fan for no team, my football heart is broken in the Summer of 2018…

reminds me of this one I did for @Masandawana

@Masandawana This is pure style my man 💎

@Masandawana wow...thank you bro. I follow you and always appreciate and like your work. Didn't expect a guy like you to comment on a tiny account like mine, thank you Amir ;-)

Insane work bro 👏

Thank you brother!

This is sick! And let's hope Arsenal also win the champions league this seasonnn 🔥

Well, if we’ll find a top class striker like Alvarez or Osimhen - we’ll have this chance. Otherwise, it will be hard.. And thank you so much! Genuinely got the inspiration from your yesterday’s post 💪

Awesome stuff bro ! GUNNERS WE ARE !

Thanks Amer! Are you an Arsenal fan? 👀

Yeah brother been a fan of the legendary "The Non-Flying Dutchman" aka "The Iceman," aka Bergkamp! Been a Gunner eversince ! So happy for the title after 22 years ! Love your work my friend btw ! Gonna share some of my creativity soon also, stay tuned ! Much Love Amir !

Doesnt show on iphone

thanks for the flag, will fiure it out

This was so useful, thanks for putting it together

This took me a lot of pain in the ass, but I like the output - so I had to share all the W’s and L’s 😅 Thank you sm Amira!

I’m also building a contest page for @ArtTeeShow. Using the brief prompt to Gemini 3.7 Flash in Antigravity and Claude Code Sonnet 5 Ultracode mode. I’ll show you the results.

@ArtTeeShow Please do! I’m super interested to check how it turns out out How do you find Sonnet 5 for this project?

@ArtTeeShow Will do mate. But Sonnet 5 might be the winner here.

very good. although not sure on th team choice. lol

Hahah, I understand, but can’t do much - it all started in 2003 when I saw Bergkamp, Henry, Pires, Cole, Ljungberg and other legends.. and this team was a serious argument in the rivalry with my classmate who was a hardcore fan of Man United Great times.. and then, that ‘after the invincible era’… 😬

Understandable mate. Whilst you was going through the joys of that team I was suffering as a city fan. Not so much recent years but let’s see what the next 5/10 years brings…. 🫪

Thanks @AmirMushich as always greatfull to you.

Thank you too Shiek! Honored to read this my man

Building a full tribute website in a few hours is impressive speed.

Which Arsenal trophy celebration in May 2027 are you building another site for? Great work like always sir!

@Arsenal come and see 👀🙈

Fun fact Trying to build a sports website, so this was definitely useful because I want it to feel interactive asf. Thinking: web opens up in a football stadium, camera speeds forward through the players playing on pitch, and as it hits a player, it slows down on each player displaying different assets on them (like their boots, shin guard, socks, or whatever they’re wearing that’s available for sale as a sports shop) pans to the next (we focus on just 3 players) then for the last player, it focuses only on his jersey, giving a final shot from the neck down to the hip; then ends. Still thinking this thru haha

The strongest AI visuals are becoming less about “look what the model can make” and more about creating a usable experience around the visual. That distinction matters a lot for ecommerce product media.

Why not PSG champions League Frero ?