Components

Marquee

A horizontally scrolling component that loops its content infinitely. Supports configurable speed, reverse direction, and pause on hover.

∞Loop

2Directions

CSSPure

Source ↗Open Docs

Preview

ArcGIS

QGIS

Docker

OpenLayers

Leaflet

Kubernetes

Argo CD

Apache Airflow

GeoServer

Python

JavaScript

TypeScript

Angular

PostGIS

Version Control

Usage

Import

import { NbMarquee, NbMarqueeItem } from '@ng-brutalism/ui';

Component

interface Skill {
  text: string;
  iconSlug: string;
  iconLabel: string;
}

protected readonly skills: Skill[] = [
  { text: 'ArcGIS', iconSlug: 'arcgis', iconLabel: 'ArcGIS' },
  { text: 'QGIS', iconSlug: 'qgis', iconLabel: 'QGIS' },
  { text: 'Docker', iconSlug: 'docker', iconLabel: 'Docker' },
  { text: 'OpenLayers', iconSlug: 'openlayers', iconLabel: 'OpenLayers' },
  { text: 'Leaflet', iconSlug: 'leaflet', iconLabel: 'Leaflet' },
  { text: 'Kubernetes', iconSlug: 'kubernetes', iconLabel: 'Kubernetes' },
  { text: 'Argo CD', iconSlug: 'argo', iconLabel: 'Argo CD' },
  {
    text: 'Apache Airflow',
    iconSlug: 'apacheairflow',
    iconLabel: 'Apache Airflow',
  },
  { text: 'GeoServer', iconSlug: 'osgeo', iconLabel: 'OSGeo' },
  { text: 'Python', iconSlug: 'python', iconLabel: 'Python' },
  { text: 'JavaScript', iconSlug: 'javascript', iconLabel: 'JavaScript' },
  { text: 'TypeScript', iconSlug: 'typescript', iconLabel: 'TypeScript' },
  { text: 'Angular', iconSlug: 'angular', iconLabel: 'Angular' },
  { text: 'PostGIS', iconSlug: 'postgresql', iconLabel: 'PostgreSQL' },
  { text: 'Version Control', iconSlug: 'git', iconLabel: 'Git' },
];

Click 'Show more' to view additional details.

Template

<nb-marquee class="w-full" duration="10s">
  @for (skill of skills; track skill.text) {
    <nb-marquee-item>
      <span class="mx-4 flex items-center sm:mx-6 lg:mx-8">
        <img
          class="mr-2 h-7 w-7 object-contain sm:mr-3 sm:h-9 sm:w-9"
          [src]="'https://cdn.simpleicons.org/' + skill.iconSlug + '/000000'"
          [alt]="skill.iconLabel + ' logo'"
          loading="lazy"
        />
        <span class="font-heading text-lg sm:text-xl lg:text-2xl">
          {{ skill.text }}
        </span>
      </span>
    </nb-marquee-item>
  }
</nb-marquee>

Reverse

ArcGIS

QGIS

Docker

OpenLayers

Leaflet

Kubernetes

Argo CD

Apache Airflow

GeoServer

Python

JavaScript

TypeScript

Angular

PostGIS

Version Control

Custom speed

ArcGIS

QGIS

Docker

OpenLayers

Leaflet

Kubernetes

Argo CD

Apache Airflow

GeoServer

Python

JavaScript

TypeScript

Angular

PostGIS

Version Control

Disable pause

ArcGIS

QGIS

Docker

OpenLayers

Leaflet

Kubernetes

Argo CD

Apache Airflow

GeoServer

Python

JavaScript

TypeScript

Angular

PostGIS

Version Control

Customization

Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.

Token	Default	Used for
--nb-marquee-duration	5s	Computed animation duration
--nb-border	#000000	Border color and focus ring color
--nb-shadow	#000000	Offset shadow color
--nb-radius	0rem	Corner radius through the rounded-nb utility
--nb-shadow-offset-x	4px	Horizontal shadow and press offset
--nb-shadow-offset-y	4px	Vertical shadow and press offset
--nb-foreground	#000000	Default foreground text color
--nb-background	#ffffff	Default surface background color

API

Input	Type	Default
duration	string	'5s'
reverse	boolean	false
pauseOnHover	boolean	true