NgtsSparkles

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-sparkles',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 4], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false" [lights]="false" background="#111">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'sparkles-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Sparkles {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtsSparkles } from 'angular-three-soba/staging';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-sparkles
            [options]="{
                count: 100,
                scale: 4,
                size: 6,
                speed: 0.4,
                color: '#ffa0e0',
            }"
        />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsSparkles],
})
export class SceneGraph {}

NgtsSparkles is a port of Drei’s Sparkles which renders animated sparkle particles floating in 3D space.

Creates a magical, sparkling effect using GPU-accelerated points with custom shaders.

Usage

Basic Sparkles

<ngts-sparkles
  [options]="{ count: 50, scale: 2, size: 6, speed: 0.4, color: 'gold' }"
/>

Around an Object

<ngt-mesh>
  <ngt-icosahedron-geometry />
  <ngt-mesh-standard-material color="hotpink" />
</ngt-mesh>

<ngts-sparkles
  [options]="{
    count: 100,
    scale: [3, 3, 3],
    size: 4,
    speed: 0.5,
    color: 'white'
  }"
/>

Magical Aura Effect

<ngt-group>
  <app-crystal-model />

  <ngts-sparkles
    [options]="{
      count: 200,
      scale: [2, 4, 2],
      size: 3,
      speed: 0.3,
      color: '#88ffff',
      opacity: 0.8
    }"
  />
</ngt-group>

Fairy Dust Trail

<ngts-sparkles
  [options]="{
    count: 150,
    scale: [5, 2, 5],
    size: 2,
    speed: 0.8,
    noise: 2,
    color: '#ffaaff'
  }"
/>

Fireflies Effect

<ngts-sparkles
  [options]="{
    count: 30,
    scale: [10, 5, 10],
    size: 8,
    speed: 0.2,
    noise: 0.5,
    color: '#ffff00',
    opacity: 0.7
  }"
/>

Anisotropic Noise

Different noise values per axis create directional movement:

<ngts-sparkles
  [options]="{
    count: 100,
    scale: [4, 4, 4],
    size: 5,
    speed: 0.5,
    noise: [1, 2, 1],
    color: 'cyan'
  }"
/>

Subtle Background Particles

<ngts-sparkles
  [options]="{
    count: 500,
    scale: 20,
    size: 1,
    speed: 0.1,
    opacity: 0.3,
    color: 'white'
  }"
/>

Dynamic Color

@let sparkleColor = getSparkleColor();

<ngts-sparkles
  [options]="{
    count: 100,
    scale: 3,
    size: 5,
    speed: 0.5,
    color: sparkleColor
  }"
/>

Notes

• Sparkles use a custom shader for GPU-accelerated animation
• The scale option defines the bounding box where particles are distributed
• noise controls how much particles deviate from their base positions
• Higher count values impact performance; balance visual quality with frame rate
• The size property sets individual particle size in pixels
• Particles are randomly distributed within the scale bounds on initialization

Options

options input accepts any properties from THREE.Points in addition to the following:

Properties

name	type	description
count	number	Number of sparkle particles. Default: 100
speed	number	Animation speed factor. Default: 1
opacity	number	Opacity of the sparkles. Default: 1
scale	number | [number, number, number]	Scale of the sparkles distribution area. Default: 1
noise	number | [number, number, number]	Noise factor for particle movement. Default: 1
size	number	Size of individual sparkle particles.
color	THREE.ColorRepresentation	Color of the sparkles.