\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 [strokeWidth, setStrokeWidth] = useState(2.3);\n const [wavinessMagnitude, setWavinessMagnitude] = useState(2.5);\n const [regenerateKey, setRegenerateKey] = useState(0);\n \n // Force regeneration when any parameter changes\n useEffect(() => {\n setRegenerateKey(prev => prev + 1);\n }, [strokeWidth, wavinessMagnitude]);\n \n // Custom styled slider component\n const Slider = ({ label, value, min, max, step, onChange }) => (\n

\n {label}\n {value.toFixed(1)}\n

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

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

Ballpoint Pen Card Demo

\n \n

Ballpoint Pen

\n Fine lines with subtle variations\n

\n \n

Card Controls

\n \n \n \n \n

\n \n

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

\n );\n}\n\n// Export the BallpointPenCard component for use in other files\nexport { BallpointPenCard };\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 Ballpoint 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/dcm31/ballpointPenCard/code/main.tsx","extension","actionData","errors"]