Asset generation guide and master Claude Code specification to build NEXUS // STRIKE: a full-screen, cinematic scroll-driven gaming website powered by React, GSAP ScrollTrigger, and Lenis. Click Copy on either card to grab the prompt text.
Omni Flash / Google Flow AAA Media PromptsMedia Prompts · 32:9 Atlas / 4 Scrubbable Videos
Complete prompt suite for generating the 32:9 dual-panel character atlas (hero-base & hero-suit), exploded loadout lab images, combat systems, and 4 scroll-controlled transformation videos.
1. Assets Generation :-
Omni Flash / Google Flow asset prompts
Use this shared style suffix in every prompt:
Original premium tactical-shooter universe, cinematic AAA game key art, precise hard-surface materials, gunmetal black, matte titanium, restrained crimson red #FF4655 accents, solid seamless graphite-black background #090B10, no environment, no gradients, no text, no logos, no watermark, no HUD, no UI, no existing-game characters or symbols, sharp silhouette separation, cinematic studio lighting, 4K.
---
Hero master image — generate once, crop into two hero images
Create a 32:9 dual-panel character atlas made of two perfectly matching 16:9 panels, divided by a thin invisible center line.
LEFT PANEL: an original gender-neutral elite tactical operative named VANTA-09, unmasked, standing in a confident three-quarter full-body pose, facing slightly left. Dark cropped tactical jacket, fitted utility trousers, technical boots, minimal chest harness, calm expression. Character is positioned on the right side of the frame; leave the left 42% clean and empty for website copy.
RIGHT PANEL: the exact same VANTA-09 character, pixel-identical body pose, face direction, crop, character scale, lens, lighting, shadows, hands, and composition. Add only the fully equipped combat transformation: segmented crimson-black face mask, reinforced shoulder armor, chest rig, tactical gloves, subtle red suit seams, precision armor plating.
The two panels must be exact matching layers so each half can be cropped and overlaid in a website for a progressive scroll-controlled costume reveal.
[SHARED STYLE SUFFIX]
Crop and save:
Left half: hero-base.webp (or hero-base.jpeg)
Right half: hero-suit.webp (or hero-suit.jpeg)
---
Image 3 — Loadout Lab
An original futuristic tactical rifle in a pristine exploded technical arrangement, viewed straight-on with a locked orthographic-like camera. Rifle receiver centered, barrel, optic, magazine, stock, muzzle device, internal mechanism, tactical knife, compact recon drone, armor plates, magazines, and utility canisters suspended in disciplined symmetrical spacing. No particles, no action pose, no scenery. Large clear negative space around every part.
[SHARED STYLE SUFFIX]
---
Image 4 — Combat Systems
A premium close-medium product composition of a futuristic armored tactical gauntlet and a compact recon device floating on the right side of frame. Gunmetal armor plates, micro-mechanical joints, controlled crimson energy core, subtle technical markings with no readable text. Leave the left 45% of frame empty for heading and feature copy. Straight-on camera, clean product-render precision.
[SHARED STYLE SUFFIX]
---
Image 5 — Final Protocol
VANTA-09 in the complete masked combat suit, standing centered in a composed full-body hero stance with a lowered original futuristic rifle. Thin crimson rim light traces the armor. A few restrained geometric tactical fragments float around the figure in a controlled symmetric formation. Generous empty space for a final website call to action. Fixed front-facing medium-wide camera.
[SHARED STYLE SUFFIX]
---
Four scroll-controlled video prompts
Do not loop these videos. The website will map scroll position to video time; scrolling upward naturally reverses them.
Video 1 — Hero suit assembly
8-second scroll-scrubbable transformation shot. Fixed front-facing medium-wide camera at all times: no pan, no tilt, no dolly, no zoom, no shake, no lens change, no reframing.
VANTA-09 begins unmasked in the base tactical outfit. Over the sequence, the combat suit assembles in deliberate phases: 0–2s face mask forms; 2–4s shoulder armor and chest rig lock in; 4–6s gloves and forearm armor seal; 6–8s crimson suit seams activate once. Character maintains the exact same pose throughout. End with the complete suit. No text, no scenery, no explosions.
[SHARED STYLE SUFFIX]
---
Video 2 — Exploded rifle
8-second scroll-scrubbable weapon technical animation. Camera absolutely locked in a straight-on view: fixed 50mm lens, no camera movement of any kind.
0–2s: intact original futuristic rifle, centered.
2–6s: every rifle component smoothly separates into a precise symmetrical exploded view.
6–8s: parts settle into a perfectly organized final technical layout.
All components remain fully visible. No firing, smoke, debris, or environment. This must read clearly in reverse when a user scrolls upward.
[SHARED STYLE SUFFIX]
---
Video 3 — Combat systems activation
7-second scroll-scrubbable product animation. Static front-facing camera, no zoom or reframing. A futuristic armored gauntlet and compact recon device float on the right side of frame.
0–2s: dormant, closed components.
2–5s: mechanical panels articulate with precise slow motion; the device unfolds.
5–7s: a controlled crimson energy core activates and stabilizes.
Keep the left side empty for website copy. No character, no background scene, no text.
[SHARED STYLE SUFFIX]
---
Video 4 — Final protocol
8-second scroll-scrubbable final hero shot. Camera locked front-facing and medium-wide for the entire clip. VANTA-09 begins in a neutral full-body stance. As the sequence progresses, the operator lifts the rifle into a composed ready position, armor seams glow faint crimson, and a small set of geometric tactical fragments form a precise orbit around the figure. Finish in a powerful still final stance.
No aggressive action, no muzzle flash, no scenery, no text, no camera movement.
[SHARED STYLE SUFFIX]
Master developer prompt instructing Claude Code to build NEXUS // STRIKE with React, GSAP ScrollTrigger, Lenis, and full-viewport media presentation across 4 pinned chapters.
Build a clean, premium, full-screen immersive gaming website called “NEXUS // STRIKE.”
Use React, Tailwind CSS, GSAP ScrollTrigger, and Lenis.
This is not a card-based or dashboard-style website. It is a cinematic scroll experience: every generated image and video is presented as a full-screen visual chapter, with minimal HTML text layered over it.
Use all provided media assets completely.
================================
IMPORTANT MEDIA RULES
================================
- Never place key media inside small cards, browser frames, device mockups, or boxed content panels.
- Every image and video must be displayed at large scale, occupying the full viewport or most of it.
- Do not crop important media. Use object-fit: contain when necessary so every asset remains fully visible.
- The empty area around contained 16:9 media must remain solid #0A0A12, making it feel intentional and immersive.
- Text is always HTML layered on top of the media, never embedded into media.
- Use subtle dark overlays only where required for readability; do not obscure the artwork.
- Use every generated asset in the visual sequence.
================================
ASSETS MAPPING
================================
Hero:
- hero-base.jpeg
- hero-suit.jpeg
- hero_transform.mp4
Loadout:
- loadout-exploded.jpeg
- gun_exploded.mp4
- Futuristic_rifle_exploded_techni.jpeg
- Futuristic_rifle_exploded_techni..._2K_202608142226.jpeg
Systems:
- systems.mp4
- Armored_gauntlet_and_recon_device_202608141841.jpeg
Final:
- final-protocol.mp4
- Armed_character_standing_in_comb..._202608141841.jpeg
================================
VISUAL DESIGN
================================
- Background: #0A0A12 Deep Void Indigo.
- Surface overlays only: #161626, with very low opacity.
- Primary scroll/progress color: #00F0FF Electric Cyan.
- Secondary energy/accent color: #8B5CF6 Hyper Violet.
- No red, orange, green, gold, gradients, glassmorphism, excessive borders, or generic gaming dashboard elements.
- Use cinematic typography: massive condensed uppercase headlines, small technical labels, minimal body copy.
- Keep the page calm, spacious, refined, dark, and expensive.
================================
SCROLL SYSTEM
================================
- Build a sequence of full-screen pinned visual panels.
- Each panel uses the media as the main experience.
- Text overlays fade, move, and reveal based on scroll.
- Videos are scrubbed by scroll position, not autoplayed.
- Scrolling upward reverses every transition smoothly.
- On mobile, disable pinning and show a clean stacked vertical experience with static image fallbacks.
- Add a subtle fixed vertical progress indicator on the right using Electric Cyan.
================================
SECTION 1 — HERO: SUIT UP
================================
Use all three hero assets in one immersive scroll chapter.
Visual order:
1. Start with hero-base.jpeg filling the screen, fully visible.
2. Overlay hero-suit.jpeg exactly over hero-base.jpeg.
3. Reveal hero-suit.jpeg through scroll-controlled masks in stages: mask, shoulders, chest, arms, then full suit.
4. Use hero_transform.mp4 as the final full-screen hero state, scrubbed by scroll.
Text overlay:
- Top-left: NEXUS // STRIKE
- Small label: 01 / 04
- Large headline: SUIT / UP.
- Short line: “The signal begins beneath the armor.”
- Bottom-left CTA: ENTER THE ARENA
- Bottom-right label: SCROLL TO INITIALIZE
Keep text on the left side and character visual on the right whenever possible.
================================
SECTION 2 — LOADOUT: BUILT FOR IMPACT
================================
Make this a clean full-screen weapon chapter. Use every rifle image and video.
Visual order:
1. Full-screen loadout-exploded.jpeg.
2. Fade into Futuristic_rifle_exploded_techni.jpeg.
3. Fade into Futuristic_rifle_exploded_techni..._2K_202608142226.jpeg.
4. End with gun_exploded.mp4, scrubbed from intact rifle to complete exploded view.
All media must be large, centered, and fully visible against the solid background.
Text overlay:
- Small label: 02 / 04
- Large headline: BUILT FOR / IMPACT.
- Small description: “Every component is engineered for the instant before impact.”
- Three minimal technical labels positioned around the rifle:
MODULAR RECEIVER
SIGNAL OPTIC
KINETIC CORE
Use thin cyan technical lines connecting labels toward the weapon. No cards.
================================
SECTION 3 — SYSTEMS: PRECISION IN MOTION
================================
Use Armored_gauntlet_and_recon_device_202608141841.jpeg as the still opening state, then transition into systems.mp4.
Visual order:
1. Full-screen armored gauntlet and recon device image.
2. As the user scrolls, scrub systems.mp4 from inactive to activated state.
3. Keep the device and gauntlet as the full visual focus.
Text overlay:
- Small label: 03 / 04
- Large headline: PRECISION / IN MOTION.
- Three clean vertically arranged phrases:
TACTICAL INTENT
KINETIC RESPONSE
SILENT SIGNAL
- Each phrase activates as it enters the scroll range with a cyan line and a tiny violet pulse.
- Use minimal status copy: SIGNAL: LOCKED / RESPONSE: 0.04S / STATUS: ONLINE.
================================
SECTION 4 — FINAL PROTOCOL
================================
Use Armed_character_standing_in_comb..._202608141841.jpeg as the opening still, then transition into final-protocol.mp4.
Visual order:
1. Full-screen armed-character image, fully visible.
2. Fade into final-protocol.mp4.
3. Scrub the video until the operator reaches the final ready state.
4. End on a strong still cinematic composition.
Text overlay:
- Small label: 04 / 04
- Large headline: THE ARENA / IS WAITING.
- Short line: “Signal accepted. The next move is yours.”
- Primary CTA: INITIALIZE MATCH
- Small status line: SYSTEM STATUS: READY
================================
NAVIGATION
================================
- Minimal transparent fixed navigation.
- Logo text left: NEXUS // STRIKE
- Small links right: LOADOUT / SYSTEMS / PROTOCOL
- Navigation should fade slightly while scrolling but remain usable.
- Use cyan only for active states.
================================
ACCESSIBILITY AND PERFORMANCE
================================
- Videos: muted, playsInline, preload metadata, controlled with GSAP ScrollTrigger.
- Images and videos must have proper fallback behavior.
- Respect prefers-reduced-motion: show full static image states instead of scrubbed video.
- Use semantic HTML, keyboard focus states, descriptive alt text, lazy loading below the fold, and responsive layouts.
- Deliver complete polished production-ready code with components, media handling, GSAP animation setup, ScrollTrigger logic, and responsive styling.