🎬 3D Cinematic Name Generator

AI-Powered 3D Text Engine with Cinematic Animations, Particles, Physics, Emojis & Export Tools

Transform any typed name or word into a fully cinematic 3D animated scene using Three.js, advanced shaders, particle systems, physics simulations, 3D emojis, sound effects, and AI-generated dynamic themes.

🚀 Live Demo • 📖 Documentation • 🎥 Video Tutorial • 💬 Discord

📋 Table of Contents

Overview
Key Features
Live Demo
Technology Stack
Installation
Quick Start
Architecture
Core Systems
Advanced Features
API Reference
Performance Optimization
Export Capabilities
Customization Guide
Browser Support
Contributing
Roadmap
License

🌟 Overview

The 3D Cinematic Name Generator is a sophisticated WebGL-based application that transforms simple text input into stunning 3D cinematic experiences. Built on Three.js and leveraging GPU-accelerated rendering, this engine delivers production-quality animations with real-time interactivity.

What Makes This Unique?

Every name generates a unique 3D landing experience featuring:

✨ Advanced PBR materials with real-time reflections
🎬 Cinematic camera choreography with 2-minute sequences
💫 Real-time VFX and particle simulations (100k+ particles)
🎭 3D emoji integration with physics
💥 Explosion physics with debris simulation
🎨 AI-powered theme generation
📤 Professional export tools (PNG, MP4, GIF)

🚀 Key Features

🔤 Advanced 3D Text Engine

Text Geometry Generation

3D Extruded Typography: Configurable depth (0-50px), bevel size, and segments
Font Support: TrueType fonts with custom font loader
Dynamic Text Updates: Real-time geometry regeneration on input change
Letter Spacing: Adjustable kerning and tracking
Outline System: Multi-layered stroke rendering
Glow Effects: Bloom post-processing with adjustable intensity

Material Library (12+ Materials)

Standard Materials:

Metallic: PBR metal with configurable roughness and metalness
Matte: Diffuse surface with Lambert shading
Glossy: High-reflection surface with environment mapping
Neon: Emissive material with HDR bloom
Glass: Refractive material with transmission
Chrome: Perfect mirror reflection with Fresnel
Holographic: Iridescent shader with color shifting

Textured Materials:

Gold: Brushed gold with displacement mapping
Carbon Fiber: Anisotropic reflection pattern
Marble: Procedural noise-based marble
Ice: Subsurface scattering simulation
Lava: Animated emissive texture with displacement
Wood Grain: Procedural wood texture
Concrete: Rough surface with normal mapping

Advanced Properties:

Physically-based rendering (PBR)
Environment map reflections
Normal mapping for surface detail
Displacement for geometry detail
Emission maps for self-illumination
Alpha transparency support

🎥 Cinematic Animation System

10+ Pre-built Animation Flows (2+ min sequences each)

1. Floating Flow

- Breathing effect (sine wave oscillation)
- Soft up/down float (Y-axis translation)
- Micro wobble per letter (independent rotation)
- Duration: 120-180 seconds
- Easing: ease-in-out-quad

2. Rotation Flow

- Continuous Y-axis rotation (360° loop)
- Fast spin on hover (2x speed multiplier)
- Tilt-based rotation (X/Z axis wobble)
- Gyroscopic effect

3. Particle Assembly Flow

- Letters assemble from 10k+ particles
- Morphing particle positions
- GPU-based particle animation
- Dissolve to dust effect
- Fire/smoke/water particle variants

4. Explosion Flow

- Physics-based explosion (40+ debris pieces)
- Slow-motion effect (time dilation 0.3x)
- Radial force application
- Cinematic rebuild sequence
- Camera shake integration

5. Camera Choreography

- Dolly zoom (Hitchcock effect)
- 360° orbital sweep
- Close-up letter reveal (macro focus)
- Smooth tracking shot
- Depth of field animation

6. Wave Flow

- Sequential letter animation
- Sine wave propagation
- Amplitude and frequency control
- Phase offset per letter

7. Spiral Flow

- Helical motion path
- Radius and pitch control
- Fibonacci spiral variant

8. Morph Flow

- Geometry morphing between shapes
- Smooth vertex interpolation
- Shape library (cube, sphere, torus)

9. Glitch Flow

- Digital glitch effect
- RGB displacement
- Scan line artifacts
- Random jitter

10. Liquid Flow

- Fluid simulation approximation
- Surface tension effect
- Drip and splash physics

