Lightweight 3d Effects

# Lightweight 3D Effects - Production Examples

Real-world patterns and examples combining Vanta.js, Zdog, and Vanilla-Tilt for production applications.

---

## Table of Contents

1. [Hero Sections](#1-hero-sections)
2. [Product Cards](#2-product-cards)
3. [Portfolio Layouts](#3-portfolio-layouts)
4. [Interactive Dashboards](#4-interactive-dashboards)
5. [Marketing Pages](#5-marketing-pages)
6. [E-Commerce](#6-e-commerce)
7. [SaaS Landing Pages](#7-saas-landing-pages)
8. [Performance Patterns](#8-performance-patterns)

---

## 1. Hero Sections

### Example 1.1: Split Hero with Vanta + Zdog Logo

**Use Case**: SaaS landing page with animated background and brand icon

```html
<div class="hero-split">
  <div id="vanta-bg"></div>

  <div class="hero-content">
    <canvas class="logo-zdog" width="200" height="200"></canvas>
    <h1>Welcome to Your Product</h1>
    <p>Tagline describing your amazing service</p>
    <button class="cta-button tilt-btn" data-tilt>Get Started</button>
  </div>
</div>
```

```css
.hero-split {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#vanta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-content {
  text-align: center;
  z-index: 1;
  color: white;
}

.logo-zdog {
  display: block;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}

.cta-button {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
  border-radius: 50px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
}
```

```javascript
// Vanta background
VANTA.NET({
  el: "#vanta-bg",
  mouseControls: true,
  touchControls: true,
  color: 0x3fafff,
  backgroundColor: 0x23153c,
  points: 10,
  maxDistance: 20
});

// Zdog logo
const logoIllo = new Zdog.Illustration({
  element: '.logo-zdog',
  zoom: 3,
  dragRotate: false
});

// Create your brand icon here
const logo = new Zdog.Shape({
  addTo: logoIllo,
  path: [
    { x: -30, y: -30 },
    { x: 30, y: -30 },
    { x: 0, y: 30 }
  ],
  closed: true,
  stroke: 8,
  color: '#fff',
  fill: true
});

function animate() {
  logo.rotate.y += 0.02;
  logoIllo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

// Tilt button
VanillaTilt.init(document.querySelector(".cta-button"), {
  max: 15,
  glare: true,
  "max-glare": 0.5,
  scale: 1.1
});
```

---

### Example 1.2: Full-Screen Hero with Scroll Indicator

**Use Case**: Portfolio site with immersive background and scroll prompt

```html
<section class="hero-fullscreen">
  <div id="vanta-bg"></div>

  <div class="hero-content">
    <h1 class="hero-title">Creative Developer</h1>
    <p class="hero-subtitle">Building beautiful experiences</p>

    <div class="scroll-indicator">
      <canvas class="scroll-zdog" width="60" height="80"></canvas>
      <span>Scroll to explore</span>
    </div>
  </div>
</section>
```

```javascript
// Vanta clouds
VANTA.CLOUDS({
  el: "#vanta-bg",
  skyColor: 0x68b8d7,
  cloudColor: 0xadc1de,
  speed: 0.5
});

// Animated scroll indicator
const scrollIllo = new Zdog.Illustration({
  element: '.scroll-zdog',
  zoom: 2
});

// Mouse with scrolling animation
const mouse = new Zdog.RoundedRect({
  addTo: scrollIllo,
  width: 20,
  height: 30,
  cornerRadius: 10,
  stroke: 2,
  color: '#fff'
});

const wheel = new Zdog.Ellipse({
  addTo: scrollIllo,
  diameter: 4,
  translate: { y: -8 },
  stroke: 2,
  color: '#fff',
  fill: true
});

let wheelY = -8;
function animate() {
  wheelY += 0.5;
  if (wheelY > 8) wheelY = -8;
  wheel.translate.y = wheelY;

  scrollIllo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();
```

---

## 2. Product Cards

### Example 2.1: Pricing Cards with Tilt + Zdog Icons

**Use Case**: SaaS pricing page with interactive plan cards

```html
<div class="pricing-grid">
  <div class="pricing-card tilt-card" data-tilt>