Prompt Details
Model
(claude-4-8-opus)
Token size
657
Example input
[PRODUCT_NAME]: Lumen Audio
[TAGLINE]: Sound you can almost touch
[OBJECT_3D]: a floating matte-black wireless earbud with glowing rim light
[COLOR_THEME]: Neon Dark
[TECH_STACK]: Three.js vanilla
Example output
<!-- Approach: Three.js vanilla (WebGL) loaded from CDN. Single-file, no build step. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Audio — Sound you can almost touch</title>
<style>
:root{
--bg:#0a0a0f; --bg2:#12121c; --text:#f2f2f7; --muted:#9a9ab0;
--accent:#00e5ff; --accent2:#b14cff; --card:#16161f; --border:#26263a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
padding:1rem 2rem;background:rgba(10,10,15,.7);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.wordmark{font-weight:800;font-size:1.25rem;letter-spacing:.02em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:1.5rem}
nav a{color:var(--muted);font-size:.95rem;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--text);border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:2rem}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-content{position:relative;z-index:1;pointer-events:none}
.hero h1{font-size:clamp(2.2rem,7vw,4.5rem);font-weight:800;max-width:14ch;margin:0 auto;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero p{color:var(--muted);margin-top:1rem;font-size:1.1rem}
.fallback{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(177,76,255,.25),transparent 60%),radial-gradient(circle at 50% 60%,rgba(0,229,255,.2),transparent 55%),var(--bg);display:none;z-index:0}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1100px;margin:5rem auto;padding:0 2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem}
.card h3{font-size:1.2rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.95rem}
.dot{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));margin-bottom:1rem}
.cta{text-align:center;padding:5rem 2rem;background:linear-gradient(180deg,var(--bg),var(--bg2))}
.cta h2{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:1.5rem}
.btn{display:inline-block;pointer-events:auto;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#07070c;font-weight:700;padding:.9rem 2.2rem;border-radius:999px;font-size:1rem}
.btn:hover,.btn:focus-visible{filter:brightness(1.1);transform:translateY(-2px);transition:.2s}
footer{text-align:center;padding:2.5rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--border)}
@media(max-width:768px){
header{padding:1rem}.features{grid-template-columns:1fr;margin:3rem auto}
#scene{display:none}.fallback{display:block}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
</style>
</head>
<body>
<header>
<span class="wordmark">Lumen Audio</span>
<nav aria-label="Primary">
<a href="#features">Features</a>
<a href="#cta">Buy</a>
<a href="#footer">About</a>
</nav>
</header>
<section class="hero">
<canvas id="scene" aria-label="A floating matte-black wireless earbud with a glowing rim light, slowly rotating"></canvas>
<div class="fallback" aria-hidden="true"></div>
<div class="hero-content">
<h1>Sound you can almost touch</h1>
<p>Lossless audio. Featherweight build. All-day battery.</p>
</div>
</section>
<section class="features" id="features">
<div class="card"><div class="dot"></div><h3>Spatial Sound</h3><p>Head-tracked 3D audio places every instrument exactly where it belongs.</p></div>
<div class="card"><div class="dot"></div><h3>40h Battery</h3><p>Eight hours per charge, five full top-ups in the pocket-sized case.</p></div>
<div class="card"><div class="dot"></div><h3>Adaptive ANC</h3><p>Noise cancellation that reads the room and adjusts a thousand times a second.</p></div>
</section>
<section class="cta" id="cta">
<h2>Hear the difference today</h2>
<a class="btn" href="#">Pre-order Lumen</a>
</section>
<footer id="footer">© 2026 Lumen Audio. Crafted for listeners.</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
const canvas=document.getElementById('scene');
if(!canvas||!window.THREE||window.innerWidth<=768)return;
const reduce=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const scene=new THREE.Scene();
const camera=new THREE.PerspectiveCamera(45,canvas.clientWidth/canvas.clientHeight,0.1,100);
camera.position.z=6;
const renderer=new THREE.WebGLRenderer({canvas,antialias:true,alpha:true});
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
function resize(){renderer.setSize(canvas.clientWidth,canvas.clientHeight,false);camera.aspect=canvas.clientWidth/canvas.clientHeight;camera.updateProjectionMatrix();}
resize();window.addEventListener('resize',resize);
// Earbud: matte-black body (capsule-like via cylinder+spheres) with a glowing rim ring
const group=new THREE.Group();
const matte=new THREE.MeshStandardMaterial({color:0x111114,roughness:0.55,metalness:0.3});
const body=new THREE.Mesh(new THREE.CylinderGeometry(0.55,0.55,1.4,48),matte);
const cap=new THREE.Mesh(new THREE.SphereGeometry(0.55,48,32),matte);
cap.position.y=0.7;
const stem=new THREE.Mesh(new THREE.CylinderGeometry(0.22,0.28,1.3,32),matte);
stem.position.set(0.1,-0.95,0);stem.rotation.z=0.18;
const rim=new THREE.Mesh(new THREE.TorusGeometry(0.58,0.045,24,80),
new THREE.MeshStandardMaterial({color:0x00e5ff,emissive:0x00e5ff,emissiveIntensity:2.4,roughness:0.2}));
rim.position.y=-0.65;rim.rotation.x=Math.PI/2;
group.add(body,cap,stem,rim);
group.rotation.z=0.25;
scene.add(group);
scene.add(new THREE.AmbientLight(0x404060,1.2));
const key=new THREE.PointLight(0xb14cff,2.5,50);key.position.set(4,3,5);scene.add(key);
const fill=new THREE.PointLight(0x00e5ff,2,50);fill.position.set(-4,-2,4);scene.add(fill);
let px=0,py=0,tx=0,ty=0;
if(!reduce){
window.addEventListener('pointermove',e=>{
tx=(e.clientX/window.innerWidth-0.5)*0.6;
ty=(e.clientY/window.innerHeight-0.5)*0.4;
});
}
let running=true;
const io=new IntersectionObserver(es=>{running=es[0].isIntersecting;if(running)loop();},{threshold:0.01});
io.observe(canvas);
function loop(){
if(!running)return;
if(!reduce){
group.rotation.y+=0.005;
px+=(tx-px)*0.05;py+=(ty-py)*0.05;
group.rotation.x=0.1+py;group.position.x=px;
group.position.y=Math.sin(Date.now()*0.001)*0.12;
}
renderer.render(scene,camera);
if(running)requestAnimationFrame(loop);
}
loop();
})();
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
4
Views
CLAUDE-4-8-OPUS
Generate a complete, runnable single-file 3D landing page in seconds. 🚀 Pick your product, tagline, 3D object, color theme, and tech stack (Three.js, React Three Fiber, Spline, or pure CSS) — get a responsive, accessible hero page with continuous animation, pointer parallax, and reduced-motion support. Ships as one self-contained file with CDN-loaded libraries and zero build step. Perfect for launches, portfolios, and product demos. ✨
...more
Added 2 days ago
