3D Future

# 3D Future

## Design Philosophy

3D Future challenges the flat paradigm of web design by introducing **spatial depth** as a first-class design element. The philosophy is that digital interfaces should feel like physical spaces — objects have weight, layers have distance, and interactions feel tangible.

Drawing from motion design, game UI, and AR/VR interfaces, this design uses CSS 3D transforms to create genuine depth. Elements don't just sit on a page — they float, tilt, and respond to user input as if they exist in three-dimensional space.

## Design Goals

- Create a sense of physical depth that differentiates from flat competitors
- Use 3D transforms to enhance, not distract from, content
- Maintain usability despite complex visual treatments
- Support both mouse and touch interaction for 3D effects
- Ensure graceful degradation when 3D is not supported

## Visual Language

The visual language is **spatial technology**. Dark blue-black backgrounds (`#0a0e1a`) create a void in which elements float at various depths. Teal (`#06b6d4`) represents primary interaction, purple (`#8b5cf6`) represents depth and layering.

Cards and panels use `perspective` and `transform: rotateX/Y()` to create genuine 3D tilt effects on hover. Layered shadows at multiple depths reinforce the spatial illusion.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#0a0e1a` | Deep space background       |
| surface         | `rgba(255,255,255,0.05)` | Floating panels      |
| primary         | `#06b6d4` | Teal — primary actions      |
| secondary       | `#8b5cf6` | Purple — depth indicators   |
| accent          | `#14b8a6` | Teal-green — highlights     |
| text            | `#e0f2fe` | Primary text                |
| text-muted      | `#64748b` | Secondary text              |
| border          | `rgba(255,255,255,0.1)` | Panel edges          |

## Typography

- **Primary Font:** Space Grotesk (geometric, tech-forward)
- **Heading Scale:** `clamp(2rem, 5vw, 3.5rem)`
- **Body Size:** 16px, line-height 1.5
- **Font Weights:** 400 (body), 500 (labels), 600 (subheadings), 700 (headings)
- **Special:** Text shadows for depth on headings

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Micro gaps               |
| sm    | 8px    | Tight spacing            |
| md    | 16px   | Component padding        |
| lg    | 24px   | Card padding             |
| xl    | 32px   | Section padding          |
| 2xl   | 48px   | Major sections           |
| 3xl   | 64px   | Hero area                |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 8px   | Inputs                   |
| md    | 12px  | Cards                    |
| lg    | 16px  | Feature panels           |
| xl    | 24px  | Hero containers          |
| full  | 9999px| Avatars, badges          |

## Shadows

```css
.card-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.elevated-shadow {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.shadow-3d {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(6, 182, 212, 0.15);
}
```

## Gradients

```css
.depth-gradient {
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #14b8a6 100%);
}
.glow-teal {
  background: radial-gradient(circle at 30% 70%, rgba(6,182,212,0.15) 0%, transparent 50%);
}
.glow-purple {
  background: radial-gradient(circle at 70% 30%, rgba(139,92,246,0.15) 0%, transparent 50%);
}
```

## Layout

- **Container:** max-width 1200px, centered
- **Perspective Container:** `perspective: 1200px` on main wrapper
- **Grid:** CSS Grid with transform-style: preserve-3d on parent
- **Section Spacing:** 96px between major sections
- **Breakpoints:**
  - Mobile: < 640px (reduced 3D, single column)
  - Tablet: 640px–1024px (moderate 3D, two columns)
  - Desktop: > 1024px (full 3D experience)

## 3D System

```css
.perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-3d:hover {
  transform: rotateX(-5deg) rotateY(5deg) translateZ(20px);
}
.float-layer-1 { transform: translateZ(0px); }
.float-layer-2 { transform: translateZ(40px); }
.float-layer-3 { transform: translateZ(80px); }
```

## Components

### Navbar
- Glass panel with 3D tilt on scroll
- Floating above content with translateZ
- Logo with depth shadow
- Links with hover tilt effect

### Hero
- Full viewport with layered depth
- Background layer: gradient + particles
- Mid layer: floating geometric shapes
- Fore layer: content with 3D tilt
- Mouse-tracking parallax on all layers

### Buttons
- Primary: teal gradient, 3D depth shadow
- Hover: lifts with translateZ(10px)
- Active: presses with translateZ(-5px)
- 3D rotation on hover

### Cards
- 3D tilt on hover (rotateX/Y based on mouse position)
- Multi-layer shadow for depth
- Glass surface with blur
- Content floats at different Z-levels

### Forms
- Glass inputs with depth shadow
- Focus: lifts slightly
- Labels float above

### Footer
- Deep background with floating elements
- Multi-layer depth

## Animation

- **Duration:** 400ms for 3D transforms, 200ms for standard
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)` for smooth 3D
- **Hover Effects:** 3D tilt, translateZ lift, shadow expansion
- **Entrance:** Elements fly in from depth (translateZ)
- **Continuous:** Gentle floating animation on decorative elements
- **Mouse Tracking:** Real-time 3D rotation based on cursor position
- **Transitions:** `transform 400ms ease, box-shadow 300ms ease`

## Responsive Rules

- **Mobile (< 640px):** 3D effects reduced to 30%, single column, touch-friendly targets
- **Tablet (640px–1024px):** 3D effects at 70%, two columns
- **Desktop (> 1024px):** Full 3D experience with mouse tracking
- **Reduced motion:** All 3D transforms disabled, flat layout

## Accessibility

- Focus indicators: solid teal outline, 2px with 4px offset
- Reduced motion: `prefers-reduced-motion` disables all 3D transforms
- Screen reader: 33D effects marked `aria-hidden`
- Keyboard: all elements navigable without 3D interaction
- Touch: tap replaces hover for 3D effects on mobile

## Performance

- 3D transforms use GPU acceleration (`will-change: transform`)
- `transform-style: preserve-3d` only on necessary containers
- Mouse tracking throttled to 60fps
- Reduced 3D complexity on mobile devices
- `prefers-reduced-motion` checked before initializing 3D

## Implementation Rules

1. All 3D containers must have `transform-style: preserve-3d`
2. Perspective must be set on parent, not child elements
3. Mouse tracking must be throttled to requestAnimationFrame
4. Mobile must gracefully reduce 3D intensity
5. Never use 3D transforms on text — only on containers
6. Test with `prefers-reduced-motion: reduce` — must work flat