Exploded Product Page Render Prompt
From Wikiprompt, the free prompt encyclopedia
Exploded Product Page Render Prompt A structured prompt for generating exploded product page renders with a 3D depth engine, including spec strips, ghost blueprints, and material callouts. Adaptable to any invention by changing the invention parameter.
Related media
Prompt ContentSave
🌐
2x2 grid 16:9, do this for 4 unusual but real yachts (white, blue, orange, and yellow background): // SYSTEM: R3F Z-DEPTH RENDER ENGINE import { Canvas } from ' @ react-three/fiber'; import { Html, Line } from '@ react-three/drei'; export default function ExplodedProductPage({ invention = "[$INVENTION]" }) { const cascade = useInferenceCascade(invention); return ( <div className="aspect-[16/10] bg-neutral-900 grid grid-cols-[300px_1fr]"> {/* FRAME: Left Rail Spec Strip (Z-Index: 5) */} <section className="ui-chrome z-50 text-white"> <h1 className="text-8xl">{cascade.measurement.value}</h1> <span className="text-xl">{cascade.measurement.unit}</span> </section> {/* 3D Canvas */} <Canvas camera={{ position: [0, 0, 10], fov: 45 }}> <ambientLight intensity={0.5} /> {/* DEPTH 1: Ghost Blueprint */} <mesh opacity={0.15} rotation={[0, Math.PI/4, 0]}> <Model asset={cascade.assembled_hero} material="draft_overlay" /> </mesh> {/* DEPTH 2 & 3: Single-Axis Parts & Leader Lines */} <group position={[-5, 0, 0]}> { cascade. parts. map((part, index) => ( <mesh key={part. id} position={[index * 2.5, 0, 0]}> {/* MATERIAL_CALLOUT & COLOR_DISCIPLINE */} <Model asset={part} material={part.isInnovation ? "SignalColor" : part.realMaterial} /> {/* DEPTH 4: Labels (with collision dodge algorithm) */} <Html position={[0, 2 + (index % 2 === 0 ? 0.5 : 0), 0]}> <div className="material-label">{part.material_name}</div> </Html> </mesh> ))} </group> </Canvas> </div> ); } // INSTRUCTION: Render this component tree visually as a single high-fidelity image.
Sign in to see the full prompt
Continue with:
By logging in, you agree to our Terms of Use and Privacy Policy
Usage
This prompt is designed for use with creative. Copy the prompt content above and paste it into your preferred AI tool.
For best results, you may customize the placeholders (indicated by square brackets or capital letters) with your specific requirements.
References
- Category: creative Prompts
- Source: https://x.com/Gdgtify/status/2089830950272409926
Talk
0 comments