Squishy pricing card

one fileNo imports, no companion files, no packages. Copy SquishyPricingCard.astro into any Astro project's components folder and render it.

---
/**
 * SquishyPricingCard
 *
 * A single pricing card that answers a hover by squashing very slightly, then
 * springing up past its target and settling — while the price figure grows
 * from 85% to full size on exactly the same curve.
 *
 * The "squish" is the anticipation, not a press. Measuring the reference
 * showed the dip comes at the START of the hover transition (about 200ms in,
 * 4.2% of the travel below the resting value) and is followed by a matching
 * 4.2% overshoot near the end. Pressing the card does nothing at all: with the
 * hover transition allowed to settle first, a pointerdown produced exactly one
 * distinct value.
 *
 * Ships no JavaScript. The reference drives this from a framer-motion spring;
 * here it is two CSS transitions sharing one cubic-bezier, which is why there
 * is no controller, no lifecycle to tear down, and nothing to reinitialise.
 */

export interface SquishyPricingCardProps {
	/** Small pill above the price. Omit to render no pill. */
	badge?: string;
	/** The figure itself, e.g. "$299". Rendered large and monospaced. */
	price?: string;
	/** What the price is per, e.g. "Month". Rendered under it after a slash. */
	period?: string;
	/** One short paragraph under the price. */
	description?: string;
	/** Label for the call to action. Omit to render no call to action. */
	ctaLabel?: string;
	/**
	 * Makes the call to action a link. Unsafe schemes are refused and it falls
	 * back to a <button type="button">, so a bad value cannot produce a live
	 * link — see `safeHref`.
	 */
	href?: string;
	/** Overrides the default, which is `_blank` for absolute http(s) links. */
	target?: "_blank" | "_self";
	/** Overrides the default, which is `noopener noreferrer` on `_blank`. */
	rel?: string;
	/** Card background. Measured default: #615fff. */
	accent?: string;
	/** The decorative blob behind the text. Measured default: #262626. */
	shapeColor?: string;
	/** Draw the decorative blob at all. */
	shapes?: boolean;
	/** Run the squish. `false` leaves every resting value exactly as it is. */
	squish?: boolean;
	/**
	 * How far the card grows on hover. Measured default: 1.05.
	 * Clamped to 1–1.5; below 1 the card would shrink, which is a different
	 * effect wearing this one's name.
	 */
	hoverScale?: number;
	/**
	 * Resting scale of the price figure, which grows to 1 on hover. Measured
	 * default: 0.85. Clamped to 0.1–1.
	 */
	priceRestScale?: number;
	/** Transition length in ms. Measured default: 1000. Clamped to 120–5000. */
	duration?: number;
	class?: string;
	id?: string;
}

interface Props extends SquishyPricingCardProps {}

const {
	badge,
	price,
	period,
	description,
	ctaLabel,
	href,
	target,
	rel,
	accent,
	shapeColor,
	shapes = true,
	squish = true,
	hoverScale,
	priceRestScale,
	duration,
	class: className,
	id,
}: Props = Astro.props;

/*
 * Link data is treated as untrusted: it typically arrives from a CMS and
 * becomes an attribute on every render. Only plain paths, fragments and
 * http/https/mailto/tel survive; anything else — `javascript:` and `data:`
 * above all — is refused, and the call to action renders as a plain <button>
 * rather than as a link that runs.
 *
 * Kept byte-identical to the rest of the library's copies on purpose. A link
 * validator that differs subtly between components is one nobody can audit.
 */
const SAFE_SCHEME = /^(https?:|mailto:|tel:)/i;

/** Control characters are stripped first: "java\tscript:" is a scheme too. */
function stripControls(value: string): string {
	return [...value]
		.filter((ch) => {
			const code = ch.codePointAt(0) ?? 0;
			return code > 31 && code !== 127;
		})
		.join("");
}

function safeHref(value: unknown): string | undefined {
	if (typeof value !== "string") return undefined;
	const raw = value.trim();
	if (raw === "") return undefined;
	const bare = stripControls(raw).trim();
	if (bare === "") return undefined;
	if (
		bare.startsWith("/") ||
		bare.startsWith("#") ||
		bare.startsWith("./") ||
		bare.startsWith("../")
	) {
		return bare;
	}
	if (SAFE_SCHEME.test(bare)) return bare;
	/* A bare relative path has no scheme before its first slash. */
	const colon = bare.indexOf(":");
	const slash = bare.indexOf("/");
	if (colon === -1 || (slash !== -1 && slash < colon)) return bare;
	return undefined;
}

