Lumen Vault. Built from one prompt.

A wireframe icosahedron slowly spinning inside a neon-rimmed vault hero.

Free to start — make it yours in the chat afterwards.
Lumen Vault, built with Atomix
The exact prompt
Build a one-screen hero for a fictional digital-asset custodian "LUMEN VAULT" using React, TypeScript, Vite, Tailwind CSS and @react-three/fiber.

FONTS: "Chakra Petch" (400, 600) from Google Fonts, utility `.font-chakra`. Page `bg-[#05060a]`, primary neon `#9efcff`.

3D CENTER (absolute inset-0 z-0): `<Canvas camera={{ position: [0, 0, 5], fov: 50 }}>` containing:
- `<mesh>` with `<icosahedronGeometry args={[1.9, 1]} />` and `<meshBasicMaterial wireframe color="#9efcff" transparent opacity={0.5} />`, rotating in useFrame: `rotation.y += delta * 0.25; rotation.x += delta * 0.1`
- A second, inner icosahedron (`args={[1.1, 0]}`, `opacity={0.9}`) counter-rotating at `rotation.y -= delta * 0.4`
- `<ambientLight intensity={1} />`

FRAME: a fixed inset border 24px from every edge (`fixed inset-6 border border-[#9efcff]/25 rounded-2xl pointer-events-none z-20`), with corner ticks: four 14px L-shaped corners drawn with 2px `border-[#9efcff]` on the matching two sides, absolutely positioned at each corner of that frame.

TOP READOUT (absolute top-10 inset-x-0 z-10, flex justify-center): "LUMEN VAULT — COLD STORAGE FOR WARM-BLOODED HUMANS" in `font-chakra text-[11px] sm:text-[12px] tracking-[0.5em] text-[#9efcff]/70 uppercase text-center px-8`.

CENTER STACK (relative z-10, h-screen flex flex-col items-center justify-center text-center px-6):
- "Self-custody," / "minus the self-doubt." two lines in `font-chakra font-semibold text-[clamp(2.4rem,7vw,5.2rem)] leading-[1.05] tracking-[-1px] text-white` with the second line colored `text-[#9efcff]`
- Sub: "Multi-sig vaults with a dead-simple ceremony. Your keys never meet the internet — and neither does your seed phrase." in `text-white/50 text-sm max-w-md mt-6 leading-relaxed`
- CTA: "Open a vault" `mt-9 bg-[#9efcff] text-[#05060a] font-chakra font-semibold rounded-md px-8 py-3.5 text-sm tracking-[0.15em] uppercase hover:bg-white transition-colors duration-200` plus a ghost link "Read the audit →" `text-[#9efcff]/70 text-[13px] tracking-[0.2em] uppercase hover:text-[#9efcff] mt-4`

BOTTOM TELEMETRY (absolute bottom-10 inset-x-0 z-10, flex justify-center gap-8 sm:gap-14, font-chakra `text-[10px] sm:text-[11px] tracking-[0.35em] text-white/35 uppercase`): "4,096-BIT CEREMONY", "9 SIGNERS MAX", "0 CUSTODIAL KEYS".

The headline flickers ON like a neon sign at load: `@keyframes neon-on { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0.3; } 18% { opacity: 1; } 24% { opacity: 0.5; } 32%, 100% { opacity: 1; } }` over 1.6s. Everything else fades in 0.8s ease-out with 0.3s delay. Single App.tsx + src/styles.css, no routing.

three.jswireframeneon