Ribbon Sculpture Scroll: Metallic Ribbons That Unfurl as You Scroll
Build a scroll-driven hero around a sculpture of ninety thin twisted metallic ribbons that turns and unfurls from a tight swirl into an open bloom as the page scrolls, tilting toward the pointer, while the headline lifts away and stat cards rise in. Shaped and shaded in WebGL from code; no model calls and no media files. 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, a kicker, headline, two buttons, links, up to four stats, ribbon colours 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 a three-screen section with a sticky stage, the headline and stat cards as real text, plus a section to paste and a React wrapper.
In the browser one mesh holds every ribbon as strips of quads; the vertex shader shapes them from their index, the position along them and the scroll, from a tight swirl to an open bloom.
The fragment shader gives each ribbon a palette colour and a mirror-like studio reflection, while the pointer tilts the whole sculpture.
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.
Can I load my own 3D model?
No. The sculpture is generated from one family of ribbon shapes; you choose the colours, the number of ribbons, their width and the shine.
What happens without WebGL?
A blurred colour wheel stands in for the sculpture and the page still scrolls. With reduced motion turned on the sculpture only moves with the scroll.
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 54 ribbons on narrow screens. Checked in a 390 px phone viewport: a swipe unfolds it.
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.