Non-Orthographic 3D Web: Engineering Spatial Perspective on the Modern Web

Modern web interfaces frequently settle for flat cards or static isometric boxes. While axonometric isometric projection creates a clean technical vibe, it lacks depth cues: all parallel lines remain parallel regardless of distance or camera azimuth.

For the Stainless Pricing Suite & Interactive Hero, our design engineering squad wanted an authentic architectural perspective where pillars on the left slant toward the center, revealing their right walls, while pillars on the right slant back-left, revealing their left walls.

// Central Perspective Offset Interpolation
const getPerspectiveOffset = (index, totalCards) => {
  const normalizedPos = (index - (totalCards - 1) / 2) / ((totalCards - 1) / 2);
  // Negative dx = Left wall visible; Positive dx = Right wall visible
  return -normalizedPos * MAX_PERSPECTIVE_DX;
};

Watertight Vertex Topology

The hardest engineering challenge in pseudo-3D vector graphics is avoiding sub-pixel hairline gaps between adjacent polygon faces. When rendering dynamic SVG polygons:

• Front Face: [0, DY] -> [W, DY] -> [W, H + DY] -> [0, H + DY]
• Roof Cap: [0, DY] -> [W, DY] -> [W + dx, 0] -> [dx, 0]
• Side Wall: [W, DY] -> [W + dx, 0] -> [W + dx, H] -> [W, H + DY]

Because all coordinates share identical vertex equations derived from dx and DY, the 3D monolith is topologically watertight across all device pixel ratios (DPR 1x, 2x, 3x).