Neon comet cards
Feature cards on a warm dark ground. At rest they are flat and quiet. Point at one and its edge lights: a green to cyan ring, a comet of light that travels round the border with a second one half a turn behind, a soft tint inside and a halo. Four across, two, then one, by the space they have.
Live preview
Full-site kits
Whole websites for one kind of business. Every page, the header, the footer, the contact form. Built the way Page Building 101 teaches it.
See kitsPatterns
Heroes, pricing, services, testimonials, FAQs, footers. Each one a section you paste in and fill.
Browse patternsComponents
Real Etch components with props: cards, buttons, accordions, forms. Change one and every instance follows.
See componentsEtchPress skill
Claude Code and Codex learn the system. Ask for a new section and it lands in the same tokens and classes as the kits.
How the skill works
Full-site kits
Whole websites for one kind of business. Every page, the header, the footer, the contact form. Built the way Page Building 101 teaches it.
See kitsPatterns
Heroes, pricing, services, testimonials, FAQs, footers. Each one a section you paste in and fill.
Browse patternsComponents
Real Etch components with props: cards, buttons, accordions, forms. Change one and every instance follows.
See components
Full-site kits
Whole websites for one kind of business. Every page, the header, the footer, the contact form. Built the way Page Building 101 teaches it.
See kitsPatterns
Heroes, pricing, services, testimonials, FAQs, footers. Each one a section you paste in and fill.
Browse patternsComponents
Real Etch components with props: cards, buttons, accordions, forms. Change one and every instance follows.
See componentsEtchPress skill
Claude Code and Codex learn the system. Ask for a new section and it lands in the same tokens and classes as the kits.
How the skill works
What you can build with it
What a product includes, four things at a glance. Services on a dark landing page. Plan or tier highlights. Feature links at the foot of a home page.
Props
cards (repeater: icon, title, text, linkLabel, href); variant (select: dark ground as designed, or no ground)
States shown
Rest: a flat dark card with a faint border, no neon. Hover (mouse), press, or keyboard focus on the link: the ring, both comets, the tint and the halo. The link's arrow moves on its own hover. Reduced motion: the card still lights, the comets stand still.
How to change it
Content and options are 2 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .comet-cards.
ACSS tokens used
The look is dark by design and does not follow the colour scheme. Its colours are the component's own variables on .comet-cards (–cc-a and –cc-b the two neons, –cc-ink the icon and link, –cc-ground, –cc-face, –cc-line, –cc-title, –cc-text). –ep-angle and ep-spin from the Motion stylesheet.
ACSS requirements
ACSS 4 defaults. EtchPress Motion stylesheet for the comet's turn; without it the ring and the halo still light and the comets stand still. Place it under a section heading: its card titles are H3.
Version history
Version 1.0.0, October 4, 2026: First release.
Tested with
Etch 1.6.8 and ACSS 4.0.1. Version 1.0.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.