← All references

Bruno Simon — 3D / WebGL Hero

3D / WebGL

A real-time interactive 3D world as the interface — playful, technical, unforgettable.

Bruno Simon — 3D / WebGL Hero preview
Mood
Wow-factor, experimental, virtuosic. Interactive as the whole point. Portfolio-as-experience.
Colors
Scene-driven (often a bright playful sky + toy palette, or moody dark 3D). Cohesive within the 3D world.
Type
Minimal HTML type overlaid on the canvas; simple bold sans for the few labels. Type defers to the 3D.
Layout
Full-screen WebGL canvas as the page; navigation and content are objects within the scene or minimal overlaid UI.
Motion
Physics, drivable/explorable 3D, cursor and scroll drive camera/objects, particles, real-time lighting. Motion is the product.
Texture
3D materials, shadows, lighting, particles, post-processing. Everything is rendered, not flat.
Imagery
Real interactivity is coded (three.js / WebGL). Generate supporting assets: matcap/texture maps, a skybox or gradient environment, and toy-model concept art. Tool: kie-ai for textures and concept art; hand-build the 3D scene in code.
Don't
No static hero image pretending to be 3D, no heavy text walls over the canvas. Keep overlaid UI minimal.

Use in a session

bruno-simon-webgl

Tell Claude: build [my thing] using swipe ref bruno-simon-webgl

Full recreation prompt

Recreate a landing page in the "Bruno Simon — 3D / WebGL Hero" style (3D / WebGL). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout.

Design DNA:
- Mood: Wow-factor, experimental, virtuosic. Interactive as the whole point. Portfolio-as-experience.
- Colors: Scene-driven (often a bright playful sky + toy palette, or moody dark 3D). Cohesive within the 3D world.
- Typography: Minimal HTML type overlaid on the canvas; simple bold sans for the few labels. Type defers to the 3D.
- Layout: Full-screen WebGL canvas as the page; navigation and content are objects within the scene or minimal overlaid UI.
- Motion: Physics, drivable/explorable 3D, cursor and scroll drive camera/objects, particles, real-time lighting. Motion is the product.
- Texture: 3D materials, shadows, lighting, particles, post-processing. Everything is rendered, not flat.
- Avoid: No static hero image pretending to be 3D, no heavy text walls over the canvas. Keep overlaid UI minimal.

Imagery (generate real assets, do not use placeholders): Real interactivity is coded (three.js / WebGL). Generate supporting assets: matcap/texture maps, a skybox or gradient environment, and toy-model concept art. Tool: kie-ai for textures and concept art; hand-build the 3D scene in code.

Reference exemplar: https://bruno-simon.com. Build the page around the content I give you next, faithfully channeling this aesthetic, and generate the matching imagery described above.

Reference exemplar

https://bruno-simon.com ↗