✨ Advanced Transitions (15+ Types)

Each transition is GPU-accelerated and supports custom easing:

Pop-in Elastic: Spring physics with overshoot
Fade Slide: Opacity + position interpolation
Wave Reveal: Sequential staggered animation
Implode Assemble: Centripetal force gathering
Neon Light-up: Emissive intensity ramp
3D Flip-in: Rotation with perspective
Reverse Explosion: Time-reversed physics
Liquid Melt: Vertex displacement simulation
Ice Shatter: Voronoi fracture pattern
Origami Fold: Paper fold simulation
Pixel Dissolve: Grid-based fade
Warp Speed: Motion blur streaks
Quantum Shift: Teleportation effect
DNA Helix: Double helix path
Magnetic Pull: Force field attraction

🖱️ Interactive Effects

Mouse/Pointer Interactions

- OrbitControls integration (drag to rotate)
- Scroll to zoom (damped smoothing)
- Hover glow (proximity-based emission)
- Letter push-away physics (force field)
- Cursor spotlight (dynamic light following)
- Click explosion (force application)
- Double-click particle burst

Touch/Mobile Optimizations

- Pinch zoom (multi-touch)
- Swipe rotate (velocity-based)
- Tap bounce (impulse response)
- Tap particle burst (touch feedback)
- Gyroscope integration (device orientation)
- Haptic feedback (vibration API)

💡 Dynamic Lighting System

Light Types

Ambient Light: Base illumination
Directional Light: Sun simulation with shadows
Point Lights: Omnidirectional sources (8+ dynamic)
Spot Lights: Cone-shaped beams with cookies
Neon Rim Light: Edge highlighting
Cursor Spotlight: Mouse-following dynamic light
Area Lights: Soft box lighting

Advanced Lighting Features

- Shadow mapping (PCF/VSM)
- Real-time shadow updates
- Light bloom post-processing
- Volumetric fog integration
- Cinematic multi-light rigs
- HDRI environment lighting
- Caustics simulation
- God rays (volumetric light shafts)

🌌 Background & Environment

Background Systems

Animated Gradient Sky: Multi-color interpolation
Starfield: 1000+ parallax stars
Particle Fields: 50k+ ambient particles
Depth Fog: Distance-based atmosphere
Lens Flares: JJ Abrams-style effects
Light Streaks: Motion trails
Space Nebula: Procedural cloud generation
Aurora Borealis: Wave-based color shifts

Post-Processing Stack

- Bloom (selective glow)
- Depth of Field (bokeh)
- Motion Blur (velocity-based)
- Color Grading (LUT-based)
- Chromatic Aberration
- Vignette
- Film Grain
- SSAO (Screen Space Ambient Occlusion)

🤩 3D Emojis, Stickers & Shapes

Emoji System

3D Emoji Rendering: Vector-based extrusion
Orbit Animation: Circular paths around text
Physics Integration: Collision detection
Emoji Burst: Click-triggered explosions
Size Variation: Scale randomization
Rotation: Independent 3D rotation

Sticker Library

🔥 Fire (animated flame)
⭐ Star (rotating sparkle)
❤️ Heart (pulse animation)
👑 Crown (floating hover)
💎 Diamond (spinning)
⚡ Lightning (flash effect)
🌟 Sparkle (twinkle)

3D Shape Objects

Sphere (UV sphere)
Cube (beveled edges)
Torus (donut)
Cylinder
Cone
Octahedron
Tetrahedron
Icosahedron

💥 Particle & Physics System

Particle Engine (GPU-Accelerated)

- 100,000+ particles support
- GPU instancing for performance
- Custom particle shaders
- Particle types:
  * Fire (heat simulation)
  * Smoke (advection)
  * Water (droplet physics)
  * Dust (Brownian motion)
  * Sparks (trajectory physics)
  * Magic (floating orbs)
  * Snow (wind affected)
  * Confetti (gravity + rotation)

Physics Simulation

Collision Detection: Spatial hashing grid
Gravity Modes: Earth, Moon, Zero-G
Wind System: Vector field forces
Explosion Forces: Radial impulse
Attraction Points: Magnetic behavior
Bounce/Friction: Coefficient of restitution
Debris System: Fragment spawning

🧠 AI-Powered Theme Engine

Intelligent Theme Generation

AI analyzes input name and generates:
- Best material style (based on name mood)
- Optimal lighting setup (time of day)
- Cinematic flow selection (personality match)
- Color palette (emotional mapping)
- Animation speed (name length adaptive)
- Particle density (complexity balance)

