Hover Marquee Cards
One line in, one self-contained index.html out: a section whose cards ride an endless marquee, drifting sideways forever until the cursor arrives — then the strip holds and the card under the cursor lifts.
We made two examples: a shelf of Vibary skills in indigo, and a catalogue of Lowtide Records releases in sea-green, with the strip paused and the Harbour Light card lifted. Both share the pill and one-line heading, the seamless duplicated track, the fade at the ends and the single-card lift.
The six cards and their lines all come from the fields. The screenshot freezes the drift with the cursor resting on one card, so it is lifted and ringed. In the file the whole strip drifts left forever, holds while the cursor is over it, and lifts whichever card you land on. Add or drop cards freely: the loop closes seamlessly around whatever is there.
Generated for this library
Input
Brief a shelf of Vibary skills, drifting past
Eyebrow On the shelf
Heading A library that never sits still.
Cards Skills · a finished screen from a sentence /
Motion · patterns you scrub and copy /
Palettes · schemes that already pass /
Vibe Coding · describe it once /
Styles · a look, fully dressed /
Prompts · a picture, on brief
Palette --ground #0a0a0b · --card #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · endless strip, dark ground
header an eyebrow pill and one heading line
track the cards duplicated once and drifting left forever;
the copy makes the loop seamless
band a full-width band that fades at both ends
hold the strip stops while the cursor is over it
lift the hovered card rises and takes an accent ring
while its neighbours stay put
entrance header rises, strip fades in as it starts to drift;
reduced motion stops the drift, shows the row stillYou fill in 5 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The eyebrow pill
- 3The heading (one short line)
- 4The cards
- 5The palette (one :root block)
Hover Marquee Cards
What this makes
One line in, one self-contained index.html out: a section whose cards ride an endless marquee, drifting sideways forever until the cursor arrives — then the strip holds and the card under the cursor lifts.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the five slot lines — the cards are the strip; give each a label and one line.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser, then move the cursor onto the strip to hold it and lift a card.
- Add or drop cards any time; the loop re-seams itself around whatever is there.
What you swap
- The brief (one line)
- a shelf of Vibary skills, drifting past
- The eyebrow pill
- On the shelf
- The heading (one short line)
- A library that never sits still.
- The cards
- Skills · a finished screen from a sentence / Motion · patterns you scrub and copy / Palettes · schemes that already pass / Vibe Coding · describe it once / Styles · a look, fully dressed / Prompts · a picture, on brief
- The palette (one :root block)
- --ground #0a0a0b · --card #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- Enough cards to fill a row and keep drifting — six or more, or the loop reads as a short repeat.
- A label and one line per card; a card carrying a paragraph stops the strip being a strip.
- A palette of five values — the ground, the cards and the hover light are drawn from them.
When to reach for it
When a row of work should feel alive on its own — case studies, projects, logos, a shelf of things — moving until someone looks closer. The endless drift and the hover behaviour are fixed; the cards are yours.
What changes
- A single index.html holding one marquee section on a dark ground, with no build step and no outside request.
- The cards ride one seamless track that drifts sideways forever — duplicated once so the loop never shows a seam.
- The whole strip holds the moment the cursor enters it, and resumes when it leaves.
- The card under the cursor lifts and lights while its neighbours settle back, so attention has somewhere to land.
- With reduced motion the drift stops and the row sits still, every card in reach.
Pairs with
- 3D Tilt CardOne line in, one self-contained index.html out: a single showpiece card that tilts in 3D toward the cursor, a sheen sliding across its face while its emblem and title float at depth — a card that feels held, not printed.
- Collapsible FAQOne line in, one self-contained index.html out: a two-part section — a gradient call-to-action beside a stack of questions that open one at a time, each answer sliding down under a rotating chevron.
- Scroll Reveal SectionOne line in, one self-contained index.html out: a single page section that rises into place as it enters the view, each card ringed by a light that follows the cursor — pick pricing, features, footer or a call to action.