# Custom Cursor #1

### Component Structure

* **CC1 CURSOR WRAPPER (Div)**: The main container that holds the custom cursor elements, ensuring they are positioned correctly and ready to interact with user movements and actions.
* **CC1 CURSOR (Div)**: These div elements represent the custom cursor's various states and animations, layered to create a depth effect. The cursors vary in opacity, creating a trailing animation effect.
* **CC1 TARGET SECTION (Section)**: Designated area where the custom cursor effect is active, allowing for specific interactions such as hover effects on links and buttons.
* **CC1 CONTAINER (Container)**: Contains interactive elements like links and buttons that the custom cursor will interact with, showcasing the cursor's dynamic effects upon hover or click.

### Animation and Interaction Details

* **CURSOR - MOVE**: This event triggers the custom cursor to follow the user's mouse movements within the CC1 TARGET SECTION, with a slight delay and stagger for a smooth animation effect.
* **CURSOR - HOVER IN & OUT**: These events define the cursor's transformation when hovering over interactive elements (links and buttons). The cursor scales up on hover in, creating a highlight effect, and returns to its original state on hover out, ensuring a clear indication of interactive areas.
* **ON PAGELOAD**: Sets the initial state of the custom cursor to be hidden until the page is fully loaded, ensuring a clean and uninterrupted page loading experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/custom-cursors/custom-cursor-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.