Card Ribbon Gallery: Project Cards on a 3D Ribbon That Sort Into a Grid

Build a portfolio hero where project cards ride a bent 3D ribbon across the screen between two giant words, drifting on their own and following the pointer, then fly into a tidy grid as the page scrolls; in the grid a card lifts under the pointer and shows its title. SandBase draws nine covers as one contact sheet that the Skill cuts apart, or you bring your own folder. CSS 3D only. 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.

Card Ribbon Gallery: Project Cards on a 3D Ribbon That Sort Into a Grid

Bring what the cards show (or your own folder of pictures), your brand, the two giant words, card titles, links, palette and language. The Skill returns a full landing page (index.html), a section to paste into an existing site, the runtime script and stylesheet, the cut-apart cards and the bundled open fonts.

How it works

  1. SandBase draws the nine covers as one 3 × 3 contact sheet with white gutters; the Skill finds the gutters and cuts it into cards.

  2. The builder writes a section just over three screens tall with a sticky stage, the words and titles as real text.

  3. In the browser every card is placed on a sine-shaped ribbon or in its grid cell, and its position, depth, rotation and width are blended between the two as you scroll.

Frequently asked questions

What does a new set cost?

One contact sheet through SandBase: listed at $0.10, and $0.075 was charged for each example. With your own pictures it costs nothing.

Can I use my own pictures?

Yes. Point the builder at a folder of 4 to 15 JPEG or PNG files and it skips generation.

Does it need WebGL?

No. It is CSS 3D only. With reduced motion turned on the ribbon does not drift, and the cards still sort into the grid 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 a two-column grid. Checked in a 390 px phone viewport: a swipe sorts the cards.

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.