Scroll Reveal Section
One 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.
We made two examples: a cold indigo features grid for Vibary and a warm roasted-brown one for Halden Roast, with the cursor ring resting on a different card. Both share the pill label, the two-line heading, the four icon cards, the staggered rise and the one-pixel ring that follows the cursor.
You get a single index.html file with one page section. The picture shows it already revealed, with the cursor resting on a card whose border lights up. In the file, the section rises into place once as it scrolls into view, and the ring follows the cursor across every card. Those two behaviours always stay. Set the first field to pricing, footer or a call to action to build a different section that behaves the same way.
Generated for this library
Input
Section features — a grid of what you get
Eyebrow What you get
Heading Everything you need / to design by saying it.
Support Skills, motion, palettes, vibe coding — one library,
one paste.
Cards Skills · Paste a sentence, get a finished screen /
Motion · Scrub a pattern, copy the component /
Palettes · Lift a scheme that already passes contrast /
Vibe Coding · Describe it once, ship the file
Palette --ground #0a0a0b · --card #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · one features section, dark ground
header eyebrow pill, two-line heading, one support line
grid four cards, each a drawn glyph, a title, one line
reveal header and cards rise once as the section scrolls in,
staggered in reading order; reduced motion drops it
ring a one-pixel border on each card that brightens and
follows the cursor; the contents never move with itYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The section (one of four)
- 2The eyebrow pill
- 3The heading (two short lines)
- 4The support line
- 5The cards
- 6The palette (one :root block)
Scroll Reveal Section
What this makes
One 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.
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.
- Set the first slot to the section you want — pricing, features, footer or call to action — and fill the rest.
- Paste it into any coding agent or model in one message. It returns one index.html holding that section.
- Save the file and open it in a browser, then scroll the section into view to see it rise and move the cursor across the cards to light their borders.
- Drop the section into a page later, or make the next one by changing the first slot — the reveal and the ring travel with it.
What you swap
- The section (one of four)
- features — a grid of what you get
- The eyebrow pill
- What you get
- The heading (two short lines)
- Everything you need / to design by saying it.
- The support line
- Skills, motion, palettes, vibe coding — one library, one paste.
- The cards
- Skills · Paste a sentence, get a finished screen / Motion · Scrub a pattern, copy the component / Palettes · Lift a scheme that already passes contrast / Vibe Coding · Describe it once, ship the file
- The palette (one :root block)
- --ground #0a0a0b · --card #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- One section, chosen: this makes one of pricing, features, footer or call to action — not a page of them.
- Cards that carry a title and one line each; a card holding a paragraph is a section pretending to be a page.
- A palette of five values — the ground, the cards and the cursor ring are drawn from them.
When to reach for it
When you need one section, not a whole page — the features grid, the pricing row, the footer, the closing call to action — with the scroll reveal and the cursor-lit borders already wired. The behaviour is fixed; the section type and the words are yours.
What changes
- A single index.html holding one page section on a dark ground, with no build step and no outside request.
- The header and every card rise a short way into place the moment the section scrolls into view, once, in a staggered order — driven by an intersection observer, not a library.
- Each card wears a one-pixel gradient ring that brightens and follows the cursor across the grid, drawn with masked gradients.
- One section type on a clear axis — a pricing row, a features grid, a footer, or a closing call to action — so the same construction covers the four sections a page actually needs.
- With reduced motion the reveal is dropped and the section arrives in place; the cursor ring simply stays quiet.
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.
- Hover Marquee CardsOne 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.