AI Features

Sentiment Analysis: Detects name emotion
Color Psychology: Mood-based palettes
Style Matching: Genre detection (futuristic, elegant, bold)
Performance Balancing: Auto-quality adjustment
Theme Presets: One-click professional themes

🎧 Audio System

Sound Effects Library

- Typing sound (mechanical keyboard)
- Hover ping (UI feedback)
- Cinematic whoosh (transition)
- Explosion bass (impact)
- Particle sparkle (high-freq chime)
- UI clicks (button feedback)
- Ambient soundscapes (atmospheric)

Background Music

Procedural Music: Generative audio
Volume Control: Master + individual
Spatial Audio: 3D sound positioning
Music Sync: Animation beat matching

🛠️ Professional Export Tools

Export Formats

1. PNG Export

- Resolution: 1080p, 2K, 4K, 8K
- Transparent background option
- Anti-aliasing: 4x MSAA
- Custom dimensions support

2. MP4 Video Export

- Full cinematic sequence capture
- 60 FPS rendering
- H.264 codec
- Resolutions: 1080p, 4K
- Duration: Configurable (2-10 min)
- Audio track inclusion

3. GIF Export

- Optimized color palette (256 colors)
- Frame rate: 30/60 FPS
- Loop options
- Dithering options
- Size optimization

4. JSON Style Preset

{
  "material": "neon",
  "colors": ["#ff00ff", "#00ffff"],
  "animation": "rotation",
  "particles": true,
  "lighting": "cinematic",
  "camera": "orbit"
}

5. GLTF/GLB 3D Model

Exportable 3D scene
Materials preserved
Animation baked
VR/AR compatible

💻 Technology Stack

Core Technologies

{
  "rendering": "Three.js r150+",
  "animation": "GSAP 3.12",
  "graphics": "WebGL 2.0",
  "physics": "Cannon.js / Ammo.js",
  "audio": "Web Audio API",
  "export": "Canvas Recorder API"
}

Dependencies

{
  "three": "^0.150.0",
  "gsap": "^3.12.0",
  "cannon-es": "^0.20.0",
  "dat.gui": "^0.7.9",
  "stats.js": "^0.17.0",
  "postprocessing": "^6.31.0"
}

Build Tools

Vite: Lightning-fast dev server
Webpack: Production bundler
Babel: ES6+ transpilation
PostCSS: CSS processing
ESLint: Code linting
Prettier: Code formatting

📦 Installation

Prerequisites

Node.js >= 16.x
npm >= 8.x

Clone Repository

git clone https://github.com/yourusername/3d-cinematic-name-generator.git
cd 3d-cinematic-name-generator

Install Dependencies

npm install

Development Server

npm run dev

Visit http://localhost:5173

Production Build

npm run build
npm run preview

🏗️ Architecture

Project Structure

3d-cinematic-name-generator/
├── public/
│   ├── fonts/                 # TrueType font files
│   │   ├── Helvetica-Bold.ttf
│   │   ├── Bebas-Neue.ttf
│   │   └── Montserrat.ttf
│   ├── textures/              # Material textures
│   │   ├── gold/
│   │   ├── carbon/
│   │   ├── marble/
│   │   └── envmap/
│   ├── audio/                 # Sound effects
│   │   ├── whoosh.mp3
│   │   ├── explosion.mp3
│   │   └── ambient.mp3
│   └── assets/
│       ├── emojis/
│       └── icons/
├── src/
│   ├── main.js                # Entry point
│   ├── components/
│   │   ├── Scene.js           # Three.js scene setup
│   │   ├── TextGenerator.js   # 3D text creation
│   │   ├── Controls.js        # UI controls
│   │   └── ExportManager.js   # Export functionality
│   ├── scenes/
│   │   ├── MainScene.js       # Primary scene
│   │   ├── ParticleScene.js   # Particle system scene
│   │   └── UIScene.js         # 2D UI overlay
│   ├── materials/
│   │   ├── MaterialLibrary.js # Material definitions
│   │   ├── CustomShaders.js   # GLSL shaders
│   │   └── TextureLoader.js   # Texture management
│   ├── shaders/
│   │   ├── neon.vert
│   │   ├── neon.frag
│   │   ├── holographic.vert
│   │   ├── holographic.frag
│   │   └── particle.vert/frag
│   ├── particles/
│   │   ├── ParticleSystem.js  # Core particle engine
│   │   ├── Emitter.js         # Particle emitter
│   │   └── GPUParticles.js    # GPU instancing
│   ├── physics/
│   │   ├── PhysicsWorld.js    # Physics simulation
│   │   ├── Collision.js       # Collision detection
│   │   └── ForceField.js      # Force application
│   ├── animations/
│   │   ├── AnimationManager.js # GSAP integration
│   │   ├── Transitions.js      # Transition library
│   │   └── Timelines.js        # Cinematic sequences
│   ├── ai/
│   │   ├── ThemeGenerator.js   # AI theme engine
│   │   ├── ColorPalette.js     # Color generation
│   │   └── StyleMatcher.js     # Style analysis
│   ├── audio/
│   │   ├── AudioEngine.js      # Web Audio API
│   │   ├── SoundManager.js     # Sound playback
│   │   └── MusicGenerator.js   # Procedural music
│   ├── ui/
│   │   ├── ControlPanel.js     # Main UI
│   │   ├── Sliders.js          # Parameter controls
│   │   └── ColorPicker.js      # Color selection
│   └── utils/
│       ├── MathUtils.js        # Math helpers
│       ├── GeometryUtils.js    # Geometry utilities
│       └── Performance.js      # FPS monitoring
├── index.html
├── package.json
├── vite.config.js
└── README.md

