Cursor - Ultra Detailed Project Documentation Prompt

0-project-documentation.md

Analyze this projects codebase and Document it appropriately

Conduct a comprehensive analysis of the current project structure to create clear and maintainable documentation. Focus on:

• Architectural Overview:

  • Map out the high-level structure of the project
  • Identify core modules and their relationships
  • Document architectural patterns and design decisions
  • Highlight any technical debt or areas for improvement

• Component Hierarchy:

  • Create a visual representation of component relationships
  • Document props, state, and context usage
  • Identify reusable components and patterns
  • Note any component dependencies

• File Structure Analysis:

  • Evaluate the organization of files and directories
  • Identify logical groupings and naming conventions
  • Document any special configurations or setups
  • Suggest improvements for better maintainability

• Dependency Mapping:

  • Create a dependency graph of internal and external packages
  • Document version requirements and compatibility
  • Identify potential security vulnerabilities
  • Highlight any deprecated or redundant dependencies

• Workflow Documentation:

  • Document build and deployment processes
  • Explain testing strategies and frameworks
  • Outline CI/CD pipeline configurations
  • Document environment variables and configurations

• Code Quality Assessment:

  • Analyze code consistency and style
  • Identify areas for refactoring or optimization
  • Document performance considerations
  • Highlight security best practices

• Knowledge Transfer:

  • Create onboarding documentation for new developers
  • Document common pitfalls and solutions
  • Include troubleshooting guides
  • Provide examples of common tasks and workflows

Ensure the documentation is clear, concise, and actionable, using a combination of visual diagrams, code examples, and written explanations to provide a complete understanding of the project structure.

---

Project Documentation Structure To Be Created

This directory should contain comprehensive documentation for the project, organized sequentially for clarity and maintainability.

Documentation Files

1. Architecture Overview

   • architecture.md: High-level project structure and design decisions
   • component-hierarchy.md: Visual representation of component relationships

2. Code Organization

   • file-structure.md: Directory structure and naming conventions
   • dependency-map.md: Internal and external package dependencies

3. Development Workflow

   • build-process.md: Build and deployment procedures
   • testing-strategy.md: Testing frameworks and methodologies
   • ci-cd-pipeline.md: Continuous integration and deployment configuration

4. Code Quality

   • code-style.md: Coding standards and best practices
   • refactoring-guide.md: Areas for improvement and optimization
   • security-checklist.md: Security considerations and vulnerabilities

5. Knowledge Transfer

   • onboarding.md: Guide for new developers
   • troubleshooting.md: Common issues and solutions
   • examples.md: Code samples and common tasks

Documentation Process To Be Followed Strictly and Sequentially (only one file at a time)

Proceed in YOLO mode.

0

1. Start with architecture.md to establish the high-level overview
2. Proceed to component-hierarchy.md for detailed component analysis
3. Document file structure in file-structure.md
4. Create dependency mapping in dependency-map.md
5. Document development workflows in respective files
6. Analyze code quality and create corresponding documents
7. Finalize with knowledge transfer materials

Each document should be created sequentially, building upon the information from previous files to ensure consistency and completeness.

0.0-v2-project-documentation.md

---

1. Core Documentation

• architecture.md:

  • High-level system architecture
  • Key design decisions (e.g., why Next.js, Once UI, and next-intl were chosen)
  • Data flow and component hierarchy
  • Backend architecture (e.g., app/api/{endpoint}/route.ts, app/api/{endpoint}/route.ts, etc..)
  • Frontend architecture (e.g., app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx, components/ui/button.tsx, etc..)
  • Database architecture (e.g., prisma/schema.prisma, prisma/migrations, etc..)
  • Authentication and authorization (e.g., next-auth, next-auth-config.ts)

