Create a premium 15-second 16:9 animated footwear e-commerce

English Prompt

Create a premium 15-second 16:9 animated footwear e-commerce landing page using @[UI Sample.png] as the strict visual reference for layout, typography, product placement, graphic style, colors, cursor interaction and overall art direction. Use all six uploaded standalone shoe images as the exact product references. Preserve each shoe’s silhouette, construction, materials, colors, laces and sole geometry. Never redesign, merge or recolor the products.

PRODUCT REFERENCES

Use these exact names and corresponding images:

01 CLOUD POP — @[CLOUD POP.png]Pastel cream, pink and lavender sneaker with blue laces and translucent bubble sole.

02 BLAZE WAVE —@[BLAZE WAVE.png] Orange, royal-blue and cream sneaker with fluid sculptural wave sole.

03 PIXEL STACK — @[PIXEL STACK.png]Black, cyan, white and yellow pixel/block high-top sneaker.

04 CHROME ORBIT — @[ORBIT CHROME.png]Metallic silver futuristic shoe with purple orbital structures, lime mesh and turquoise details.

05 BLUSH PUFFER —@[BLUSH PUFFER.png]Pink and burgundy padded sneaker with oversized quilted upper and transparent pink sole.

06 TOXIC X-RAY —@[TOXIC -X RAY.png] Transparent sneaker with toxic-lime structural cage, electric-blue laces and translucent lime sole.

Never interchange products or names.

WEBSITE UI

Closely follow UI Sample(1) with a playful professional Y2K × futuristic footwear × editorial e-commerce aesthetic.

Warm cream/off-white base with colorful product-specific graphics.

Top-left:

SOLESHIFT°

Navigation:

COLLECTION ABOUT SHOP

Top-right:

BAG 00

Large dynamic headline on the left, hero shoe center/right, CTA underneath and six rounded product cards across the bottom:

01 CLOUD POP02 BLAZE WAVE03 PIXEL STACK04 CHROME ORBIT05 BLUSH PUFFER06 TOXIC X-RAY

All typography must remain sharp, stable and perfectly spelled.

INTERACTION

Show a clearly visible white mouse cursor with subtle dark outline.

The cursor must hover over every product in exact order:

01 → 02 → 03 → 04 → 05 → 06

Every interaction must clearly read:

cursor hover → card reacts → matching hero appears → headline changes → background transforms → cursor continues.

Hovered cards rise slightly, scale to approximately 104%, receive a colored outline/shadow and bounce.

Hero shoes occupy approximately 65–70% of the main hero area.

0:00–0:02 — CLOUD POP

Cursor hovers 01 CLOUD POP.

CLOUD POP becomes the large hero with a soft scale-up and elastic bounce.

Headline:

CLOUD POP

Subline:

SOFT. BOLD. DREAMY.

CTA:

STEP INTO FUN →

Background: cream, pastel pink and lavender with glossy bubbles, organic blobs, stars, dots and subtle halftone textures.

0:02–0:04 — BLAZE WAVE

Cursor slides to 02 BLAZE WAVE.

CLOUD POP exits through a fast graphic wipe. BLAZE WAVE springs into the hero area.

Headline:

BLAZE WAVE

Subline:

FAST. FLUID. LOUD.

Transform the environment into cream, vivid orange and electric blue. Add flowing 2D waves, liquid ribbons, warped checkerboards, curved speed lines and bouncing circles inspired by the shoe’s sculptural sole.

0:04–0:06 — PIXEL STACK

Cursor moves to 03 PIXEL STACK.

BLAZE WAVE breaks into rectangular graphic wipes while PIXEL STACK assembles through a rapid pixel-block transition.

Headline:

PIXEL STACK

Subline:

BLOCK. BUILD. BREAK.

Background: cream, cyan, yellow, black and white with pixel squares, stepped grids, modular blocks and checker patterns.

Keep everything premium rather than videogame-like.

0:06–0:08 — CHROME ORBIT

Cursor hovers 04 CHROME ORBIT.

PIXEL STACK collapses through blocks and CHROME ORBIT sweeps into position along a curved orbital path.

Headline:

CHROME ORBIT

Subline:

METAL. MOTION. FUTURE.

Palette becomes metallic silver, purple, acid lime and turquoise. Add orbital rings, chrome spheres, circular outlines and looping paths.

Use subtle floating motion without deforming the shoe.

0:08–0:10 — BLUSH PUFFER

Cursor moves to 05 BLUSH PUFFER.

CHROME ORBIT disappears through a circular wipe. BLUSH PUFFER pops into the hero position with soft elastic easing.

Headline:

BLUSH PUFFER

Subline:

SOFT. PLUSH. BOLD.

Background transforms into cream, blush pink and burgundy with inflated blobs, transparent bubbles, stitched-line graphics and floating pink spheres.

Motion feels soft, cushioned and playful.

0:10–0:12.5 — TOXIC X-RAY

Cursor reaches 06 TOXIC X-RAY.

The card receives a bright toxic-lime outline and energetic bounce.

TOXIC X-RAY becomes the final hero using rapid scale-up, elastic overshoot and crisp landing.

Headline:

TOXIC X-RAY

Subline:

CLEAR. BOLD. ELECTRIC.

CTA:

STEP INTO FUN →

Make this state strongly resemble UI Sample(1).

Use cream, cyan/turquoise and toxic lime. Place a huge turquoise 06 behind the shoe, partially cropped.

Add turquoise grid flooring, lime waves, checkerboard fragments, purple squiggles, glossy lime spheres, halftone dots, stars and floating tubular graphics.

0:12.5–0:15 — FINAL HOLD

Hold the completed TOXIC X-RAY interface.

Cursor remains beside the highlighted 06 TOXIC X-RAY card.

Use subtle micro-motion: hero settles, oversized 06 drifts slightly, lime ribbon flows, purple coil rotates and small spheres float.

Keep all six cards visible.

Final readable interface:

SOLESHIFT°TOXIC X-RAYCLEAR. BOLD. ELECTRIC.STEP INTO FUN →

MOTION STYLE

Use professional After Effects-style 2D motion graphics: elastic bounce, overshoot, scale pops, masking, graphic wipes, sliding shapes, kinetic typography, cursor reactions and smooth easing.

Typography should be chunky, rounded, playful and highly legible, inspired directly by the sample UI.

Each product receives a different transition personality while remaining part of one coherent design system.

Keep the website front-facing and almost camera-locked. No cinematic camera orbit, excessive zoom or perspective distortion.

PRODUCT FIDELITY

Each uploaded shoe is an immutable product asset.

01 hover = CLOUD POP02 hover = BLAZE WAVE03 hover = PIXEL STACK04 hover = CHROME ORBIT05 hover = BLUSH PUFFER06 hover = TOXIC X-RAY

Bottom thumbnails must match their corresponding references.

Never alter shoe geometry, material, transparency, sole, laces or color distribution. Never combine features from different shoes.

QUALITY / AVOID

Premium footwear campaign quality, polished professional e-commerce UI, crisp product cutouts, photorealistic materials, smooth 60-fps-feeling animation, strong hierarchy, controlled negative space and seamless transitions.

Avoid: text errors, misspellings, duplicate products, missing shoes, extra shoes, product morphing, hybrid shoes, wrong thumbnails, warped geometry, random UI, corrupted navigation, unreadable text, excessive camera movement, people, hands, unrelated logos or watermarks.

Final goal: a fast, playful and highly polished 15-second SOLESHIFT° interactive footwear website animation where the cursor explores all six shoes in sequence and every hover transforms the hero product, typography, palette and motion-graphic environment while preserving the professional visual language of UI Sample(1).