Heading with echo component

src/back/jdd-components/heading-with-echo/heading-with-echo.css

@@ -0,0 +1,53 @@
+.heading-with-echo {
+	position: relative;
+
+	--shadow-offset-y: 15px;
+
+	padding-top: calc(var(--shadow-offset-y) * 3);
+	padding-bottom: calc(var(--shadow-offset-y));
+
+	&.heading-with-echo--blur {
+		backdrop-filter: blur(5px);
+	}
+
+	& > * {
+		width: 100%;
+		text-align: center;
+		text-wrap: balance;
+		color: var(--color-brand-text-fg);
+		font-size: 40px;
+		margin: 0;
+	}
+
+	.fancy-heading__main {
+		z-index: 1;
+		position: relative;
+
+		/* https://owumaro.github.io/text-stroke-generator/ */
+		text-shadow: var(--color-brand-canvas) 1px 0px 0px,
+			var(--color-brand-canvas) 0.540302px 0.841471px 0px,
+			var(--color-brand-canvas) -0.416147px 0.909297px 0px,
+			var(--color-brand-canvas) -0.989993px 0.14112px 0px,
+			var(--color-brand-canvas) -0.653644px -0.756803px 0px,
+			var(--color-brand-canvas) 0.283662px -0.958924px 0px,
+			var(--color-brand-canvas) 0.96017px -0.279416px 0px;
+	}
+
+	.fancy-heading__shadow1,
+	.fancy-heading__shadow2 {
+		position: absolute;
+		top: 20px;
+		color: transparent;
+		-webkit-text-stroke-color: var(--color-brand-text-fg);
+		-webkit-text-stroke-width: 1px;
+		user-select: none;
+	}
+
+	.fancy-heading__shadow1 {
+		top: calc(var(--shadow-offset-y) * 1);
+	}
+
+	.fancy-heading__shadow2 {
+		top: calc(var(--shadow-offset-y) * 2);
+	}
+}

src/back/jdd-components/heading-with-echo/heading-with-echo.jdd.tsx

@@ -0,0 +1,44 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+	title: new ComponentArguments.ShortText(),
+	level: new ComponentArguments.Enum(["1", "2", "3", "4", "5", "6"]).setExampleValues([
+		"2",
+	]),
+	blur_backdrop: new ComponentArguments.Enum(["true", "false"]),
+	font_family: new ComponentArguments.Enum([
+		"industrial",
+		"sans-serif",
+		"serif",
+		"slab-serif",
+		"headings",
+	]),
+} as const;
+
+export class HeadingWithEcho extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { title, level, font_family, blur_backdrop },
+		classes,
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		return (
+			<div
+				class={[
+					"heading-with-echo",
+					...classes,
+					{ "heading-with-echo--blur": blur_backdrop == "true" },
+				]}
+				style={`font-family: var(--font-${font_family});`}
+			>
+				{`<h${level} class="fancy-heading__shadow1">${title}</h${level}>`}
+				{`<h${level} class="fancy-heading__shadow2">${title}</h${level}>`}
+				{`<h${level} class="fancy-heading__main">${title}</h${level}>`}
+			</div>
+		);
+	}
+}