/*
 * Caller-supplied CSS values are validated too.
 *
 * Every one of these lands in an inline `style` attribute. Astro escapes the
 * attribute, so nobody can close it and open another — but inside it a
 * semicolon starts a new DECLARATION, and `url(...)` in a declaration is an
 * outbound request. This library promises previews that make none, so both are
 * refused here rather than assumed absent.
 *
 * Wide on characters, narrow on functions: every colour syntax CSS has is
 * built from these characters, and none of the resource-fetching functions
 * survive.
 */
const CSS_VALUE_ALLOWED = /^[A-Za-z0-9#%.,()\s/+*_-]+$/;
const CSS_VALUE_DENIED = /\b(url|image|image-set|src|element|attr)\s*\(/i;

function safeCssValue(value: unknown, max = 120): string | undefined {
	if (typeof value !== "string") return undefined;
	const bare = stripControls(value).trim();
	if (bare === "" || bare.length > max) return undefined;
	if (!CSS_VALUE_ALLOWED.test(bare)) return undefined;
	if (CSS_VALUE_DENIED.test(bare)) return undefined;
	return bare;
}

const clamp = (n: unknown, lo: number, hi: number, fallback: number) =>
	typeof n === "number" && Number.isFinite(n)
		? Math.min(hi, Math.max(lo, n))
		: fallback;

const resolvedHref = safeHref(href);
if (href !== undefined && resolvedHref === undefined && import.meta.env.DEV) {
	console.warn(
		`[SquishyPricingCard] Refused an unsafe or empty href (${JSON.stringify(href)}). The call to action rendered as a button.`,
	);
}

const isLink = resolvedHref !== undefined;
/*
 * "External" means an absolute http(s) URL. `mailto:` and `tel:` are excluded
 * deliberately: handing either to a new tab leaves an empty one behind once
 * the mail or dial client takes over.
 */
const isExternal = isLink && /^https?:\/\//i.test(resolvedHref);
const resolvedTarget = target ?? (isExternal ? "_blank" : undefined);
const resolvedRel =
	rel ?? (resolvedTarget === "_blank" ? "noopener noreferrer" : undefined);

const hasBadge = typeof badge === "string" && badge.trim() !== "";
const hasPrice = typeof price === "string" && price.trim() !== "";
const hasPeriod = typeof period === "string" && period.trim() !== "";
const hasDescription =
	typeof description === "string" && description.trim() !== "";
const hasCta = typeof ctaLabel === "string" && ctaLabel.trim() !== "";
const hasSlot = Astro.slots.has("default");

/*
 * Empty renders nothing at all. A card with no figure, no copy, no call to
 * action and nothing slotted is a coloured rectangle with a blob on it.
 * `Astro.slots.has` answers this at build time, so it costs nothing at runtime.
 */
const hasContent =
	hasBadge || hasPrice || hasPeriod || hasDescription || hasCta || hasSlot;

const styleVars = [
	safeCssValue(accent, 64) ? `--sqc-accent: ${safeCssValue(accent, 64)}` : "",
	safeCssValue(shapeColor, 64)
		? `--sqc-shape-color: ${safeCssValue(shapeColor, 64)}`
		: "",
	hoverScale !== undefined
		? `--sqc-hover-scale: ${clamp(hoverScale, 1, 1.5, 1.05)}`
		: "",
	priceRestScale !== undefined
		? `--sqc-price-rest-scale: ${clamp(priceRestScale, 0.1, 1, 0.85)}`
		: "",
	duration !== undefined
		? `--sqc-duration: ${Math.round(clamp(duration, 120, 5000, 1000))}ms`
		: "",
]
	.filter(Boolean)
	.join("; ");

const CtaTag = isLink ? "a" : "button";
---

{
	hasContent && (
		<article
			class:list={["sqc", className]}
			id={id}
			style={styleVars}
			data-sqc-root
			data-sqc-squish={squish ? "on" : "off"}
			data-sqc-cta={hasCta ? "yes" : "no"}
		>
			{/*
			  The decorative blob.

			  Two rounded boxes rather than an <svg>, so it needs no viewBox to
			  stay in proportion and takes its colour from one custom property.
			  Purely presentational, hidden from assistive technology, and out
			  of the flow entirely, so it cannot move the content.
			*/}
			{shapes && (
				<span class="sqc-shapes" aria-hidden="true">
					<span class="sqc-shape sqc-shape--disc" />
					<span class="sqc-shape sqc-shape--pill" />
				</span>
			)}

			<div class="sqc-content">
				{hasBadge && <span class="sqc-badge">{badge}</span>}

				{(hasPrice || hasPeriod) && (
					<p class="sqc-price">
						{hasPrice && <span class="sqc-price-figure">{price}</span>}
						{hasPrice && hasPeriod && (
							<span class="sqc-price-slash" aria-hidden="true">
								/
							</span>
						)}
						{hasPeriod && <span class="sqc-price-period">{period}</span>}
					</p>
				)}

				{hasDescription && <p class="sqc-description">{description}</p>}

				<slot />
			</div>

			{hasCta && (
				<CtaTag
					class="sqc-cta"
					href={isLink ? resolvedHref : undefined}
					target={resolvedTarget}
					rel={resolvedRel}
					type={isLink ? undefined : "button"}
				>
					{ctaLabel}
				</CtaTag>
			)}
		</article>
	)
}

<style>
	/*
	 * Token defaults inside `:where()`, which is a portability fix rather than
	 * a flourish.
	 *
	 * Astro scopes component styles by appending a `[data-astro-cid-…]`
	 * attribute, so a plain `.sqc { --sqc-accent: … }` ships at specificity
	 * 0,2,0 and a consumer doing the obvious thing — setting a token on the
	 * class they passed in, at 0,1,0 — silently loses. `:where()` forces the
	 * selector to 0,0,0 while keeping the scoping attribute, so every token
	 * below is overridable by any ordinary rule. Structure stays in the plain
	 * `.sqc` rule underneath, where the component does want to win.
	 */
	:where(.sqc) {
		/* ---- measured from the reference ------------------------------ */
		--sqc-width: 320px;
		--sqc-min-height: 384px;
		--sqc-radius: 12px;
		--sqc-pad: 32px;

		--sqc-accent: #615fff;
		--sqc-shape-color: #262626;
		--sqc-ink: #fff;

		--sqc-badge-bg: rgb(255 255 255 / 0.3);
		--sqc-badge-size: 14px;
		--sqc-badge-line: 20px;
		--sqc-badge-weight: 300;
		--sqc-badge-gap: 12px;

		--sqc-price-size: 60px;
		--sqc-price-line: 72px;
		--sqc-price-weight: 900;
		--sqc-price-rest-scale: 0.85;
		--sqc-price-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
			"Liberation Mono", "Courier New", monospace;

		--sqc-body-size: 16px;
		--sqc-body-line: 24px;

		--sqc-cta-inset: 16px;
		--sqc-cta-radius: 4px;
		--sqc-cta-bg: #fff;
		--sqc-cta-ink: #262626;
		--sqc-cta-border: 2px;
		--sqc-cta-hover-bg: rgb(255 255 255 / 0.3);
		--sqc-cta-hover-ink: #fff;
		--sqc-cta-duration: 150ms;
		--sqc-cta-easing: cubic-bezier(0.4, 0, 0.2, 1);

		--sqc-hover-scale: 1.05;
		--sqc-duration: 1000ms;
		/*
		 * The squish itself.
		 *
		 * Fitted to the reference rather than chosen: its card and its price
		 * ran on ONE normalised curve (identical to four decimal places at
		 * every sampled frame), dipping 4.22% of the travel below the start at
		 * about 200ms and overshooting 4.22% past the target at about 800ms,
		 * settled by 985ms. The closest symmetric cubic-bezier over 1000ms is
		 * this one, at an RMSE of 0.008 in normalised progress, reproducing a
		 * -4.26% dip and a +4.26% overshoot.
		 *
		 * The negative y1 is what makes it squish: the curve leaves the start
		 * travelling the WRONG way. Take it to 0 and this becomes an ordinary
		 * ease with a bounce at the end.
		 */
		--sqc-easing: cubic-bezier(0.7, -0.325, 0.3, 1.325);

		--sqc-focus-ring: #fff;
	}

	.sqc {
		position: relative;
		box-sizing: border-box;
		/*
		 * Fluid to a cap, where the reference is a rigid 320x384 with
		 * `flex-shrink: 0`. That is a deliberate change: measured at a 390px
		 * viewport the reference card stayed exactly 320px wide and would
		 * overflow anything narrower than itself. A library component that
		 * cannot fit a 320px phone is not portable.
		 */
		width: 100%;
		max-width: var(--sqc-width);
		min-height: var(--sqc-min-height);
		padding: var(--sqc-pad);
		border-radius: var(--sqc-radius);
		background: var(--sqc-accent);
		color: var(--sqc-ink);
		overflow: hidden;

		/*
		 * `scale` as its own property rather than inside `transform`, so a
		 * consumer positioning the card with `transform: translate(...)` does
		 * not have their transform silently replaced on hover. The two
		 * properties compose.
		 */
		scale: 1;
		transition: scale var(--sqc-duration) var(--sqc-easing);
		/*
		 * The card grows past its own box on hover, so it has to paint above
		 * whatever sits next to it in a grid of these.
		 */
		z-index: 0;
	}

	/*
	 * Room for the call to action, which is taken out of the flow and laid
	 * over this edge — but only when there IS one. Reserving it
	 * unconditionally left a card with no call to action carrying 72px of dead
	 * space at the bottom, which measurement caught on a long-copy card.
	 *
	 * Enough to clear the button's own 44px plus its 16px inset, with a little
	 * air, so long copy stops above it instead of running underneath.
	 */
	.sqc[data-sqc-cta="yes"] {
		padding-bottom: calc(var(--sqc-cta-inset) * 2 + var(--sqc-pad) + 0.5rem);
	}

	.sqc:hover,
	/*
	 * Keyboard parity, which the reference does not have: its card is a plain
	 * div whose only focusable child is the button, and focusing that button
	 * changes nothing about the card. Here, focusing anything inside runs the
	 * same squish, so a keyboard user sees what a mouse user sees.
	 */
	.sqc:focus-within {
		scale: var(--sqc-hover-scale);
		z-index: 1;
	}

	/* Held exactly as it rests. Not "no card" — no MOVEMENT. */
	.sqc[data-sqc-squish="off"],
	.sqc[data-sqc-squish="off"]:hover,
	.sqc[data-sqc-squish="off"]:focus-within {
		scale: 1;
	}

	/* ---- the decorative blob ------------------------------------------- */

	/*
	 * Measured off the reference's SVG and re-expressed in `cqw`, so the two
	 * shapes keep their proportions and their relationship to each other at
	 * any card width. At the reference's 320px they resolve to exactly the
	 * measured pixels: a 203px disc at 59,13 and a 203x87 pill at 59,222.
	 */
	.sqc-shapes {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		border-radius: inherit;

		/*
		 * The container is THIS layer, not the card, and that distinction is a
		 * bug fix rather than a preference.
		 *
		 * `cqw` resolves against the query container's CONTENT box. The card
		 * carries 32px of padding, so making the card the container measured
		 * `cqw` against 256px rather than 320px and drew the blob at 162px
		 * instead of the measured 203px, shifted up and left. This layer is
		 * `inset: 0` with no padding of its own, so its content box is the
		 * card's border box and the percentages resolve to the pixels they
		 * were measured as.
		 *
		 * `inline-size` only: `size` containment needs a height that does not
		 * depend on contents, and this card's height does.
		 */
		container-type: inline-size;
	}

	.sqc-shape {
		position: absolute;
		left: 18.4375cqw; /* 59 / 320 */
		width: 63.4375cqw; /* 203 / 320 */
		background: var(--sqc-shape-color);
	}

	.sqc-shape--disc {
		top: 4.0625cqw; /* 13 / 320 */
		aspect-ratio: 1;
		border-radius: 50%;
	}

	.sqc-shape--pill {
		top: 69.375cqw; /* 222 / 320 */
		height: 27.1875cqw; /* 87 / 320 */
		border-radius: 50%;
	}

	/* ---- content -------------------------------------------------------- */

	.sqc-content {
		position: relative;
		z-index: 1;
	}

	.sqc-badge {
		display: block;
		width: fit-content;
		margin: 0 0 var(--sqc-badge-gap);
		padding: 2px 12px;
		border-radius: 999px;
		background: var(--sqc-badge-bg);
		font-size: var(--sqc-badge-size);
		line-height: var(--sqc-badge-line);
		font-weight: var(--sqc-badge-weight);
		color: var(--sqc-ink);
	}

	.sqc-price {
		display: block;
		margin: 8px 0;
		font-family: var(--sqc-price-font);
		font-size: var(--sqc-price-size);
		line-height: var(--sqc-price-line);
		font-weight: var(--sqc-price-weight);
		color: var(--sqc-ink);

		/*
		 * Top-left, as measured. A centred origin would make the figure grow
		 * outwards in both directions and slide left as it did, which reads as
		 * the text moving rather than the number getting bigger.
		 */
		transform-origin: top left;
		scale: var(--sqc-price-rest-scale);
		transition: scale var(--sqc-duration) var(--sqc-easing);
	}

	.sqc:hover .sqc-price,
	.sqc:focus-within .sqc-price {
		scale: 1;
	}

	.sqc[data-sqc-squish="off"] .sqc-price,
	.sqc[data-sqc-squish="off"]:hover .sqc-price,
	.sqc[data-sqc-squish="off"]:focus-within .sqc-price {
		scale: var(--sqc-price-rest-scale);
	}

	/*
	 * The slash sits between figure and period and forces the line break, the
	 * way the reference's markup does with a literal <br>. It is decorative
	 * punctuation, so it is hidden from assistive technology — a screen reader
	 * announcing "dollar 299 slash Month" is worse than "$299 Month".
	 */
	.sqc-price-figure,
	.sqc-price-period {
		display: inline;
	}

	.sqc-price-slash::after {
		content: "\A";
		white-space: pre;
	}

	.sqc-description {
		margin: 0;
		font-size: var(--sqc-body-size);
		line-height: var(--sqc-body-line);
		color: var(--sqc-ink);
		text-wrap: pretty;
	}

	/* ---- call to action -------------------------------------------------- */

	.sqc-cta {
		position: absolute;
		z-index: 2;
		left: var(--sqc-cta-inset);
		right: var(--sqc-cta-inset);
		bottom: var(--sqc-cta-inset);

		display: block;
		box-sizing: border-box;
		padding: 8px 0;
		border: var(--sqc-cta-border) solid var(--sqc-cta-bg);
		border-radius: var(--sqc-cta-radius);
		background: var(--sqc-cta-bg);
		color: var(--sqc-cta-ink);

		font-family: var(--sqc-price-font);
		font-size: var(--sqc-body-size);
		line-height: var(--sqc-body-line);
		font-weight: 900;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;

		-webkit-backdrop-filter: blur(8px);

		transition:
			background-color var(--sqc-cta-duration) var(--sqc-cta-easing),
			color var(--sqc-cta-duration) var(--sqc-cta-easing);
	}

	/*
	 * In its own block because this project's CSS minifier collapses an
	 * adjacent `backdrop-filter` / `-webkit-backdrop-filter` pair and keeps
	 * only the prefixed one, which Firefox does not accept. Verified in the
	 * built stylesheet on another component in this library.
	 */
	@supports (backdrop-filter: blur(1px)) {
		.sqc-cta {
			backdrop-filter: blur(8px);
		}
	}

	.sqc-cta:hover {
		background: var(--sqc-cta-hover-bg);
		color: var(--sqc-cta-hover-ink);
	}

	.sqc-cta:focus-visible {
		outline: 2px solid var(--sqc-focus-ring);
		outline-offset: 3px;
	}

	/* ---- reduced motion --------------------------------------------------- */

	/*
	 * The reference does not honour this — measured, not assumed: under
	 * `prefers-reduced-motion: reduce` its hover still produced 58 distinct
	 * intermediate states.
	 *
	 * Here every movement stops, and nothing that informs disappears. The card
	 * keeps its resting size, the price is shown at FULL size rather than at
	 * its 85% resting scale — a state nobody can now animate out of should be
	 * the legible one — and the call to action keeps its colour change, which
	 * is a state change rather than motion.
	 */
	@media (prefers-reduced-motion: reduce) {
		.sqc,
		.sqc:hover,
		.sqc:focus-within {
			scale: 1;
			transition: none;
		}

		.sqc-price,
		.sqc:hover .sqc-price,
		.sqc:focus-within .sqc-price {
			scale: 1;
			transition: none;
		}
	}

	/* ---- forced colours ---------------------------------------------------- */

	/*
	 * A high-contrast theme discards the accent and the blob, which would
	 * leave the card with no edge at all, so the boundary is restated as a
	 * real border.
	 */
	@media (forced-colors: active) {
		.sqc {
			border: 1px solid CanvasText;
		}

		.sqc-shapes {
			display: none;
		}
	}
</style>