Ink Fluid Trail: a Hero Headline You Stir With Coloured Ink
Build a hero page where the pointer stirs glossy coloured ink through a real-time fluid simulation and the giant headline turns light wherever the ink covers it. Pure code with no model calls: a GPU fluid solver, ink colours from your palette, a soft drop shadow, and the headline drawn from the page's own layout. 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, headline, copy, 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 headline as real text and the runtime options, plus a section to paste and a React wrapper.
In the browser a GPU fluid solver runs every frame: pointer motion pushes the flow and adds ink, vorticity keeps it swirling, and pressure keeps it flowing like a liquid.
The headline is redrawn into the same frame at the boxes the page laid out, dark on paper and light under ink.
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.
What happens without WebGL2?
The headline shows as normal text and the page works without the ink. The same happens with reduced motion turned on.
Can I use my own colours and font?
Yes. Set palette.bg, ink, inkOn and the dye colours in site.json; the font comes from the page CSS, so any web font works.
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. A dragged finger stirs the ink until the browser starts scrolling. Checked in a 390 px phone viewport.
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.