Interactive 3D Character

Component 94

About

An interactive 3D character built with Zdog.js and GSAP. It follows the mouse cursor and features idle animations like breathing and looking around.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive 3D Character to your project and fits it to your theme.

Code

How Interactive 3D Character is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useEffect, useRef } from 'react';
import InteractiveCharacter from "@/components/ui/interactive-3d-character";

export default function DemoOne() {
  return (
    <div className="hero-container">
            <div className="aurora-background">
                <div className="aurora-blob"></div>
                <div className="aurora-blob"></div>
                <div className="aurora-blob"></div>
            </div>
            <div className="character-container">
                <InteractiveCharacter />
            </div>
        </div>
  );
}