← Prompt library
3D & motionFree→ ChatGPT / Claude

Interactive 3D Hero Plan (Spline)

Design the scene, interactions and performance budget of an interactive 3D header.

What you get: A scene spec: objects, materials, interaction states and performance tips.

input
output — ChatGPT / Claude
I want an interactive 3D hero section for {{brand}} built in Spline and embedded in a website. Concept: {{concept}}.

Write a build spec that includes:
- Scene composition: the objects, their positions, scale, materials and a palette from {{palette}}.
- Interactions: hover, click and scroll behaviours (with the exact event and state transitions), and a graceful fallback for touch devices.
- Animation: idle loop, entrance, and a micro-interaction tied to the main CTA.
- Performance budget: polygon limits, texture sizes, number of lights, and how to check frame rate on a mid-range phone.
- A static fallback image and prefers-reduced-motion behaviour.
- Embed instructions and how to lazy-load the scene so it never blocks first paint.
- Accessibility notes: what a screen reader should announce and how keyboard users bypass the scene.