Remix

Make your own version of AERON Sneaker Lab

Get an exact, working copy in your account, then change anything with chat.

Original by Harnish XII B1

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

LEVEL 3 BUILD CHALLENGE — AERON SNEAKER LAB

1. Project Objective

Build a complete, premium, interactive website for a fictional futuristic sneaker brand called AERON.

This is a real frontend implementation challenge, not a static mockup. The result must feel like a professionally designed product-launch website with cinematic visuals, smooth animations, functional interactions, and a polished responsive layout.

Use your best available implementation capabilities. Do not ask follow-up questions. Make reasonable design decisions independently.

2. Visual Direction

Create a distinctive visual identity using:

- Deep charcoal and near-black backgrounds.
- Warm white typography.
- Electric orange as the primary accent.
- Large editorial headlines and carefully balanced negative space.
- Premium product photography or a convincing original 3D sneaker model.
- Subtle grain, atmospheric lighting, soft shadows, and layered depth.
- A modern geometric sans-serif font.

Avoid generic AI-generated dashboard layouts, excessive rounded cards, random gradients, unnecessary glowing borders, and template-like sections.

The website should look expensive, intentional, and cohesive.

3. Hero Experience

Create a full-screen opening section featuring:

- A bold headline: “ENGINEERED TO MOVE.”
- Supporting text introducing AERON's next-generation performance sneaker.
- A prominent product visual occupying the center or right side.
- A primary “EXPLORE THE SHOE” button.
- A secondary “DISCOVER THE TECHNOLOGY” link.
- A minimal navigation bar with the AERON logo, Collection, Technology, and Shop.
- A small scroll indicator.

Animate the headline, navigation, and product visual into view with staggered timing.

If actual 3D rendering is supported, create a sneaker model using Three.js or an equivalent technology. Allow the user to rotate it through pointer dragging or touch gestures.

If genuine 3D cannot be implemented, use a high-quality product image with convincing layered motion. Do not pretend a static image is a working 3D model.

4. Interactive Product Explorer

Build a product section with:

- A large product preview.
- Three selectable colourways: Obsidian, Arctic, and Voltage.
- Clickable colour swatches.
- A product name, short description, and price of $189.
- Three selectable sizes: US 8, US 9, and US 10.
- An “ADD TO BAG” button.
- A visible shopping-bag counter.

Changing colour must visibly update the product appearance. Selecting a size must visibly update the selected state. Adding an item must update the bag counter and display clear feedback.

Prevent adding an item without selecting a size.

Use original, consistent product visuals. If separate assets are unavailable, implement a convincing visual colour change rather than leaving the controls decorative.

5. Technology Section

Create a visually engaging section introducing three fictional technologies:

- AEROFLEX — lightweight adaptive cushioning.
- GRIPCORE — high-traction outsole.
- FLOWKNIT — breathable engineered upper.

Use three distinct visual compositions, not three identical generic cards.

Include subtle scroll-triggered reveals, visual diagrams, product close-ups, or layered illustrations.

These are fictional product features, not claims about a real product.

6. Motion and Interaction

Implement polished animations throughout:

- Smooth scrolling between sections.
- Staggered entrance animations.
- Subtle parallax on suitable visual elements.
- Hover and pressed states for buttons.
- Smooth colourway transitions.
- Animated shopping-bag feedback.
- Scroll-triggered section reveals.
- A mobile navigation menu that opens and closes properly.

Animations should feel smooth and deliberate, not distracting. Respect reduced-motion preferences.

Do not make the user wait through a long intro before they can interact with the site.

7. Shopping Bag

Create a working shopping-bag drawer or panel.

It must display:

- Selected sneaker colour.
- Selected size.
- Quantity.
- Item price.
- Subtotal.
- A button to remove the item.
- A close button.

Allow the user to add an item, open the bag, remove the item, and see the updated count and subtotal.

This is a frontend demonstration only. Do not implement real payments, collect personal information, or claim that a real order has been placed.

8. Responsive Design

The website must work on desktop, tablet, and mobile.

On mobile:

- Stack content cleanly.
- Keep text readable.
- Prevent horizontal overflow.
- Resize product visuals appropriately.
- Make controls touch-friendly.
- Ensure the mobile navigation and shopping bag work.
- Preserve the visual identity instead of merely shrinking the desktop layout.

9. Technical Requirements

- Build a functioning website, not a static image or design-only preview.
- Use reusable components and a sensible project structure.
- Use CSS transitions or a suitable animation library.
- Use Three.js or an equivalent only if it can be implemented reliably.
- Avoid unnecessary dependencies.
- Do not use paid APIs or require users to provide their own API keys.
- Do not introduce a backend unless essential; all shopping interactions can remain client-side.
- Use local or freely accessible assets where possible.
- Avoid broken image links, missing assets, console errors, and placeholder buttons.
- Ensure all navigation links and interactive controls have meaningful behaviour.

10. Final Quality Check

Before finishing, test the actual implementation.

Verify that:

1. The page loads without errors.
2. Navigation reaches the correct sections.
3. The mobile menu opens and closes.
4. Every colour swatch works.
5. Size selection works.
6. Adding to the bag updates the counter.
7. The bag displays the correct product details and subtotal.
8. Removing an item updates the bag correctly.
9. Animations do not cause layout overlap.
10. The page remains usable on a narrow mobile screen.

Fix obvious bugs before presenting the result.

Final Instruction

Prioritise this order:

1. Functional correctness.
2. Strong visual design.
3. Smooth, polished animation.
4. Responsive behaviour.
5. Code quality and reliability.

Deliver the most complete working implementation possible within your available resources. Do not sacrifice the core functionality merely to create a visually impressive first screen.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.