Particle Morph Scroll: One Cloud of Particles That Becomes a New Shape at Every Chapter
Build a scroll-driven page where one cloud of 14,000 glowing particles morphs into a new shape at every chapter (a sphere, a flower, a butterfly, a diamond, your brand word) while the pointer pushes particles aside and a field of particles rolls underneath. Pure code with no model calls and no media files: WebGL points, shapes built in code or sampled from text, chapter titles that change with the shape. The hero is followed by a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote, a call to action and a footer, with a moving glow and a floating section pill.
Bring your brand, the chapters (a shape, title and line each), links, palette and language. The Skill returns a full landing page (index.html), a section to paste into an existing site and a React component, with the bundled open fonts.
How it works
The builder writes the page with the chapter titles as real text, plus a section to paste and a React wrapper.
In the browser every chapter's shape is built once as the same number of points: from formulas (sphere, flower, butterfly, diamond) or by sampling a word drawn in the page font.
Scrolling eases each particle from its place in one shape to the same place in the next, with a small per-particle delay, and the pointer pushes nearby particles out in the shader.
Frequently asked questions
Does the page call a model?
No. It is pure code: HTML, one script and two fonts. Making a page costs nothing.
Which shapes can I use?
Sphere, ring, galaxy, butterfly, diamond, flower, heart, wave, scatter, and any short word drawn in the display font.
What happens without WebGL?
The chapters show as plain text and the page still scrolls through them. With reduced motion turned on the shapes switch halfway through each chapter without the morph.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.
Does it work on phones?
Yes, with 6,000 particles on narrow screens. Checked in a 390 px phone viewport: a swipe goes through every chapter.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.