ag-web-tools 🚀

A collection of premium, interactive, and highly responsive 3D components for React applications. Built with @react-three/fiber and @react-three/drei.

✨ Features

• Interactive 3D: Movable and reactive components.
• Glassmorphism: Premium glass materials with real-time transmission.
• Highly Responsive: Adapts to mouse movement and screen changes.
• Easy Integration: Import and use in any React + Three.js project.

📦 Installation

npm install ag-web-tools three @react-three/fiber @react-three/drei

🚀 Quick Start

import { Canvas } from '@react-three/fiber';
import { FloatingElement, VibrantSphere, GlassCard3D } from 'ag-web-tools';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: '#050505' }}>
      <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        
        {/* A draggable, floating sphere */}
        <FloatingElement position={[-2, 0, 0]}>
          <VibrantSphere color="#ff3e00" />
        </FloatingElement>

        {/* A premium glass card that tilts with mouse movement */}
        <GlassCard3D 
          title="Premium Design" 
          subtitle="Hover & Drag me" 
          position={[2, 0, 0]}
        />
      </Canvas>
    </div>
  );
}

🛠 Components

FloatingElement

A wrapper that makes any 3D object float and provides optional pivot controls for dragging.

VibrantSphere

A distorted, animated sphere that morphs and glows.

GlassCard3D

A futuristic glass card with real-time blur and transmission effects.

AnimatedText3D

3D floating text with smooth hover animations.

NeonRing

A glowing, rotating neon torus for background elements.

PlasmaPortal

A multi-layered spatial anomaly with reactive distortion and core lighting.

CyberGrid

An infinite synthwave grid floor with customizable glow and perspective.

NeuralNetwork

A procedurally generated constellation of nodes and connections.

🌍 Useful Links

• NPM Package: https://www.npmjs.com/package/ag-web-tools
• Live Showcase: learnlightofficial (Replace with your actual deployment URL)