Reduce motion is on · previews stay still
All effects Simulations Cloth Drop on a Chrome Sphere Cloth Drop on a Chrome Sphere Cloth Drop on a Chrome Sphere is a published Three.js prompt by @EvoLinkAi. It has source credit and no verified 3dmotion rebuild.
by @EvoLinkAi on X · 2026-10-10
Author preview · no on-site rebuild Original prompt @EvoLinkAi · X Rebuild status No verified 3dmotion rebuild. Open demo No live demo linked here. Prompt by @EvoLinkAi. Copies include source credit.
Original prompt Free · 8,215 characters Build a polished, interactive 3D cloth simulation for a visual comparison between AI coding models. The central visual: a square piece of fabric drops onto a stationary chrome sphere. We repeat the exact same drop with progressively denser…
Build a polished, interactive 3D cloth simulation for a visual comparison between AI coding models.
The central visual: a square piece of fabric drops onto a stationary chrome sphere. We repeat the exact same drop with progressively denser cloth meshes, showing how the deformation changes.
Create a working browser application using Three.js and TypeScript/JavaScript. Implement and run it in the current workspace. Complete the project autonomously, test it, and fix problems before finishing.
VISUAL DIRECTION
Aim for a premium, oddly satisfying 3D animation: one large, clearly visible subject, beautiful fabric, convincing contact, and restrained studio lighting.
Use a 16:9 composition. The finished recording will be stacked with two other recordings inside a vertical 9:16 video, so everything must remain legible when reduced to one-third of a phone screen.
Scene:
- A stationary, polished chrome sphere above a matte dark charcoal floor.
- A square of rich coral-red satin fabric suspended horizontally above it.
- Fabric side length approximately 2.6 times the sphere diameter, so the edges can drape around the sphere.
- A large soft key light, gentle fill, and a subtle rim light.
- Broad studio reflections that make the chrome readable.
- Soft contact shadows and visible folds.
- A restrained dark background, with strong separation between fabric, sphere, and floor.
The fabric should look like woven satin, not rubber, liquid, foil, or plastic. Use subtle texture and restrained sheen. Render both sides correctly.
Choose a fixed, slightly elevated three-quarter camera angle that reveals the sphere’s top and the hanging fabric edges. Keep the subject large while leaving enough room for the initial drop.
No camera orbit during the automatic showcase. No decorative dashboard, branding, model names, introductory splash screen, or unnecessary text.
REAL CLOTH SIMULATION
Use a real-time physical simulation. A position-based or extended position-based dynamics solver is appropriate, but choose an implementation you can make reliable and performant.
The motion must emerge from gravity, constraints, and collision handling.
Do not:
- Replace the cloth with a prerecorded video.
- Use a shader wave or a canned vertex animation as a substitute for simulation.
- Animate vertices toward a precomputed draped shape.
- Display arbitrary face counts unrelated to the mesh.
- Swap in a high-resolution cloth while displaying a low-resolution label.
Implement:
- Gravity.
- Structural constraints that resist stretching.
- Shear resistance.
- Bending resistance.
- Damping.
- Stable sphere and floor collisions.
- A small collision margin that prevents visible intersections without making the cloth float.
- Consistent simulation timing independent of rendering frame rate.
The cloth is completely free when released: do not pin its corners.
Use the same physical dimensions and target material properties at every mesh density. Account for mesh spacing when setting masses and constraints so changing the mesh density does not arbitrarily change total mass or fabric stiffness.
Use the same deterministic initial setup at every level. A small fixed offset or rotation relative to the sphere is acceptable to create attractive asymmetric folds, but keep it identical across all runs.
Prioritize preventing the cloth from cutting through the sphere. At coarse mesh resolutions, checking only vertices is insufficient: an edge or triangle can intersect the sphere while its vertices remain outside it. Handle this as well as practical, and do not hide failures with camera placement.
Allow coarse meshes to look coarse. Higher resolutions should reveal more detailed deformation naturally, without fabricated “improvement.”
MESH RESOLUTIONS AND HONEST LABELING
Use these square simulation grids:
2 × 2 cells = 4 quads
4 × 4 cells = 16 quads
8 × 8 cells = 64 quads
16 × 16 cells = 256 quads
32 × 32 cells = 1,024 quads
64 × 64 cells = 4,096 quads
Each quad is rendered as two triangles.
The large recording label should read:
“4 FACES”
“16 FACES”
“64 FACES”
“256 FACES”
“1,024 FACES”
“4,096 FACES”
Include a small, consistent subtitle:
“quad grid”
In the expanded controls, show the exact quad, triangle, and vertex counts. Derive them from the active mesh.
Do not add hidden subdivision that misrepresents the displayed resolution. Shading may be smooth, but the cloth’s visible geometry must match the selected grid.
AUTOMATIC SHOWCASE — EXACTLY 24 SECONDS
Add a “Showcase” button that starts a deterministic sequence.
Six stages, exactly four seconds per stage:
1. 4 faces
2. 16 faces
3. 64 faces
4. 256 faces
5. 1,024 faces
6. 4,096 faces
For each stage:
- First 0.25 seconds: reset the cloth to the identical suspended starting position and display the updated count.
- Next 3.75 seconds: release it and simulate the fall and draping.
- Immediately reset into the next stage without a loading screen or a long transition.
Pre-create or prepare the required resources so switching resolutions does not cause a noticeable pause.
Keep camera, lighting, fabric color, object positions, and simulation time scale identical throughout.
Do not slow down the simulation at higher resolutions to preserve frame rate. Optimize the solver instead.
At the end, retain the last scene and allow interaction. Provide a one-click replay.
INTERACTION
Outside the automatic showcase, support:
- Selecting any mesh resolution.
- Dropping/resetting the cloth.
- Pausing/resuming.
- Toggling a subtle wireframe overlay.
- Grabbing and dragging the fabric with the mouse or touch.
- Releasing the fabric so normal simulation resumes.
Dragging should temporarily constrain the grabbed region, not teleport the whole cloth. Limit dragging to keep the simulation stable.
Switching resolution must cleanly replace the cloth and reset its state.
Provide a recording mode that hides controls and the cursor when inactive, leaving only the scene and the compact face-count label. The label must stay in exactly the same position for all stages.
Make the main scene responsive, with a reliable 16:9 capture layout. Avoid scrollbars and clipped content.
ENGINEERING AND PERFORMANCE
Use the tools and dependencies available in the workspace. Procedural materials and environment lighting are welcome; avoid dependence on fragile external asset URLs.
Aim for smooth desktop playback at 60 fps, with a minimum target of 30 fps at the highest resolution. Measure performance in the actual browser if available. Do not claim a frame rate you have not measured.
Use fixed simulation time steps, appropriate substeps, and efficient data structures. Avoid unnecessary per-frame allocation.
Handle:
- Repeated showcase starts.
- Reset during a simulation.
- Switching resolution during interaction.
- Releasing the pointer outside the canvas.
- Window resizing.
- Cleaning up replaced geometries and event handlers.
If performance becomes a problem, optimize before reducing visual quality. Do not silently reduce the requested mesh resolution.
PRIORITIES
1. Working cloth physics and convincing contact with the sphere.
2. Beautiful, readable fabric and lighting.
3. Reliable synchronized 24-second showcase.
4. Smooth performance.
5. Minimal, functional controls.
Keep the scope focused. Do not spend time building unrelated UI or extra scenes.
VALIDATION
Before finishing:
- Run the application.
- Verify every mesh count.
- Run the complete showcase.
- Inspect low-resolution collisions as well as high-resolution folds.
- Test reset, replay, wireframe, and dragging.
- Check the 16:9 recording composition.
- Inspect browser errors if browser tools are available.
- Fix the problems you observe.
If you cannot visually inspect the browser, state that clearly rather than claiming visual verification.
Finish with a short summary:
- How to launch the app.
- How to start the showcase and recording mode.
- What you tested.
- Any remaining limitations.
Deliver the working application, not just an implementation plan.
Inspired by @noclipepe
Use the Haiku 5.5 API in your agent：
https://evolink.ai/claude-haiku-5-5?utm_source=twitter&utm_medium=thread&utm_campaign=fabric-test Prompt by @EvoLinkAi , posted on X on 2026-10-10. x.com/EvoLinkAi/status/2108912941328154844 . Copies include this credit. Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
A Verified card includes a receipt and a pinned single-file rebuild you can run here. Recorded limitations explain what the rebuild changes or leaves out.
