This repository offers a curated collection of AI prompts designed to generate visually engaging HTML animated web pages. It targets developers, educators, and content creators seeking to simplify the creation of dynamic web content, ranging from technical visualizations and educational demos to UI enhancements and presentation-style animations, thereby accelerating the development of rich, interactive web experiences.

How It Works

The project leverages AI models (such as Trae, Claude, and GPT-4o) in conjunction with categorized prompt templates to generate front-end code (HTML, CSS, JavaScript) for animations. The core technical approach relies on native HTML5, CSS3, and JavaScript, utilizing CSS animations, keyframes, and 3D transforms for visual effects, with graphics rendered purely via CSS/JS without external libraries. This native approach ensures broad browser compatibility and potentially lighter-weight, performant animations.

Quick Start & Requirements

1. Clone the repository: git clone https://github.com/Unclecheng-li/AI_Animation.git
2. Navigate into the directory: cd AI_Animation
3. Open any .html file within the web_animation/ directory in a modern web browser (Chrome, Firefox, Safari, Edge).
4. Use the left/right arrow keys or mouse wheel to navigate through example animations.

Generating new animations requires access to AI tools like Trae, Claude, or GPT-4o and using the prompts found in prompt.md.

Highlighted Details

• Diverse Categories: Prompts cover animation effects, 3D visualizations, PPT-style presentations, and UI beautification.
• Practical Examples: Includes numerous pre-built HTML animations demonstrating concepts like TCP visualization, IPv4 datagrams, routing tables, and various AI/ML models (RNN, LSTM, GPU).
• Native Frontend: Built entirely with HTML5, CSS3, and vanilla JavaScript, avoiding framework dependencies.
• AI-Driven Generation: Facilitates rapid creation of new animations by feeding structured prompts to AI language models.

Maintenance & Community

The project acknowledges contributions from community testers and feedback providers, but specific maintainer details, community channels (like Discord/Slack), or a public roadmap are not detailed in the provided README.

Licensing & Compatibility

The project is stated to be under the MIT License. However, it includes explicit restrictions prohibiting commercial use and limiting usage to "learning and research purposes only," which contradicts the permissive nature of the MIT license and requires careful consideration for any adoption. Compatibility is noted for modern web browsers.

Limitations & Caveats

The primary caveat is the conflicting licensing information: an MIT license is present, yet commercial use is expressly forbidden. Generating novel animations is dependent on access to and effective use of external AI models. The repository serves as a collection of prompts and examples rather than a reusable library or framework.