import { Component } from '@angular/core';
import { WrThreads } from 'ngwr/bits/threads';
@Component({ imports: [WrThreads] })
export class MyComponent {}Threads
Thin lines flowing behind your content like strands in a current.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Put it first in a positioned box; it fills that box behind the content.
<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>Customize
Colour
Lines
Amplitude
Spread
Speed
Line width
Follow pointer
Behind a hero
The pointer still bends the threads under the copy, and the copy keeps every click.
<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>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
Animation WavesDrifting lines behind your content that bend around the pointer.Animation AuroraAn animated aurora background for a hero or a section.Animation Dot GridA field of dots behind your content that lights up and moves aside near the pointer.Animation Ripple GridGrid lines behind your content that the pointer sends ripples through.Util resolveCssColorResolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.