Beautiful Backgrounds: Animated Web Components for Stunning Pages

Stefan Nieke — Sat, 24 Jan 2026 17:04:17 +0000

Beautiful Backgrounds is a library of customizable, interactive web components designed to bring web pages to life with dynamic, visually appealing animations. Built in TypeScript, it’s easy to integrate and optimized for performance.

Highlights include:

Ambient Ribbon – flowing ribbons with customizable waves, rotation, and colors.
Digital Rain – Matrix-style falling characters with full control over font, speed, and gradient.
Hexagon Wave – waving polygon grids with dynamic shading and rhythmic motion.
Liquid Lines – fluid lines with gradients and 3D depth effects.
Neon Rails – fast-moving particles on a geometric grid for cyberpunk vibes.
Star Trail – orbiting stars with fading trails for subtle or vibrant skies.

All components are responsive, interactive, and easy to tweak via Storybook, letting you adjust parameters and see results in real time.

Installation:

npm i beautiful-backgrounds --save

import { BbStarTrail } from "beautiful-backgrounds";

Beautiful Backgrounds makes adding dynamic, elegant, and engaging backgrounds to any web project simple — no heavy frameworks or complex setup required.

Repo: https://github.com/niekes/beautiful-backgrounds
Storybook: https://niekes.github.io/beautiful-backgrounds

More backgrounds are planned, expanding the library with new visually striking effects. ✨⭐🌌

Level Up Your D3 Charts: Exploring d3-3d v2.0.0

Stefan Nieke — Sat, 24 Jan 2026 15:19:17 +0000

d3-3d exists for one simple reason:

to take D3’s familiar data-driven approach and extend it into 3D space, without jumping into WebGL or heavy frameworks.

With v2.0.0, d3-3d gets its biggest upgrade so far: TypeScript support, a cleaner API, and much better documentation.

What is d3-3d?

d3-3d is a small helper library that lets you:

Work with 3D data (x, y, z)
Project it into 2D SVG
Keep using D3 selections, joins, and transitions

It focuses on projection and geometry, not on being a full 3D engine.

What’s new in v2.0.0?

1) First-class TypeScript support

d3-3d now ships with proper TypeScript definitions.

Better autocomplete, safer refactors, less guessing.

2) A cleaner, more explicit API

Shapes no longer act like callable functions that implicitly accept data.

Instead, data is passed explicitly via .data().

Before (v1.x):

const projected = triangles3D(data);

Now (v2.0.0):

const projected = triangles3D().data(data);

It’s a breaking change, but it makes the API far more predictable and type-friendly.

The sort function is not attached any more to each shape class, it gets exported directly.

Before (v1.x):

import {
    triangles3D,
} from "d3-3d";

// ... some code

svg.append("g")
   .selectAll(".d3-3d")
   .sort(triangles3D.sort);

Now (v2.0.0):

import {
    sort,
} from "d3-3d";

// ... some code

svg.append("g")
   .selectAll(".d3-3d")
   .sort(sort);

3) Computed properties, now properly documented

Computed properties like centroid, orientation, and transformed coordinates already existed before, but were hard to discover and poorly documented.

v2.0.0 improves:

Documentation
Examples
Practical explanations

These properties are especially useful for things like label placement, interaction logic, or depth-aware rendering.

For depth sorting specifically, d3-3d exports a standalone sort helper, rather than baking sorting into every shape.

Why this release matters

v2.0.0 doesn’t add flashy features — it makes d3-3d easier to use, easier to understand, and safer in modern setups.

If you’re comfortable with D3 and want to add depth without switching stacks, this release is a solid step forward.

https://github.com/Niekes/d3-3d

DEV Community: Stefan Nieke