3D Isometric Tech Landing

Create a 3D/isometric tech landing page where the interface is built as a scene: stacked layers, floating blocks and real depth made with CSS 3D transforms.

Brief

Subject: Stackyard — a platform that spins up a full preview environment for every pull request

The 3D scenes should explain the product (the layers of the stack, one environment per branch), not just decorate. Write concrete copy: features, integrations, prices

Design Requirements

3D: perspective: 1000px on parents, rotateX/rotateY/rotateZ on children; isometric blocks with visible top and side faces shaded lighter and darker

Background: Dark (#0e1117) with a subtle dot grid on an isometric plane

Colour: #f97316 with light and dark tints for face shading, plus neutrals

Typography: A geometric sans with technical character (e.g. Sora, Space Grotesk); data in monospace. Don't colour a single word of the headline, and no pill badge above it

Tilt: Cards tilt 12deg and show their thickness

Sections to Include

Hero — Isometric stack of product layers floating above a soft shadow, beside the headline and CTA

Features — Three features as isometric tiles that tilt toward the pointer on hover

How It Works — A layered diagram that fans out as it scrolls into view, labelling each layer

Integrations — Integration logos on 3D cubes arranged on an isometric grid

Pricing — Cards that flip on hover or focus (front: price, back: details)

CTA — A raised platform that appears to float above the page

Technical Details

transform-style: preserve-3d for nested scenes; soft shadows under floating objects

Scroll-triggered fan-out via Intersection Observer, once

Flip cards also work with keyboard focus and tap

Reduce 3D on mobile and under prefers-reduced-motion

Visible focus states