// Hand-drawn SVG elements — wobbly, marker-like overlays.
// Use sparingly to juxtapose the clean editorial layout.
// All elements use slightly irregular bezier paths to feel hand-made.
// Color defaults to currentColor; pass a color prop to override.
const sketchStroke = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
};
// Scribbled oval circle — drawn around full viewBox so it wraps text edges
const SketchCircle = ({ width = 240, height = 90, color = "#1AA5F5", strokeWidth = 3, animate = false, duration = 1100, delay = 200, style }) => {
const pathRef = React.useRef(null);
const [ref, inView] = (animate && typeof useInView === "function") ? useInView({ threshold: 0.4 }) : [null, true];
React.useEffect(() => {
if (!animate) return;
const p = pathRef.current;
if (!p) return;
const len = p.getTotalLength();
p.style.strokeDasharray = `${len}`;
p.style.strokeDashoffset = `${len}`;
if (inView) {
// force reflow
p.getBoundingClientRect();
p.style.transition = `stroke-dashoffset ${duration}ms cubic-bezier(.45,.05,.55,.95) ${delay}ms`;
p.style.strokeDashoffset = "0";
}
}, [inView, animate, duration, delay]);
return (
);
};
// Underline — wobbly stroke, stretches to full container width.
// Pass `double` to render an extra ghost stroke for emphasis.
// `animate` reveals the stroke left-to-right via clip-path (works under preserveAspectRatio="none")
const SketchUnderline = ({ width = 240, height = 22, color = "#1AA5F5", strokeWidth = 3, double = false, animate = false, duration = 800, delay = 250, style }) => {
const [ref, inView] = (animate && typeof useInView === "function") ? useInView({ threshold: 0.4 }) : [null, true];
const wrapStyle = animate ? {
display: "block",
width: "100%",
height: "100%",
overflow: "hidden",
clipPath: inView ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
transition: `clip-path ${duration}ms cubic-bezier(.4,0,.2,1) ${delay}ms`,
} : { display: "block", width: "100%", height: "100%" };
return (
);
};
// Curved arrow pointing right-down (for margin notes)
const SketchArrow = ({ width = 80, height = 80, color = "#0A0A0F", strokeWidth = 2.5, direction = "se", style }) => {
const paths = {
se: { d: "M 8 12 C 30 14, 52 28, 60 56", arrow: "M 52 50 L 60 58 L 68 50" },
sw: { d: "M 72 12 C 50 14, 28 28, 20 56", arrow: "M 12 50 L 20 58 L 28 50" },
ne: { d: "M 8 68 C 30 66, 52 52, 60 24", arrow: "M 52 30 L 60 22 L 68 30" },
e: { d: "M 6 40 C 30 30, 50 50, 70 38", arrow: "M 64 30 L 72 38 L 64 46" },
w: { d: "M 74 40 C 50 30, 30 50, 10 38", arrow: "M 16 30 L 8 38 L 16 46" },
};
const p = paths[direction] || paths.se;
return (
);
};
// Star / sparkle — drawn as overlapping strokes
const SketchStar = ({ size = 36, color = "#1AA5F5", strokeWidth = 2.5, style }) => (
);
// Highlighter swipe — wide chunky behind text
const SketchHighlight = ({ width = 240, height = 36, color = "#1AA5F5", style }) => (
);
// Squiggle divider
const SketchSquiggle = ({ width = 320, height = 22, color = "#0A0A0F", strokeWidth = 2.5, style }) => (
);
// Scratch checkmark
const SketchCheck = ({ size = 32, color = "#1AA5F5", strokeWidth = 3, style }) => (
);
// Asterisk — six radiating wobbly strokes, drawn with multiple imperfect passes
const SketchAsterisk = ({ size = 32, color = "#0A0A0F", strokeWidth = 2.5, animate = false, duration = 700, delay = 0, style }) => {
const svgRef = React.useRef(null);
const [ref, inView] = (animate && typeof useInView === "function") ? useInView({ threshold: 0.4 }) : [null, true];
React.useEffect(() => {
if (!animate || !svgRef.current) return;
const paths = svgRef.current.querySelectorAll("path");
paths.forEach((p, i) => {
const len = p.getTotalLength();
p.style.strokeDasharray = `${len}`;
p.style.strokeDashoffset = `${len}`;
if (inView) {
p.getBoundingClientRect();
p.style.transition = `stroke-dashoffset ${duration}ms cubic-bezier(.4,0,.2,1) ${delay + i * 90}ms`;
p.style.strokeDashoffset = "0";
}
});
}, [inView, animate, duration, delay]);
return (
);
};
// Hand-written margin note in a casual handwriting font
const SketchNote = ({ children, rotate = -4, color = "#0A0A0F", style }) => (
{children}
);
Object.assign(window, {
SketchCircle, SketchUnderline, SketchArrow, SketchStar,
SketchHighlight, SketchSquiggle, SketchCheck, SketchAsterisk, SketchNote,
});