Growth Reel

Self-contained browser effects: a particle vortex ending in an explosion, a continuous perspective light path (Gargantua), and both played in sequence. The default sequence finishes in 7.8 seconds. The light keeps travelling along the floor and up the wall, with the approved rounded bend and soft trails.

The package includes all rendering, styles, icons, mascots and playback handling. It has no runtime dependencies and does not require Astro, React, Three.js, external assets or a separate stylesheet. Only the public package entry point is exported; the renderer is an implementation detail.

Install and mount

Install from npm:

npm install @platon/[email protected]

<div id="growth" style="width:100%;aspect-ratio:16/9;min-height:300px"></div>

import { mountGrowthAnimation } from '@platon/growth-reel';

const animation = mountGrowthAnimation(document.querySelector('#growth'));
// Later, when removing the containing view:
animation.destroy();

Call mountGrowthAnimation in the browser after the host exists. Provide an empty host with a defined size. Text inherits the page's font; the optional CSS variable --font-body overrides its family. The animation automatically follows its host's size. A repeat mount on the same host returns the existing controller without adding markup or changing its options.

Effects

| effect | Behavior | Intro duration | | --- | --- | --- | | vortex | Circles orbit from, turn into light, collapse and explode. Ends with an empty background; no target label or light path. Stops rendering when complete. | 6.85 s | | gargantua | Reveals to inside the continuous light path immediately. No particles, vortex or explosion. | 1.5 s | | sequence (default) | Vortex and explosion first, then Gargantua and to. The path starts after the explosion has finished. | 7.8 s total |

mountGrowthAnimation(host, { effect: 'vortex', from: 'Building products' });
// Or, in another empty host:
mountGrowthAnimation(otherHost, { effect: 'gargantua', to: 'Technical leadership' });

Each instance owns its playback. Vortex-only instances do not allocate a beam renderer; Gargantua-only instances do not create particle sprites or glow surfaces. The sequence shares their lifecycle without running two controllers.

Text stays centered. Long phrases wrap and each label independently reduces its font size to fit the available height. Unbroken words wrap too. The target label uses a narrower column so white text remains inside the light path. Vortex and beam bounds follow their own label measurements.

Themes

| Option | Appearance | | --- | --- | | spectrum (default) | Approved original: dark background, white labels, red/yellow/green/cyan light, yellow people mascots and pink incidents. | | ozon | White background, blue Middle, white Senior without a text glow, blue/white/light-blue light and matching badges, mascots, vortex and flash. |

Both themes share the same geometry, timing, soft optical spread, rounded corner and compact left trails. Theme selection changes color and its compositing on the background. The original source snapshot and its preview are also retained separately in growth-animation-approved-source-2026-10-26.zip.

const animation = mountGrowthAnimation(host, {
  theme: 'ozon',
  effect: 'sequence',
  from: 'Middle',
  to: 'Senior',
  ariaLabel: 'Growing with the company',
});

Options are fixed for a mounted instance. Destroy and mount again to change them. Unknown theme names and nonempty hosts throw before altering the host. Labels are inserted as text.

Controller and lifecycle

| Method | Behavior | | --- | --- | | pause() | Pause at the current frame. | | resume() | Continue when the animation is visible and the document is active. | | replay() | Restart from Middle, including during playback. | | destroy() | Stop playback, disconnect observers, remove listeners and owned markup, release WebGL resources, restore the host's original attributes. Safe to call repeatedly. |

Space pauses/resumes. After the reel finishes, Enter or a click restarts it. Animations stop while less than 35% visible or while the document is hidden; offscreen time is not added to the reel. Reduced motion displays a static final state (the source label for a standalone vortex, the target label otherwise). WebGL has a Canvas 2D fallback; without Canvas 2D, the corresponding static label is shown. Multiple instances can coexist. Always call destroy() when unmounting a view.

The vortex renders trails and light cores into two reusable surfaces. Light cores follow the particle trajectories as subtle streaks, blending into the outer flow instead of leaving separate bright dots. Each surface has a wide outer halo, a tighter glow and a bright inner image, restoring luminous overlap without a separate blur for every particle. The number of shadow passes is bounded at four per vortex frame. Surfaces and the final beam's WebGL pipeline are prepared before playback, reused on replay, resized only when needed, and released on destroy.

The final light follows the browser's animation frames, just like the initial reel. There is no separate 30 FPS limiter after Senior. A local profiling harness in bench/index.html measures both presets through the full reel or sustained flow; it is excluded from the distributed archive.

Build and preview

From this repository:

npm run build --prefix packages/growth-reel
npm pack ./packages/growth-reel --pack-destination output/packages --ignore-scripts

To preview the built package, serve its directory over HTTP and open examples/index.html. The example imports the compiled public entry point and shows all three effects in both themes without a framework. It includes short, long, Cyrillic and unbroken text presets, editable labels and individual replay.

For a separate checkout of the package, run npm install followed by npm run build. TypeScript is a development dependency only. Build output is ESM with TypeScript declarations. Distribution does not grant a software license; Lucide icon notices are included in THIRD_PARTY_NOTICES.txt.