Generative particles Animated HTML website template

The sample page

Prikværk. Data visualization studio, Refshaleøen, Copenhagen.

The idea

Every particle is a data point from the city: 100,000 dots that line up as bikes per hour, heat per season or wind by direction, then part or gather under your cursor and tell you how much they add up to.

What to try

Switch between Bikes, Heat and Wind (or press 1, 2 and 3), move your cursor over the chart to read each value, and press and hold to gather dots and see how much you’ve collected.

Made for

Data studios, science, energy, mobility, media and product

Palette

• #F4F1EA
• #1A1A2E
• #FF6B4A
• #1F9E89
• #E3B23C
• #55556C

Typefaces

Fraunces + Inter

Cultural notes

• Made-up data labeled as illustrative, with a per-dot unit and a text summary.
• No real clients, institutions or addresses: just the neighborhood and generic commissions.
• The same data without WebGL (dotted SVG), with reduced motion (a still image) and without JavaScript.

The HTML

What you download

• A single index.html file with nothing to install: open it, swap in your brand and copy, and upload it to your hosting.
• In English and Spanish, tested on desktop and mobile.
• Instructions for changing copy, colors, language and prices, plus its license.