OKLCH, SVG Morphs, Container Queries & Pinouts

Interfaces break where color, motion, responsiveness, generated markup, and hardware meet. These five tools cover that front-end-to-device surface: OKLCH Gamut Gradient & Harmony Studio, SVG Path Morpher, CSS Container Queries Lab, Markdown Artifacts Previewer, and GPIO Pinout Interactive Visualizer.

Gradients that survive sRGB without gray dead zones

hexToOklch converts through linear RGB and OKLab matrix transforms, interpolateOklch blends along the shortest hue path, and mapToSrgbGamut pulls wide-gamut colors back into sRGB by reducing chroma — the step that prevents muddy gray midpoints in blue-to-magenta ramps. generateOklchGradient emits each stop as OKLCH CSS plus a hex fallback, and generateHarmony builds complementary, triadic, and analogous sets from the same pipeline.

background: linear-gradient(
  in oklch,
  color(in oklch 0.63 0.26 29deg),
  color(in oklch 0.55 0.24 330deg)
);

Always ship the hex fallback next to color(in oklch ...) — older browsers drop the whole declaration otherwise, leaving an unstyled background instead of an approximate one.

Morph paths and scope responsiveness to the component

parseSvgPath accepts M, L, C, Q, and Z commands, normalizePaths converts both inputs to matching cubic structures, and interpolatePaths blends them at any t in 0–1. generateSvgAnimation exports both SMIL and CSS keyframe snippets from the normalized pair. Normalization is the whole trick: mismatched command counts are what make naive tweens jump, so check the normalized preview before exporting.

generateContainerQueryCss emits container-name, container-type (inline-size or size), and breakpoint @container rules, while validateContainerQueries rejects non-increasing breakpoints. The card, nav, and table patterns plus a resizable live preview show the real payoff: a card that reflows inside a narrow sidebar without any viewport media query at all.

Old approach	Container-query replacement
@media (max-width: 600px) on cards	@container card (max-width: 380px)
JS ResizeObserver toggling classes	container-type: inline-size + pure CSS
Duplicated sidebar/main variants	one component, two container contexts

Render LLM artifacts safely and wire the right pin

parseMarkdownArtifacts splits fenced code blocks out of LLM markdown by language: SVG and HTML preview in a sandboxed iframe with no allow-scripts, while Mermaid, JSX, and other languages stay visible source code. renderMarkdownToText handles the prose separately. The sandbox boundary is the point — generated markup is untrusted input, and previewing it with scripts enabled is an XSS hole dressed as a feature.

getBoardPinout serves deterministic datasets for the Raspberry Pi 40-pin header, ESP32 30-pin layout, and Arduino Uno 20-pin header, and filterPins narrows by power, ground, GPIO, I²C, SPI, UART, PWM, or ADC. Check the I2C0/I2C1 SDA/SCL pin labels before assigning buses — sharing SDA/SCL across the wrong pair is a silent failure that looks exactly like a dead sensor.

Try Them

• OKLCH Gamut Gradient & Harmony Studio — perceptual gradients with gamut mapping and harmonies.
• SVG Path Morpher — normalized cubic interpolation with SMIL and CSS export.
• CSS Container Queries Lab — valid @container rules with live pattern previews.
• Markdown Artifacts Previewer — sandboxed SVG and HTML rendering for LLM output.
• GPIO Pinout Interactive Visualizer — RPi, ESP32, and Uno pins with function filters.