\n \n

\n {children}\n

\n );\n};\n\n// Demo component to show the card in action with controls\nfunction App() {\n // State for card properties\n const [minThickness, setMinThickness] = useState(2.0);\n const [maxThickness, setMaxThickness] = useState(3.5);\n const [numberOfWaves, setNumberOfWaves] = useState(8);\n const [regenerateKey, setRegenerateKey] = useState(0);\n \n // Force regeneration when any parameter changes\n useEffect(() => {\n setRegenerateKey(prev => prev + 1);\n }, [minThickness, maxThickness, numberOfWaves]);\n \n // Custom styled slider component\n const Slider = ({ label, value, min, max, step, onChange }) => (\n

\n {label}\n {typeof value === 'number' ? value.toFixed(1) : value}\n

\n onChange(parseFloat(e.target.value))}\n style={{ width: '100%' }}\n />\n

\n );\n \n return (\n

Marker Pen Card Demo

\n \n

Marker Pen

\n Varying thickness with smooth transitions\n

\n \n

Card Controls

\n \n \n \n \n \n \n

\n \n

\n \n View on Val Town\n \n

\n );\n}\n\n// Export the MarkerPenCard component for use in other files\nexport { MarkerPenCard };\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request) {\n return new Response(\n `\n \n \n \n \n Marker Pen Card\n \n \n \n

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/yawnxyz/markerPenCard/code/main.tsx","extension","actionData","errors"]