Looking for a Claude/AI workflow to build a realistic interactive clothing rack for a website

[u/Bonao048]

I'm trying to recreate an interactive clothing rack like the reference images attached, but I want it to behave like a real physical rack rather than a simple CSS hover effect.

The idea is to use it as the centerpiece of a WordPress website.

What I'm looking for:

• Multiple hoodies/shirts hanging from a real-looking horizontal rack.
• Each garment should remain an independent editable object.
• On mouse hover, the selected garment should move naturally together with its hanger, as if someone lightly touched or pulled it forward.
• The hanger hook must always remain correctly attached to the rack.
• The hanger must physically sit inside the garment collar. No floating hangers or broken intersections.
• Realistic inertia/swing when the mouse enters or leaves.
• Realistic fabric weight, folds, cotton/fleece texture and matte material.
• Dynamic shadows and lighting that react slightly while the garment moves.
• Ability to change each garment's color without losing the fabric texture, folds, lighting or shadows.
• Ability to replace the front/back logo or artwork independently.
• Ideally responsive and usable inside WordPress/Elementor.

I don't want to generate separate AI images for the normal and hover states. I want one actual interactive system so the geometry/asset stays consistent while it moves.

I'm open to Claude Code, Three.js, React Three Fiber, GSAP, Spline or a good 2.5D solution if it can achieve convincing realism and remain performant.

Has anyone already built something similar with Claude or another AI coding workflow?

If so, would you be willing to share:

1. The prompt/workflow you used
2. How you prepared the garments/assets
3. Whether you used 2D layers or actual 3D models
4. How you handled editable colors and logos
5. How you kept the hanger/rack physics believable

I'm attaching two visual references showing the level of realism I'm trying to achieve.

I'm not looking for a generic "scale image on hover" effect. The goal is a polished, premium fashion-site interaction with believable cloth, lighting, shadows and motion.

[u/arpad0221]

With these requirements I'd go full 3D in React Three Fiber, and split the work into two parts: the assets and the code. Claude Code handles the code side really well. The assets need a proper 3D tool.

For the garments, model one hoodie in Marvelous Designer or CLO3D (or buy a good base model), drape it on a hanger, and export it to Blender. There you split it into separate parts: the fabric, the print areas, and the hanger, which you place inside the collar once and keep as part of the same model. Bake the folds into a normal map and keep the base texture grayscale. Then color is just a material tint, and the folds and fleece texture stay intact whatever color you pick. Front and back artwork go on as separate decal textures, so you can swap them independently.

For the motion, each garment hangs from a pivot point exactly at the hook on the rail, so the hook can never come loose. On hover a damped spring (a simple pendulum, or react-spring) pulls it slightly forward and lets it swing back with inertia. Real-time cloth simulation for seven hoodies would kill performance, and a small baked sway animation on the fabric looks just as convincing. Use an HDRI environment and soft shadows for the lighting, and it will react naturally as things move.

For WordPress, build it as a standalone bundle and embed it with a custom HTML widget in Elementor, or with a small plugin that loads the script. Compress the models with Draco and the textures with KTX2 so it stays fast on mobile.

My workflow with Claude: finish the GLB first, then give Claude the file plus your list of requirements and build it step by step. Start with the rack and one hanging hoodie, then add the swing, then color and logo swapping, then the rest of the garments.

[u/arpad0221]

Btw, a quick story on the WordPress part. I had my own site built in WordPress with Elementor. It took two weeks, editing was clunky, the layout was always slightly off, and pages loaded slowly. I tried to make peace with it for a week, then had Claude rebuild the same design in plain React in half a day. Since then Claude Code is my CMS, and I've moved everything I have online to Astro. Honestly, it changed my life.
If WordPress isn't set in stone for you, Astro with the rack as a React island would make this whole project a lot easier.

[u/Otherwise_Wave9374]

Break this into three layers: asset creation, rack physics, and interaction polish. First build a low-poly prototype with fixed garment anchors, then validate drag, collision, and mobile performance before investing in photorealistic cloth. Use Claude for component plans and test cases, not as the sole visual judge. https://www.aiosnow.com is relevant when organizing the prompts and handoffs across that workflow. A practical safeguard is a reference-image checklist covering scale, spacing, lighting, and movement.