Webgl particle galaxy
Skill nexu-io/open-design/plugins/_official/examples/webgl-particle-galaxy
π¨ The open-source Claude Design alternative. π₯οΈ Local-first desktop app. πΌοΈ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video β real files, HTML/PDF/PPTX/MP4 export. π€ Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill webgl-particle-galaxyAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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. Open Design serves this in powered-preview mode so the GPU stack actually runs.
SKILL.md
3.7 KB, as published. Nobody here has run it
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
Open Design 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 viagl_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
#63fe13for 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
webgl2is unavailable.