Fable 5 is insane at frontend implementation. One website screenshot became a near pixel-perfect interactive 3D dashboard. 3D globe, route arcs, glass UI, motion details, all rebuilt in one pass.

What this is

One screenshot, one prompt, one output. A single-file HTML page with a real Three.js globe you can drag around. NASA night-earth texture, atmosphere glow, animated route arcs, floating cargo tags, glass UI, collapsible bottom panel. The whole thing runs in any browser, no build step.

This is not a rough prototype. It looks and feels like a production logistics dashboard. Fable 5 nailed the details on the first pass: the texture, the lighting, the spacing, the interactions.

Sonnet and Opus never got close to this level of frontend fidelity.

The reference

I fed Fable 5 a screenshot of a dark logistics dashboard: a large 3D Earth, sidebar, route markers, stats, zoom controls, and a bottom panel covering part of the globe. No extra mockups. That one image was the spec.

The exact prompt

I want to build this HTML page as a single web page using Three.js, React, and Tailwind CSS.

Please recreate the reference image as closely as possible, with a high-fidelity, realistic, polished dashboard style. The page should look almost exactly like the screenshot, including the dark futuristic layout, the large 3D Earth, the sidebar, the top title, route markers, statistics area, zoom controls, and all major UI elements.

The 3D Earth must be implemented with Three.js, not as a static image. It should look realistic, support smooth mouse dragging, and feel highly interactive. The globe interaction is very important. Users should be able to rotate it smoothly with the mouse, and the visual effect should feel premium and responsive.

One important change: the bottom panel that covers part of the Earth in the screenshot should be collapsed by default. It should not block the globe when the page first loads. Add a small button or handle at the bottom. When the user clicks it, the bottom panel should slide up and show the activities table and the risk card, matching the style of the screenshot. The panel should also be collapsible again.

Please focus on making the final page visually close to the image, with strong attention to layout, spacing, colors, typography, shadows, glass effects, smooth animations, and interaction performance. The final result should feel like a production-quality logistics dashboard, not a rough demo.

Analyze the image first, then start building. Think it through before you write code. The globe texture must match the reference image exactly. Routes should be clear. The whole page should feel stunning the moment it loads.

Try it yourself

Drag the globe, expand the bottom panel, check the route arcs.

Live demo: 3d-earth.hqman.us