Noir AuroraMotion
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript. Both prices are in the HTML; the hidden one is display: none and the shown one arrives out of a soft blur. Plans are lit panels with the sky spotlight, mono billing lines and aurora checks. The featured plan keeps the page's theme (a lit night card in Night, a white lit card under a multiply sky in Day, both with the beam glow and a ring), raised a little, with its own small swaying sky (the view's ambient loop) and the page's one BorderBeam lap when it comes into view; give it the primary button. 1–4 plans keep equal heights.
It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
Plans as one ruled sheet with the featured plan on the cobalt cell (data-surface="accent": white text, its accent CTA turns volt), and an ink-thumb Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has(), the segmented look with the save text as a lime badge), so it works before and without JavaScript.