• components.md:

  • List of reusable components (e.g., ProjectCard, TableOfContents)
  • Props, usage examples, and customization guidelines
  • Component structure (e.g., {ComponentName}.tsx, {ComponentName}.stories.tsx, {ComponentName}.test.tsx, etc..)
  • Comments and documentation (e.g., // TODO: {description}, /* {description} */, etc..)
  • Interfaces, and types (e.g., type {ComponentName}Props = {type}, interface {ComponentName}State = {type}, etc..)

---

2. Development Workflow

• workflow.md:

  • Local development setup (npm install, npm run dev)
  • Build and deployment process (npm run build, npm start)
  • CI/CD pipeline (if applicable)
  • Git workflow (e.g., git commit -m "feat: add new feature", git push origin main)
  • Git branching strategy (e.g., main, develop, feature/{feature-name}, hotfix/{hotfix-name}, etc..)
  • Git commit message guidelines (e.g., feat: add new feature, fix: fix bug, docs: update documentation, refactor: improve code readability, etc..)

• style-guide.md:

  • Coding conventions (e.g., TypeScript, SCSS)
  • File structure and naming conventions (app/api/{endpoint}/route.ts, app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx, components/ui/button.tsx, etc..)
  • Commit message guidelines (e.g., feat: add new feature, fix: fix bug, docs: update documentation, refactor: improve code readability, etc..)
  • Code style and formatting (e.g., camelCase, kebab-case, snake_case, PascalCase, etc..)
  • Naming conventions (e.g., use{ComponentName}, {ComponentName}, {ComponentName}Props, {ComponentName}State, etc..)
  • Interfaces, and types (e.g., type {ComponentName}Props = {type}, interface {ComponentName}State = {type}, etc..)
  • Component structure (e.g., {ComponentName}.tsx, {ComponentName}.stories.tsx, {ComponentName}.test.tsx, etc..)
  • Comments and documentation (e.g., // TODO: {description}, /* {description} */, etc..)

---

3. Maintenance

• troubleshooting.md:

  • Common errors and fixes (e.g., missing locale, build failures)
  • Debugging tips
  • Logging and error handling (e.g., console.error, console.log, console.warn, etc..)
  • Error handling (e.g., try, catch, finally, throw, throw new Error('Error message'), etc..)
  • Debugging tips (e.g., console.log, console.error, console.warn, etc..)
  • Performance optimization (e.g., useMemo, useCallback, useEffect, useLayoutEffect, etc..)
  • Code splitting (e.g., dynamic, loadable, lazy, Suspense, etc..)

• refactoring.md:

  • Areas for improvement (e.g., performance, code organization)
  • Known technical debt
  • Refactoring guidelines
  • Code quality analysis (e.g., eslint, prettier, stylelint, etc..)

---

4. Onboarding

• getting-started.md:

  • Prerequisites (Node.js, npm)
  • Quickstart guide for new developers

• examples.md:

  • Code samples for common tasks (e.g., adding a new model, adding a new page, adding a new component, etc..)
  • Adding a new api route (e.g., app/api/{endpoint}/route.ts)
  • Adding a new page (e.g., app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx)
  • Adding a new component (e.g., components/ui/button.tsx)
  • Example MDX files for blog posts, pages, routes, and other contextual files / components

---

5. Design System Integration

• design-system.md:
  • Overview of Once UI integration
  • Shadcn/UI integration (e.g., Button, Card, Input, Select, etc..)
  • Layouts (e.g., MainLayout, AuthLayout, MarketingLayout, ProtectedLayout, etc..)
  • Customizing design tokens (e.g., colors, spacing, typography)
  • Using Once UI components (e.g., Button, Card, Input, Select, etc..)

---

6. Security

• security.md:
  • Authentication and authorization (e.g., next-auth, next-auth-config.ts)
  • Middleware (e.g., middleware.ts)
  • API routes
  • Protected routes
  • Protected layouts
  • Password protection for routes (e.g., protectedRoutes in config.js)
  • Handling sensitive data (e.g., .env variables)

---

7. Roadmap

• roadmap.md:
  • Future features and improvements
  • Milestones and timelines

---

Documentation Process To Be Followed Strictly and Sequentially (only one file at a time)

Proceed in YOLO mode.

Each document should be created sequentially, building upon the information from previous files to ensure consistency and completeness.

1. Core Docs: Essential for understanding the system. (architecture.md)
2. Workflow Docs: Ensure smooth development and deployment. (workflow.md)
3. Maintenance Docs: Help with debugging and long-term maintenance. (troubleshooting.md)
4. Onboarding Docs: Make it easy for new contributors to get started. (getting-started.md)
5. Design System Docs: Ensure consistent UI/UX across the project. (design-system.md)
6. Security Docs: Protect sensitive routes and data. (security.md)
7. Roadmap Docs: Provide direction for future development. (roadmap.md)

This set of docs covers all critical aspects of the project while keeping it concise and actionable.

000-project-documentation-template.md

Project Documentation

1. Onboarding

getting-started.md

• Project Name: [Insert Project Name]
• Prerequisites: Node.js, npm, environment variables, etc.
• Quickstart Guide:
  • Install dependencies: npm install
  • Run development server: npm run dev
  • Other setup instructions...

examples.md

• Common Development Tasks:
  • Adding a new API route: app/api/{endpoint}/route.ts
  • Creating a new page: app/(protected)/{page}/page.tsx, app/(marketing)/{page}/page.tsx, app/(auth)/{page}/page.tsx,
  • Developing new components: components/ui/{component}.tsx
  • Example MDX files for blog posts, content pages, etc.

---

2. Core Documentation

architecture.md

• System Overview: High-level project structure
• Technology Stack: [Next.js, TypeScript, Prisma, Tailwind, etc.]
• Data Flow & Component Hierarchy
• Backend Architecture:
  • API routes: app/api/{endpoint}/route.ts
  • Database: prisma/schema.prisma
• Frontend Architecture:
  • Page structure: app/(protected)/{page}/page.tsx
  • Reusable components: components/ui/{component}.tsx
  • Layouts: components/{layout}/{component}.tsx
• Authentication & Authorization:
  • NextAuth, Middleware, Role-Based Access Control (RBAC)

components.md

• Reusable Components:
  • List of common components (e.g., Button, Card, Table)
• Props, Usage & Customization
• Component Structure:
  • {ComponentName}.tsx (Component file)
• Types & Interfaces:
  • type {ComponentName}Props = {}
  • interface {ComponentName}State = {}

---

3. Development Workflow

workflow.md

• Local Development:
  • npm install, npm run dev
• Build & Deployment:
  • npm run build, npm start
• CI/CD Pipeline: [Provide details if applicable]
• Git Workflow:
  • Branching strategy: main, develop, feature/{feature-name}
  • Commit message format: feat:, fix:, docs:, etc.

style-guide.md

• Coding Conventions:
  • Preferred languages: [TypeScript, SCSS, etc.]
  • Naming conventions: camelCase, PascalCase, snake_case
• File Structure:
  • Backend: app/api/{endpoint}/route.ts
  • Frontend:
    • components/ui/{component}.tsx
    • components/{page}/{component}.tsx
    • components/{layout}/{component}.tsx
• Formatting & Linting:
  • Tools: ESLint, Prettier, Stylelint
• Documentation Standards:
  • Commenting style (// TODO: description, /** JSDoc */)

---

4. Design System Integration

design-system.md

• UI Library: [Once UI, Shadcn/UI, Tailwind, etc.]
• Core Components:
  • Button, Card, Input, Select, etc.
• Layouts:
  • MainLayout, AuthLayout, MarketingLayout
• Customization:
  • Colors, Spacing, Typography

---

5. Security

security.md

• Authentication & Authorization:
  • NextAuth setup, middleware usage
• Protected Routes & API Security:
  • middleware.ts, app/api/protected
• Handling Sensitive Data:
  • .env variables, encryption methods
• Role-Based Access Control (RBAC)
• Common Security Best Practices

---

6. Maintenance & Optimization

troubleshooting.md

• Common Issues & Fixes:
  • Missing environment variables, build failures
• Debugging Techniques:
  • console.log, debugger, breakpoints
• Error Handling:
  • Try-catch, error boundaries
• Performance Optimization:
  • Code splitting, lazy loading, memoization

refactoring.md

• Technical Debt Overview:
  • List known areas for improvement
• Refactoring Guidelines:
  • Best practices for improving performance & maintainability
• Code Quality Tools:
  • ESLint, Prettier, Stylelint, SonarQube

---

7. Roadmap

roadmap.md

• Planned Features & Enhancements
• Milestones & Timelines
• Long-Term Vision

---

Notes

• Update this documentation regularly as the project evolves.
• Ensure all team members follow the guidelines to maintain consistency.

---

### **How to Use This Template**

1. **Replace placeholders** (`[Insert Project Name]`, `[Next.js, TypeScript, etc.]`) with project-specific details.
2. **Fill in missing sections** as the project evolves.
3. **Regularly update** documentation to reflect changes in the codebase.
4. **Ensure every developer contributes** to maintaining accurate documentation.

This structured template ensures **clarity, organization, and efficiency** for both new and existing developers. 🚀 Let me know if you need further refinements!

0000-project-docs-template-v0.md

Project Documentation Template

---

1. Core Documentation

• architecture.md:

  • High-level system architecture
  • Key design decisions (e.g., why Next.js, Once UI, and next-intl were chosen)
  • Data flow and component hierarchy
  • Backend architecture (e.g., app/api/{endpoint}/route.ts, app/api/{endpoint}/route.ts, etc..)
  • Frontend architecture (e.g., app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx, components/ui/button.tsx, etc..)
  • Database architecture (e.g., prisma/schema.prisma, prisma/migrations, etc..)
  • Authentication and authorization (e.g., next-auth, next-auth-config.ts)

• components.md:

  • List of reusable components (e.g., ProjectCard, TableOfContents)
  • Props, usage examples, and customization guidelines
  • Component structure (e.g., {ComponentName}.tsx, {ComponentName}.stories.tsx, {ComponentName}.test.tsx, etc..)
  • Comments and documentation (e.g., // TODO: {description}, /* {description} */, etc..)
  • Interfaces, and types (e.g., type {ComponentName}Props = {type}, interface {ComponentName}State = {type}, etc..)

---

2. Development Workflow

• workflow.md:

  • Local development setup (npm install, npm run dev)
  • Build and deployment process (npm run build, npm start)
  • CI/CD pipeline (if applicable)
  • Git workflow (e.g., git commit -m "feat: add new feature", git push origin main)
  • Git branching strategy (e.g., main, develop, feature/{feature-name}, hotfix/{hotfix-name}, etc..)
  • Git commit message guidelines (e.g., feat: add new feature, fix: fix bug, docs: update documentation, refactor: improve code readability, etc..)

• style-guide.md:

  • Coding conventions (e.g., TypeScript, SCSS)
  • File structure and naming conventions (app/api/{endpoint}/route.ts, app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx, components/ui/button.tsx, etc..)
  • Commit message guidelines (e.g., feat: add new feature, fix: fix bug, docs: update documentation, refactor: improve code readability, etc..)
  • Code style and formatting (e.g., camelCase, kebab-case, snake_case, PascalCase, etc..)
  • Naming conventions (e.g., use{ComponentName}, {ComponentName}, {ComponentName}Props, {ComponentName}State, etc..)
  • Interfaces, and types (e.g., type {ComponentName}Props = {type}, interface {ComponentName}State = {type}, etc..)
  • Component structure (e.g., {ComponentName}.tsx, {ComponentName}.stories.tsx, {ComponentName}.test.tsx, etc..)
  • Comments and documentation (e.g., // TODO: {description}, /* {description} */, etc..)

---

3. Maintenance

• troubleshooting.md:

  • Common errors and fixes (e.g., missing locale, build failures)
  • Debugging tips
  • Logging and error handling (e.g., console.error, console.log, console.warn, etc..)
  • Error handling (e.g., try, catch, finally, throw, throw new Error('Error message'), etc..)
  • Debugging tips (e.g., console.log, console.error, console.warn, etc..)
  • Performance optimization (e.g., useMemo, useCallback, useEffect, useLayoutEffect, etc..)
  • Code splitting (e.g., dynamic, loadable, lazy, Suspense, etc..)

• refactoring.md:

  • Areas for improvement (e.g., performance, code organization)
  • Known technical debt
  • Refactoring guidelines
  • Code quality analysis (e.g., eslint, prettier, stylelint, etc..)

---

4. Onboarding

• getting-started.md:

  • Prerequisites (Node.js, npm)
  • Quickstart guide for new developers

• examples.md:

  • Code samples for common tasks (e.g., adding a new model, adding a new page, adding a new component, etc..)
  • Adding a new api route (e.g., app/api/{endpoint}/route.ts)
  • Adding a new page (e.g., app/(protected)/{page}/page.tsx, app/(marketing)/page.tsx, app/(auth)/register/page.tsx)
  • Adding a new component (e.g., components/ui/button.tsx)
  • Example MDX files for blog posts, pages, routes, and other contextual files / components

---

5. Design System Integration

• design-system.md:
  • Overview of Once UI integration
  • Shadcn/UI integration (e.g., Button, Card, Input, Select, etc..)
  • Layouts (e.g., MainLayout, AuthLayout, MarketingLayout, ProtectedLayout, etc..)
  • Customizing design tokens (e.g., colors, spacing, typography)
  • Using Once UI components (e.g., Button, Card, Input, Select, etc..)

---

6. Security

• security.md:
  • Authentication and authorization (e.g., next-auth, next-auth-config.ts)
  • Middleware (e.g., middleware.ts)
  • API routes
  • Protected routes
  • Protected layouts
  • Password protection for routes (e.g., protectedRoutes in config.js)
  • Handling sensitive data (e.g., .env variables)

---

7. Roadmap

• roadmap.md:
  • Future features and improvements
  • Milestones and timelines

---

Documentation Process To Be Followed Strictly and Sequentially (only one file at a time)

Proceed in YOLO mode.

Each document should be created sequentially, building upon the information from previous files to ensure consistency and completeness.

1. Core Docs: Essential for understanding the system. (architecture.md)
2. Workflow Docs: Ensure smooth development and deployment. (workflow.md)
3. Maintenance Docs: Help with debugging and long-term maintenance. (troubleshooting.md)
4. Onboarding Docs: Make it easy for new contributors to get started. (getting-started.md)
5. Design System Docs: Ensure consistent UI/UX across the project. (design-system.md)
6. Security Docs: Protect sensitive routes and data. (security.md)
7. Roadmap Docs: Provide direction for future development. (roadmap.md)

This set of docs covers all critical aspects of the project while keeping it concise and actionable.

1-cursorrules-to-generate-cursorrules.md

Here's an instructional guide for Cursor to write .cursorrules file based on project analysis:

# Instructions for Cursor to Generate .cursorrules

1. **Analyze Project Structure**
   - Scan the project directory to identify:
     - Framework (React, Vue, Angular, etc.)
     - Language (JavaScript, TypeScript, Python, etc.)
     - Key directories (components, pages, utils, etc.)
     - Configuration files (package.json, tsconfig.json, etc.)

2. **Detect Coding Standards**
   - Check for ESLint/Prettier configurations
   - Analyze existing code for patterns in:
     - Variable naming (camelCase, snake_case)
     - Component structure (functional vs class)
     - Import organization
     - Comment style

3. **Identify Key Libraries**
   - Parse package.json for dependencies
   - Detect state management (Redux, Zustand, etc.)
   - Identify UI libraries (Material UI, Tailwind, etc.)
   - Find testing frameworks (Jest, Cypress, etc.)

4. **Determine Performance Practices**
   - Look for memoization patterns (React.memo, useMemo)
   - Check for lazy loading implementations
   - Identify performance monitoring tools

5. **Assess Testing Approach**
   - Detect test directory structure
   - Identify testing tools in use
   - Analyze test coverage configuration

6. **Generate .cursorrules Content**
   - Create sections for:
     - Project context
     - Coding standards
     - Preferred libraries
     - File structure
     - Performance guidelines
     - Testing requirements
     - Documentation standards
     - Error handling

7. **Format .cursorrules File**
   - Use clear, concise language
   - Organize information in bullet points
   - Include specific examples where helpful
   - Maintain consistent formatting

8. **Place .cursorrules in Project Root**
   - Ensure file is named exactly `.cursorrules`
   - Verify it's included in .gitignore if necessary

Example Output Structure:
```text
Project Context:
- React TypeScript application
- Next.js framework
- Tailwind CSS for styling

Coding Standards:
- Use functional components with hooks
- Prefer TypeScript interfaces over PropTypes
- Follow Airbnb style guide

Preferred Libraries:
- React Query for data fetching
- Zustand for state management
- React Testing Library for unit tests

File Structure:
- src/components: Reusable UI components
- src/pages: Next.js page components
- src/lib: Utility functions
- src/styles: Global styles

Performance Guidelines:
- Implement React.memo for pure components
- Use dynamic imports for large components
- Optimize images with next/image

Testing Requirements:
- Write unit tests for all components
- Maintain 80% test coverage
- Use Jest for unit testing

Documentation Standards:
- Use JSDoc for all functions
- Include TypeScript interfaces
- Maintain README.md in each directory

Error Handling:
- Use try/catch for async operations
- Implement error boundaries
- Log errors to Sentry

9. Review and Update
   • Regularly analyze project changes
   • Update .cursorrules as project evolves
   • Maintain consistency with team practices

1.1-cursorrules-2gen-cursorrules.md

Best Cursor Rules: Mastering .cursorrules for Cursor IDE

.cursorrules

. In this article, we'll explore how to create the best cursor rules to boost your productivity and tailor your AI-assisted coding experience.

Understanding .cursorrules

.cursorrules

is a project-specific file that allows you to define custom instructions for Cursor's AI features. By placing this file in the root of your project, you can provide context-specific guidance for tools like Cursor Chat and the Ctrl/⌘ K command.

Tips for Creating the Best Cursor Rules

1. Start with Project Context

Begin your

.cursorrules

file by providing an overview of your project:

This is a React-based web application for a social media platform. The project uses TypeScript and follows the Airbnb style guide.

2. Define Coding Standards

Specify your project's coding standards to ensure AI-generated code aligns with your team's practices:

Please follow these coding standards: - Use functional components with hooks instead of class components - Prefer const over let for variable declarations - Use camelCase for variable and function names, PascalCase for component names

3. Specify Preferred Libraries

Guide the AI to use your project's chosen libraries and frameworks:

When suggesting code, please use the following libraries: - React Router for navigation - Redux for state management - Styled-components for CSS-in-JS styling

4. Provide File Structure Information

Help the AI understand your project's organization:

File structure: - src/components: Reusable UI components - src/pages: Top-level page components - src/utils: Helper functions and utilities - src/api: API service functions

5. Set Performance Guidelines

Emphasize performance considerations:

Performance guidelines: - Use React.memo for pure functional components - Implement lazy loading for route components - Optimize useEffect dependencies to prevent unnecessary re-renders

6. Specify Testing Requirements

Outline your testing approach:

Testing requirements: - Write unit tests using Jest and React Testing Library - Aim for at least 80% test coverage - Include snapshot tests for UI components

7. Include Documentation Guidelines

Ensure consistent documentation:

Documentation guidelines: - Use JSDoc comments for functions and components - Include PropTypes for all components - Maintain a README.md file in each major directory

8. Set Error Handling Preferences

Guide the AI on how to approach error handling:

Error handling: - Use try/catch blocks for async operations - Implement a global error boundary component - Log errors to a monitoring service (e.g., Sentry)

Conclusion

By implementing these best cursor rules in your

.cursorrules

file, you'll create a powerful guide for Cursor's AI features, ensuring that the assistance you receive is tailored to your project's specific needs and standards. Remember to update your

.cursorrules

as your project evolves to keep your AI assistance aligned with your current requirements.

For global AI instructions that apply across all your projects, don't forget to utilize the 'Rules for AI' section under Cursor Settings > General > Rules for AI. This allows you to set overarching guidelines for your coding style and preferences.

AceternityUI.md

Here's the categorized grouping of Aceternity UI / Magic UI components based on their usage purpose:

---

1. Interactive Cards & Hover Effects

• 3D Card Effect - Hover to elevate elements.
• Card Spotlight - Spotlight effect with radial gradient.
• Expandable Cards - Click to expand for more info.
• Focus Cards - Hover to focus, blurring others.
• Evervault Card - Reveals encrypted text with a gradient.
• Glare Card - Hover glare effect.
• Glowing Background Stars Card - Star animations on hover.
• Text Reveal Card - Reveals text at the bottom on mouse move.
• Wobble Card - Translates and scales on mousemove.
• Hover Border Gradient - Expanding gradient border on hover.
• Direction Aware Hover - Changes effect based on hover direction.
• Hover Effect - Effect slides to the hovered card.

---

2. Background Effects & Animations

• Aurora Background - Subtle aurora-like background.
• Background Beams - Animated background beams following SVG paths.
• Background Beams With Collision - Exploding beams in the background.
• Background Gradient Animation - Smooth gradient position changes.
• Background Gradient - Animated gradient for any element.
• Background Boxes - Full-width highlightable background boxes.
• Background Lines - Wavy SVG paths animation.
• Grid and Dot Backgrounds - Grid/dot pattern for section backgrounds.
• Meteor Effect - Meteor-like beam animations.
• Shooting Stars and Stars Background - Shooting stars on a starry backdrop.
• Vortex Background - Swirling vortex background.
• Wavy Background - Moving wave effect.
• Sparkles - Configurable sparkles component.
• Moving Border - Animated border around elements.

---

3. Hero Sections & Feature Highlights

• Hero Highlight - Background text highlight effect.
• Hero Parallax - Scroll effect with animations.
• Lamp Section Header - Lamp effect for section headers.
• Feature Sections - Various feature layouts.
• Container Scroll Animation - 3D rotating scroll animation.
• Sticky Scroll Reveal - Sticky container with reveal-on-scroll.
• Parallax Grid Scroll - Opposite scrolling grid columns.
• Cover - Hover to reveal beams and space effect.

---

4. Image & Media Components

• Compare - Side-by-side image comparison slider.
• Lens - Zoom into images/videos.
• Images Slider - Full-page image slider with keyboard navigation.
• Canvas Reveal Effect - Expanding dot background on hover.
• SVG Mask Effect - Hover to reveal what's underneath.
• Google Gemini Effect - SVG effect from Google Gemini's site.
• Tracing Beam - Beam follows SVG path based on scroll speed.

---

5. Text Effects & Typing Animations

• Colourful Text - Text with color filters and scaling.
• Flip Words - Rotating word transitions.
• Text Generate Effect - Text fades in sequentially on load.
• Typewriter Effect - Simulates typed text.
• Text Hover Effect - Animated gradient outline on hover.

---

6. Carousels & Sliders

• Apple Cards Carousel - Sleek carousel like Apple’s.
• Carousel - Customizable image/content slider.
• Card Stack - Testimonials/cards stacking in intervals.
• Infinite Moving Cards - Looping animated card group.

---

7. Navigation & Menus

• Floating Dock - macOS-style floating navigation bar.
• Floating Navbar - Hides on scroll, reveals when scrolling up.
• Sidebar - Expandable hover-responsive sidebar.
• Navbar Menu - Animated hover menu.
• Link Preview - Dynamic link preview for anchor tags.

---

8. Forms & Inputs

• File Upload - Minimal drag-and-drop file uploader.
• Signup Form - Custom form with animations.
• Placeholders And Vanish Input - Sliding placeholders and disappearing input.

---

9. Interactive UI Components

• Animated Modal - Custom modal with transitions.
• Animated Tabs - Tabs with background animations.
• Animated Testimonials - Testimonial section with images & quotes.
• Animated Tooltip - Tooltip follows mouse pointer.
• Multi Step Loader - Step-based loading indicator.
• Timeline - Sticky timeline with animated scroll beam follow.

---

10. Maps & Geolocation

• World Map - Animated map with programmatically generated lines/dots.
• GitHub Globe - Interactive globe animation like GitHub.

---

11. Miscellaneous Components

• Tailwind CSS Buttons - Prebuilt Tailwind buttons.
• Following Pointer - Custom animated pointer following the mouse.
• 3D Animated Pin - Hover-animated gradient pin.

---

This categorization should help in understanding the usability of each Aceternity UI / Magic UI component based on its primary purpose. 🚀

project-explanation.md

Project Documentation Template

1. Executive Summary

• Introduction
• Key Highlights
• Benefits

2. Project Overview

• Introduction
• Key Pain Points

3. Target Audience

• Primary Audience
• Secondary Audience

4. Use Cases

• Key Use Cases
• Applications
• Usage Scenarios

5. Industries

• Target Industries
• Industry-specific Applications

6. Features & Functionalities

• Core Features
• Advanced Functionalities
• Technical Specifications

Please use this template to write a comprehensive document explaining this project.