# Threads

> Thin lines flowing behind your content like strands in a current.

Source: https://ngwr.dev/bits/threads  
Added in v15.1

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrThreads } from 'ngwr/bits/threads';

@Component({ imports: [WrThreads] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/threads';
```

## Playground

Put it first in a positioned box; it fills that box behind the content.

```angular-html
<section style="position: relative; min-height: 18rem">
  <wr-threads
    [lineCount]="18"
    [amplitude]="40"
    [spread]="0.4"
    [speed]="1"
    [lineWidth]="1"
  />
  <h1 style="position: relative">Content above the threads</h1>
</section>
```

```angular-ts
import { Component } from '@angular/core';

import { WrThreads } from 'ngwr/bits/threads';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrThreads],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Behind a hero

The pointer still bends the threads under the copy, and the copy keeps every click.

```angular-html
<section class="hero">
  <wr-threads [lineCount]="24" [spread]="0.6" />
  <div class="hero__content">
    <h2>Ship the quiet parts</h2>
    <p>The threads stay behind the copy, and the buttons stay clickable.</p>
    <wr-btn color="primary">Get started</wr-btn>
  </div>
</section>

<style>
  .hero { position: relative; min-height: 20rem; overflow: hidden; }
  .hero__content {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    min-height: 20rem;
    padding: 2rem;
    text-align: center;
  }
  .hero__content > * { margin: 0; }
</style>
```

```angular-ts
import { Component } from '@angular/core';

import { WrThreads } from 'ngwr/bits/threads';
import { WrButton } from 'ngwr/button';

/**
 * Behind a hero
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-behind-a-hero-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-behind-a-hero-example.html',
  imports: [WrThreads, WrButton],
})
export class NgwrTheAngularUiLibraryForSignalFormsBehindAHeroExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `lineCount` | How many threads, rounded and kept between 1 and 100. | `number` | `18` |
| `color` | Thread colour, any CSS colour. Emptied, it follows the theme. | `string` | `'var(--wr-threads-color)'` |
| `amplitude` | How far the bundle meanders up and down, in px. | `number` | `40` |
| `speed` | Speed of the current; 0 holds it, a negative value reverses it. | `number` | `1` |
| `lineWidth` | Stroke width of each thread, in px. | `number` | `1` |
| `spread` | Share of the box height the threads fan across at their widest, 0..1. | `number` | `0.4` |
| `followPointer` | Whether the threads near the pointer bend toward it. | `boolean` | `true` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/threads`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-threads-color` | `light-dark(color-mix(in srgb, var(--wr-color-primary) 60%, transparent), color-mix(in srgb, var(--wr-color-primary-lighter) 60%, transparent))` | `.wr-threads` |
| `--wr-threads-count` | `18` | `.wr-threads` |
| `--wr-threads-line-width` | `1px` | `.wr-threads` |
| `--wr-threads-spread` | `0.4` | `.wr-threads` |

## See also

- [Waves](https://ngwr.dev/bits/waves) — Drifting lines behind your content that bend around the pointer.
- [Aurora](https://ngwr.dev/bits/aurora) — An animated aurora background for a hero or a section.
- [Dot Grid](https://ngwr.dev/bits/dot-grid) — A field of dots behind your content that lights up and moves aside near the pointer.
- [Ripple Grid](https://ngwr.dev/bits/ripple-grid) — Grid lines behind your content that the pointer sends ripples through.
- [resolveCssColor](https://ngwr.dev/reference/utils/resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.