🎮 Core Systems

1. Scene Management

// Scene.js - Core setup
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

class Scene {
  constructor() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ 
      antialias: true, 
      alpha: true,
      powerPreference: 'high-performance'
    });
    
    this.setupRenderer();
    this.setupCamera();
    this.setupControls();
    this.setupLighting();
    this.animate();
  }
  
  setupRenderer() {
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    this.renderer.toneMappingExposure = 1.2;
    document.body.appendChild(this.renderer.domElement);
  }
  
  animate() {
    requestAnimationFrame(() => this.animate());
    this.renderer.render(this.scene, this.camera);
  }
}

2. Text Generation System

// TextGenerator.js
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';

class TextGenerator {
  constructor(scene) {
    this.scene = scene;
    this.fontLoader = new FontLoader();
    this.textMesh = null;
  }
  
  async createText(text, options = {}) {
    const font = await this.loadFont(options.fontPath || '/fonts/helvetiker_bold.typeface.json');
    
    const geometry = new TextGeometry(text, {
      font: font,
      size: options.size || 80,
      height: options.depth || 20,
      curveSegments: options.curveSegments || 12,
      bevelEnabled: options.bevel || true,
      bevelThickness: options.bevelThickness || 2,
      bevelSize: options.bevelSize || 1,
      bevelSegments: options.bevelSegments || 5
    });
    
    geometry.center();
    geometry.computeBoundingBox();
    
    const material = this.createMaterial(options.materialType);
    this.textMesh = new THREE.Mesh(geometry, material);
    this.scene.add(this.textMesh);
    
    return this.textMesh;
  }
  
  createMaterial(type) {
    const materials = {
      neon: new THREE.MeshStandardMaterial({
        emissive: 0x00ffff,
        emissiveIntensity: 2,
        color: 0x00ffff,
        metalness: 0.8,
        roughness: 0.2
      }),
      chrome: new THREE.MeshStandardMaterial({
        color: 0xffffff,
        metalness: 1,
        roughness: 0,
        envMapIntensity: 1
      }),
      // ... more materials
    };
    
    return materials[type] || materials.neon;
  }
  
  loadFont(path) {
    return new Promise((resolve, reject) => {
      this.fontLoader.load(path, resolve, undefined, reject);
    });
  }
}

3. Particle System

// ParticleSystem.js
class ParticleSystem {
  constructor(scene, count = 10000) {
    this.scene = scene;
    this.particleCount = count;
    this.particles = null;
    this.init();
  }
  
  init() {
    const geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(this.particleCount * 3);
    const colors = new Float32Array(this.particleCount * 3);
    const sizes = new Float32Array(this.particleCount);
    
    for (let i = 0; i < this.particleCount; i++) {
      positions[i * 3] = (Math.random() - 0.5) * 100;
      positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
      positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
      
      colors[i * 3] = Math.random();
      colors[i * 3 + 1] = Math.random();
      colors[i * 3 + 2] = Math.random();
      
      sizes[i] = Math.random() * 2;
    }
    
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
    
    const material = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 0 }
      },
      vertexShader: particleVertexShader,
      fragmentShader: particleFragmentShader,
      transparent: true,
      vertexColors: true,
      blending: THREE.AdditiveBlending
    });
    
    this.particles = new THREE.Points(geometry, material);
    this.scene.add(this.particles);
  }
  
  update(deltaTime) {
    this.particles.material.uniforms.time.value += deltaTime;
    this.particles.rotation.y += 0.001;
  }
}

