How do I install the Webgl Particle Galaxy skill?

Run npx skillmds@latest add gabrielmoreira/webgl-particle-galaxy in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Webgl Particle Galaxy safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Webgl Particle Galaxy?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Webgl Particle Galaxy free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Webgl Particle Galaxy?

gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Webgl Particle Galaxy by gabrielmoreira

Name: Webgl Particle Galaxy
Rating: 4.2 (5 reviews)
Author: gabrielmoreira

Webgl Particle Galaxy

A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from gl_VertexID), so the whole cloud draws in one call. Rendered as a single self-contained `index.html`. Use when the brief asks for a "particle field", "particle galaxy", "point cloud", "instanced points", "starfield", "GPU particles", or a swirling generative point system. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

Particle Galaxy Skill

Produce a single self-contained index.html that renders a real-time particle system full-screen, with a clean typographic overlay on top. The signature move: compute each particle's position on the GPU so the CPU never loops over particles.

Why this is a powered artifact

OpenDesign detects getContext('webgl2') and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin. The full GPU pipeline is available; you do not need to work around the opaque sandbox.

Resource map

webgl-particle-galaxy/
├── SKILL.md      ← you're reading this
└── example.html  ← a working 50,000-point WebGL2 galaxy (READ FIRST)

Workflow

Step 0 — Read the reference

Read example.html end to end. Note the shape: no vertex buffer — the vertex shader reads gl_VertexID, hashes it into a stable per-particle seed, and derives a log-spiral orbit with an inner-fast rotation curve. Points are drawn with gl.drawArrays(gl.POINTS, 0, N) in one call, additive-blended (blendFunc(ONE, ONE) with premultiplied color) so overlapping points glow.

Step 1 — Pick the motion

Choose a field the vertex shader can express cheaply from gl_VertexID + uTime:

Spiral galaxy (default): log-spiral arms, rotation curve speed ≈ k / (r + ε), thin disk.
Attractor / flow: curl or a strange-attractor step baked as a closed-form function of time.
Explosion / reform: interpolate between a seeded start and a target shape on a looping clock.

Step 2 — Build `index.html`

One file, zero external requests. Bind a VAO even with no attributes (some drivers require it).
Point size in the vertex shader (gl_PointSize), clamped and DPR-aware; soft round sprites via gl_PointCoord + a gaussian falloff in the fragment shader.
Additive blending on a dark clear color; premultiply the fragment color so blendFunc(ONE, ONE) reads as glow, not double-exposure.
Compile shaders with error logging (getShaderInfoLog / getProgramInfoLog) so a typo fails loudly.

Step 3 — Overlay + brand

Map the accent colors to the active DESIGN.md when one is present; otherwise a restrained dark palette with one vivid accent (the reference uses lime #63fe13 for the arms and a white-blue core).
Headline ≤ 15ch plus one supporting line. Never bury the particles behind the text.

Step 4 — Self-review (P0)

Renders continuously at ~60fps; the FPS badge updates.
Tens of thousands of points in a single draw call (no per-particle CPU loop).
No WebGL console errors; program links cleanly.
Resizes crisply on window resize (no stretching / blur).
Degrades to a message (not a blank page) if webgl2 is unavailable.

---name: webgl-particle-galaxydescription: A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from gl_VertexID), so the whole cloud draws in one call. Rendered as a single self-contained `index.html`. Use when the brief asks for a "particle field", "particle galaxy", "point cloud", "instanced points", "starfield", "GPU particles", or a swirling generative point system. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.--- # Particle Galaxy Skill Produce a single self-contained `index.html` that renders a real-time particle system full-screen, with a clean typographic overlay on top. The signature move: **compute each particle's position on the GPU** so the CPU never loops over particles. ## Why this is a powered artifact OpenDesign detects `getContext('webgl2')` and renders this file in **powered preview** — a cross-origin-isolated iframe with `allow-same-origin`. The full GPU pipeline is available; you do not need to work around the opaque sandbox. ## Resource map ``` webgl-particle-galaxy/ ├── SKILL.md ← you're reading this └── example.html ← a working 50,000-point WebGL2 galaxy (READ FIRST) ``` ## Workflow ### Step 0 — Read the reference Read `example.html` end to end. Note the shape: **no vertex buffer** — the vertex shader reads `gl_VertexID`, hashes it into a stable per-particle seed, and derives a log-spiral orbit with an inner-fast rotation curve. Points are drawn with `gl.drawArrays(gl.POINTS, 0, N)` in one call, additive-blended (`blendFunc(ONE, ONE)` with premultiplied color) so overlapping points glow. ### Step 1 — Pick the motion Choose a field the vertex shader can express cheaply from `gl_VertexID` + `uTime`: - **Spiral galaxy** (default): log-spiral arms, rotation curve `speed ≈ k / (r + ε)`, thin disk. - **Attractor / flow**: curl or a strange-attractor step baked as a closed-form function of time. - **Explosion / reform**: interpolate between a seeded start and a target shape on a looping clock. ### Step 2 — Build `index.html` - One file, zero external requests. Bind a VAO even with no attributes (some drivers require it). - Point size in the vertex shader (`gl_PointSize`), clamped and DPR-aware; soft round sprites via `gl_PointCoord` + a gaussian falloff in the fragment shader. - Additive blending on a dark clear color; premultiply the fragment color so `blendFunc(ONE, ONE)` reads as glow, not double-exposure. - Compile shaders with error logging (`getShaderInfoLog` / `getProgramInfoLog`) so a typo fails loudly. ### Step 3 — Overlay + brand - Map the accent colors to the active DESIGN.md when one is present; otherwise a restrained dark palette with one vivid accent (the reference uses lime `#63fe13` for the arms and a white-blue core). - Headline ≤ 15ch plus one supporting line. Never bury the particles behind the text. ### Step 4 — Self-review (P0) - [ ] Renders continuously at ~60fps; the FPS badge updates. - [ ] Tens of thousands of points in a **single** draw call (no per-particle CPU loop). - [ ] No WebGL console errors; program links cleanly. - [ ] Resizes crisply on window resize (no stretching / blur). - [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.

Frequently asked questions