Loft — Live 3D Elements

Neon / Glass

Neon-on-dark gallery where the hero is real, cursor-reactive WebGL 3D on frosted-glass tiles.

Mood: Futuristic, tactile, playful-premium. A design tool from the near future that you can touch.
Colors: Deep near-black base (#07060d) with drifting violet and cyan gradient glow. Saturated neon accents (magenta, cyan, violet). Translucent white glass panels. High glow, high saturation.
Type: Clean geometric sans, medium weights, tight tracking on headings. Type stays quiet so the live 3D leads.
Layout: Responsive grid of frosted-glass tiles (blur + 1px translucent border + inner glow) over a dark gradient. Each tile frames a single centered 3D object. Detail views put one large live canvas above copy and action buttons. Depth via stacking and translucency.
Motion: Real-time WebGL: objects idle-rotate and tilt toward the cursor, glass panels parallax, gradient blobs drift, glow pulses on buttons. Motion is the product, not decoration.
Texture: backdrop-blur glass, 1px translucent borders, neon drop-glows, glossy real-time 3D, subtle grain over gradients.
Imagery: No stock imagery. The visuals ARE live React Three Fiber objects (refractive glass orbs, metallic torus knots, distorted blobs, particle fields, wireframe solids) rendered in-browser over a dark neon-gradient stage. For static mockups, generate glossy 3D renders of these shapes with kie-ai Seedream/Flux, but the real build should ship actual R3F elements, not images.
Don't: No flat matte-only screens, no muted palettes, no plain white cards, no static hero image where a live 3D object belongs. Lean into depth, glow, and real interaction.

Use in a session

loft-3d

Tell Claude: build [my thing] using swipe ref loft-3d

Full recreation prompt

Recreate a landing page in the "Loft — Live 3D Elements" style (Neon / Glass). 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: Futuristic, tactile, playful-premium. A design tool from the near future that you can touch.
- Colors: Deep near-black base (#07060d) with drifting violet and cyan gradient glow. Saturated neon accents (magenta, cyan, violet). Translucent white glass panels. High glow, high saturation.
- Typography: Clean geometric sans, medium weights, tight tracking on headings. Type stays quiet so the live 3D leads.
- Layout: Frosted-glass panels (blur + 1px translucent border + inner glow) over a dark gradient, each framing a centered focal object. Depth via stacking and translucency.
- Motion: Real-time WebGL that reacts to the cursor (idle rotation plus tilt), parallax glass layers, drifting gradient blobs, glow pulses on CTAs. Motion is the product, not decoration.
- Texture: backdrop-blur glass, 1px translucent borders, neon drop-glows, glossy real-time 3D, subtle grain over gradients.
- Avoid: flat matte-only screens, muted palettes, plain white cards, or a static hero image where a live 3D object belongs.

Imagery (build real assets, do not use placeholders): the centerpiece should be a live React Three Fiber object, not a picture. Use @react-three/fiber + @react-three/drei to render a refractive glass orb (MeshTransmissionMaterial), a metallic torus knot, or a distorted blob over a dark neon stage with an Environment for reflections, and make it tilt toward the cursor. Grab ready-made elements from https://loft.busqueneil.com (Copy component).

Reference exemplar: https://loft.busqueneil.com. Build the page around the content I give you next, faithfully channeling this aesthetic, and wire in a real interactive 3D element as described above.

Reference exemplar

https://loft.busqueneil.com ↗