How to Build an Interactive 3D Website with AI, from One Image

Usage & License

Use the prompts and downloadable templates on this page in your own personal and commercial projects. What's not allowed: reselling, repackaging, redistributing, or republishing this material — on YouTube, Gumroad, paid courses, newsletters, or anywhere else. Send people to komputermechanic.com instead. Violations get reported and taken down.

I would like you to design a unique homepage hero section for a premium
VR headset / spatial computing product website, using the four reference
images I provided as visual inspiration. Do not copy any one design
directly — combine the strongest ideas from all four into a completely
original concept.

Give me the hero section as a single high-quality image that looks like
a real finished desktop website screenshot, not a wireframe. Don't build
the actual site or any functionality.

Build the homepage shown in my uploaded image as a working HTML website. Use the image as
the visual reference and match it as closely as possible: composition, typography, colors,
spacing, product placement, image crops, navigation and buttons.

Build just this homepage for now. Do not invent extra sections or build the other
navigation pages.

Use real HTML text and controls, CSS for the layout, and JavaScript only where needed. Do
not turn the entire screenshot into a background with invisible buttons on top. Keep the
main product artwork on its own visual layer so we can animate it later. Reuse the
supplied artwork where possible. If the product cannot be cleanly extracted, explain what
asset is needed instead of replacing it with an unrelated illustration.

For this design, keep the white background, black typography, oversized pale-gray
“Spatial.” title, orange accents and floating headset. Make the main action a refined
orange pill with a small circular arrow detail.

On desktop, use the browser's full available width and height, including a 2K monitor.
Keep small, consistent edge insets and place the footer near the bottom. Avoid a fixed
maximum-width container that leaves wide blank margins. Adapt the composition for smaller
screens rather than cropping content or shrinking everything into unreadable text. Allow
vertical scrolling on mobile when necessary.

Make buttons keyboard accessible and text selectable. Preserve the design at rest; we will
add the motion in later prompts.

Check the result in a browser at laptop, 2560×1440 and mobile viewport sizes. Fix
overflow, missing artwork and overlaps. Deliver the finished HTML and any required assets,
with simple instructions for opening it. Tell me about any remaining visual differences
rather than claiming a perfect match without checking.

Add smooth mouse-driven movement to the main headset artwork on the homepage we just
built. Preserve the approved layout and styling.

As the pointer moves across the hero:
- Moving up makes the headset rise slightly and tilt downward.
- Moving down makes it lower slightly and tilt upward.
- Moving left or right gives it a subtle corresponding sideways tilt.

Use the center of the hero as the neutral position. As a starting point, limit vertical
movement to about 20 pixels, vertical tilt to about 12 degrees and sideways tilt to about
10 degrees. Use gentle easing so it follows the pointer fluidly rather than snapping or
shaking. Return smoothly to neutral when the pointer leaves the hero or the browser loses
focus.

Keep the entire headset, including its orange side panel, moving together. Do not move the
typography, stage or surrounding interface with it. Keep the product's visual proportions
intact and prevent movement from clipping the artwork.

Use perspective transforms on the separate artwork layer. This is a depth illusion from a
2D image, not a full 360-degree model; do not pretend it can reveal unseen sides of the
product.

On touchscreens, keep the product stable unless the visitor deliberately drags it, and
preserve normal page scrolling. Respect reduced-motion preferences. Check the direction of
movement in the browser and confirm that the page's existing controls still work.

Implement the effect in the website and return the updated files.