🎯 API Reference

TextGenerator API

const textGen = new TextGenerator(scene);

// Create text
await textGen.createText('HELLO', {
  size: 100,
  depth: 30,
  bevel: true,
  materialType: 'neon',
  color: 0x00ffff
});

// Update text
textGen.updateText('WORLD');

// Change material
textGen.setMaterial('chrome');

// Animate
textGen.animate('floating', { duration: 2 });

Animation API

import { AnimationManager } from './animations/AnimationManager';

const animManager = new AnimationManager();

// Play animation
animManager.play('explosion', textMesh, {
  duration: 3,
  easing: 'power2.inOut',
  onComplete: () => console.log('Done')
});

// Create custom timeline
const timeline = animManager.createTimeline();
timeline
  .to(textMesh.position, { y: 100, duration: 1 })
  .to(textMesh.rotation, { y: Math.PI * 2, duration: 2 })
  .play();

Export API

import { ExportManager } from './components/ExportManager';

const exporter = new ExportManager(renderer, scene, camera);

// Export PNG
await exporter.exportPNG({
  width: 1920,
  height: 1080,
  transparent: true,
  filename: 'my-3d-text.png'
});

// Export Video
await exporter.exportVideo({
  duration: 5,
  fps: 60,
  resolution: '1080p',
  filename: 'animation.mp4'
});

// Export GIF
await exporter.exportGIF({
  duration: 3,
  fps: 30,
  quality: 'high'
});

⚡ Performance Optimization

Rendering Optimizations

// Frustum culling
mesh.frustumCulled = true;

// Level of detail
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(mediumDetailMesh, 50);
lod.addLevel(lowDetailMesh, 100);

// GPU instancing
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

// Geometry merging
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

Memory Management

// Dispose resources
geometry.dispose();
material.dispose();
texture.dispose();

// Pool objects
const particlePool = new ObjectPool(Particle, 1000);

Best Practices

Use GPU instancing for repeated objects
Implement object pooling for particles
Dispose unused geometries and materials
Optimize texture sizes (power of 2)
Use texture atlases
Implement frustum culling
Use LOD for distant objects
Limit shadow-casting lights

🌐 Browser Support

Browser	Version	Support
Chrome	90+	✅ Full
Firefox	88+	✅ Full
Safari	14+	✅ Full
Edge	90+	✅ Full
Opera	76+	✅ Full
Mobile Safari	14+	⚠️ Limited
Chrome Android	90+	⚠️ Limited

WebGL 2.0 Required

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Development Workflow

Fork the repository

git clone https://github.com/yourusername/3d-cinematic-name-generator.git

Create feature branch

git checkout -b feature/amazing-feature

Make changes and commit

git commit -m 'Add amazing feature'

Push to branch

git push origin feature/amazing-feature

Open Pull Request

Code Standards

Follow ESLint configuration
Write JSDoc comments
Add unit tests for new features
Update documentation

Adding New Features

New Material:

// materials/MaterialLibrary.js
export const customMaterial = {
  name: 'Custom',
  create: () => new THREE.MeshPhysicalMaterial({
    // Your material properties
  })
};

New Animation:

// animations/Transitions.js
export const customAnimation = (mesh, duration) => {
  return gsap.timeline()
    .to(mesh.position, { /* animation */ });
};

🗺️ Roadmap

Version 2.1 (Q1 2025)

Server-side MP4 rendering with FFmpeg
WebGPU support for 2x performance
VR mode with WebXR
Multi-language support

Version 2.2 (Q2 2025)

AI voice-over generator
Text-to-speech integration
Multi-line text support
3D banner templates

Version 3.0 (Q3 2025)

Full logo pack export mode
Theme marketplace
AR mode for mobile devices
Collaborative editing

Future Ideas

📄 License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🏷️ GitHub Topics

3d-text, threejs, 3d-animation, cinematic-animation, webgl, 3d-landing-page,
3d-name-generator, 3d-logo-generator, interactive-3d, 3d-effects, vfx,
particles-js, shader-effects, neon-design, glas

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
app		app
components		components
lib		lib
public		public
styles		styles
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation