> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/projects/projects-4.md).

# Projects #4

### Component Structure

* **PR4 - COMPONENT (section):** Contains the entire component, utilizing `pr4__component` for vertical centering and viewport height adjustment.
* **PR4 - CONTAINER (container):** Direct child of the component, organized with `pr4__container`.
* **PR4 - ITEM (block):** Individual project items, styled with `pr4__item`. Includes a title and an overlay for dynamic banner animation.
* **PR4 - HEADING (heading):** Displays project titles within each item, applying `pr4__title`.
* **PR4 - OVERLAY (block):** An overlay block within each item, showing the scrolling banner, styled with `pr4__overlay`.
* **PR4 - BANNER WRAPPER & BANNER INNER (div):** Containers for the scrolling text, use `pr4__banner-wrapper` and `pr4__banner-inner` for layout and animation.

### Animation Structure

**PR4 - BANNER:** A looping animation that automatically scrolls the banner content horizontally, from right to left, across the overlay area of each project item. It triggers on page load, creating a continuous movement effect for the banners.

* **Initial Position:** Sets the starting point of the banner to `x: 0%`.
* **Scrolling Animation:** Moves the banner to `x: -100%` over 10 seconds, repeating indefinitely to achieve a marquee effect.