Interactive Examples

Explore our cutting-edge animations, effects, and interactive demonstrations showcasing modern web technologies.

Visual Effects & Animations

Mouse Effects

Interactive cursor animations with particle trails and glow effects

JavaScript CSS3 Canvas

3D Animations

Three.js powered interactive 3D elements and animations

Three.js WebGL GLSL

Dynamic Backgrounds

Animated gradient backgrounds and particle systems

CSS SVG Canvas

Form Animations

Smooth form interactions with floating labels and validation

CSS3 JavaScript

Data Visualizations

Interactive charts and real-time data visualization components

D3.js Chart.js Canvas

Loading Animations

Creative loading spinners and progress indicators

CSS SVG

Scroll Effects

Parallax scrolling and scroll-triggered animations

JavaScript GSAP CSS3

Encryption Demo

Live demonstration of our encryption APIs in action

WebCrypto API Security

Game Engine

Interactive game mechanics and physics simulations

WebGL Physics Canvas

Featured Showcase

Particle System Engine

Advanced particle system with physics simulation, collision detection, and dynamic lighting effects. Built with WebGL for maximum performance.

Real-time Physics Dynamic Lighting Collision Detection 60fps Performance

Code Examples

Encryption API Usage

// Encrypt data using Fated API
const response = await fetch('https://api.fated.llc/encrypt/hybrid', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your_api_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    data: 'Sensitive information to encrypt',
    algorithm: 'Hybrid-AES256-ChaCha20'
  })
});

const result = await response.json();
console.log('Encrypted:', result.encrypted_data);
console.log('Algorithm:', result.algorithm);
console.log('Layers:', result.layers);

Smooth Animation Framework

// Custom animation engine
class FatedAnimator {
  constructor(element, options = {}) {
    this.element = element;
    this.duration = options.duration || 1000;
    this.easing = options.easing || 'cubic-bezier(0.4, 0, 0.2, 1)';
  }

  fadeIn() {
    return this.animate({
      opacity: [0, 1],
      transform: ['translateY(20px)', 'translateY(0)']
    });
  }

  morphShape(path) {
    return this.animate({
      'd': path
    });
  }
}

PostgreSQL Integration

// Advanced PostgreSQL operations
class FatedDatabase {
  public function complexQuery($filters) {
    $sql = "
      SELECT u.*, 
             COUNT(au.id) as api_calls,
             SUM(au.payload_size) as total_payload,
             AVG(au.payload_size) as avg_payload
      FROM users u 
      LEFT JOIN api_usage au ON u.id = au.user_id 
      WHERE u.status = 'active'
      AND au.called_at > NOW() - INTERVAL '30 days'
      GROUP BY u.id
      ORDER BY api_calls DESC
    ";
    
    return $this->db->select($sql, $filters);
  }
}

Real-time WebSocket

// Real-time communication
class FatedWebSocket {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.handlers = new Map();
    this.setupEventHandlers();
  }

  subscribe(event, callback) {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, []);
    }
    this.handlers.get(event).push(callback);
  }

  emit(event, data) {
    this.ws.send(JSON.stringify({ event, data }));
  }
}