AI Chat

AI chat interface with WebGL gradient and 3D orb.

Live preview

Features

• WebGL animated gradient background
• Interactive 3D orb visualization
• Chat interface with markdown rendering
• Sound feedback on interactions
• Responsive message layout

Best For

AI product landing pages, chatbot interfaces, AI SaaS demos, conversational AI showcases.

Tech

• Next.js 16, React 19, Tailwind CSS v4
• Three.js (React Three Fiber) for 3D orb
• WebGL shaders for gradient background
• react-markdown with remark-gfm for chat rendering
• Web Audio API for sound design

Customization Tips

The gradient colors are defined in the shader uniforms. The orb material and animation can be adjusted in the 3D component. Sound effects can be replaced or disabled by removing the audio hooks.