Data Particles Brand Film

About this style

Abstract particle films are a staple of brand work for data, cloud and AI companies, which sell things that have no physical form. Instead of screenshots, thousands of points assemble into forms an audience already reads as data: a chart, a network, a globe. Creative-coding tools such as Processing, started by Casey Reas and Ben Fry in 2001, and later WebGL brought the technique from research labs into design studios, and it became a common way to open keynotes and close launch films. It works when every particle has a destination, each form holds still long enough to be recognized before it dissolves, motion follows a coherent flow rather than random jitter, and the final logo resolves crisply enough to read as a mark rather than a cloud.

Make a 10-second abstract brand film: on warm black, 6,400 small particles in bone and copper flow from one data form to the next, a rising bar chart, a network of nodes and links, a turning globe with arcs, and finally resolve into a crisp logo and wordmark, with a stream of copper data passing through the mark at the end.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Halvane, a data platform (fictional). Wordmark: "halvane", all lowercase.
- Mark: a disc cut into four horizontal bands by three gaps, the second band from the top shifted to the right.
- Tagline: "EVERY SIGNAL, ONE HORIZON"
- Captions: "01 — Measure" · "02 — Connect" · "03 — Everywhere"
- Length: 10 seconds.
</inputs>

<direction>
- Look: restrained and precise, like a generative print in motion. Small, crisp particles on a warm black ground, mostly bone with a few copper ones that carry meaning; each form is held long enough to read; transitions are flows with direction, not explosions. No glow: the particles are ink, not light.
- Palette: ground #0F0E0C with a very soft radial lift to #17140F at the center (painted once); particles bone #EDE6D8 (88%), copper #E07A3F (9%) and slate #7F8C93 (3%); the crisp mark and wordmark in bone #EDE6D8 with the shifted band in copper; captions #8A847A with their numbers in copper; the tagline #8A847A.
- Type: Syne 700 for the wordmark at 104px, letter-spacing −0.02em; JetBrains Mono 400 for captions at 16px and for the tagline at 18px, tracked 0.24em, uppercase.
- Particles: 6,400, each with a seeded size (1.6–2.6px), color and phase. Each is drawn as a filled circle with source-over at 90% alpha; no additive blending, no blur, no trails. Every particle has a target in every form; extras that a form doesn't need become a sparse ambient field (seeded positions across the frame at 25% alpha, slowly drifting).
- Transitions between forms: each particle travels from its old target to its new one along a quadratic Bézier whose control point is offset by a seeded vector (60–220px, its direction taken from a smooth flow field so neighbors bend the same way), on easeInOutCubic over 0.6 s, with a per-particle delay of 0 to 0.35 s that sweeps across the frame from left to right. In a form, each particle drifts ±1.5px on a 0.4 Hz sine with its own phase.
- Form 1, a bar chart: 12 bars, each 52px wide with 20px gaps (x 538–1382), a baseline at y 760, heights 180, 220, 205, 260, 300, 285, 340, 380, 360, 430, 470 and 520px. Particles fill the bars on a 6px jittered grid (±1px); a baseline of particles runs 40px past each end; copper particles fill the tallest bar.
- Form 2, a network: 26 nodes placed by seeded Poisson-disc sampling inside an ellipse (rx 520, ry 300, centered at (960, 540)), each a disc of particles (radius 10–22px); each node linked to its 2 or 3 nearest neighbors (about 40 links), each link drawn as particles every 7px; one path of five linked nodes in copper. While the network holds, a brightening pulse travels along the copper path once.
- Form 3, a globe: a sphere of radius 300 at (960, 540), points on a Fibonacci lattice, tilted 18°, turning 0.35 rad/s about its axis. Land, from a seeded 3D noise on the sphere (fbm, threshold set so about 30% is land), is dense and at full alpha; ocean points are sparse at 25%; the back hemisphere at 15%. Six copper city points with five great-circle arcs between them, each arc made of particles that draw from one city to the next.
- Form 4, the logo: the mark centered at (960, 440): a disc of radius 150 cut by three 14px horizontal gaps centered at y −50, 0 and +50 from its center, with the second band from the top (between the first and second gaps) shifted 24px to the right and filled in copper. Particles fill the mark on a 5px hex grid and the wordmark's glyphs (centered, baseline y 720) on a 4px grid sampled from the text drawn offscreen. Then the crisp vector mark and the real text fade in under them while the particles shrink to nothing, so the final logo is sharp.
- Captions at the bottom-left (x 120, baseline 1000), one per form, rising 10px and fading in with the form and out as it dissolves. The tagline centered at baseline y 790.
- Premium: thousands of points that each know where they're going, forms crisp enough to read in a glance, flows that sweep in one direction, copper used only where it means something, a logo that lands sharp. Cheap: glowing additive blobs, bloom, particles that explode at random, jittery noise, a soft blurry logo, rainbow colors, a lens flare.
- Banned: glow, bloom, additive blending, motion blur trails, lens flares, purple or neon blue, real maps or continents traced from data, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.5s: particles appear scattered across the frame, fading from 0 to 90% while drifting.
- 0.5–1.2s: they flow into the bar chart, left to right; "01 — Measure" rises in.
- 1.2–2.1s: the chart holds, breathing.
- 2.1–2.7s: the flow into the network; the caption swaps to "02 — Connect".
- 2.7–3.6s: the network holds; the copper pulse runs along its path (2.9–3.5 s).
- 3.6–4.2s: the flow into the globe; "03 — Everywhere".
- 4.2–5.1s: the globe turns; the five arcs draw one after another.
- 5.1–5.7s: the flow into the mark and the wordmark; the caption fades out.
- 5.7–5.95s: the crisp mark and wordmark fade in as the particles shrink away; the tagline fades in at 5.8 s.
- 5.95–6.3s: hold. The 6.0 s frame is the hero: the sharp mark with its copper band, the wordmark, the tagline and a faint ambient field.
- 6.3–8.2s: a stream of 300 copper particles flows left to right through the middle gap of the mark, entering from x 600 and leaving at x 1320, each fading in and out at the ends; the ambient field drifts slowly.
- 8.2–8.6s: the stream ends and the ambient field comes to rest.
- 8.6–10.0s: hold, everything still.
For other lengths, stretch the holds inside each form; keep the 0.6 s flows and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter; sample the wordmark's glyph points only after Syne has loaded.
- At load, compute every particle's target in all four forms, its Bézier control offsets and its delays into typed arrays; seek(t) finds the active form or transition and evaluates positions in closed form (the globe's rotation and the drift are functions of t). The ground is painted once into an offscreen canvas and blitted.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 1.5 s the bar chart reads as a rising chart, at 3.0 s the network reads with its copper path, and at 4.5 s the globe reads as a turning sphere with land and arcs; transitions sweep left to right without any explosion; there is no glow or additive brightening anywhere; the 6.0 s frame shows a sharp mark with the shifted copper band, the wordmark and the tagline; and the final frame is the same lockup, still. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…