Component Laboratory
Explore and experiment with custom control components. Select a component from the carousel below to test its interaction and visualization.
Icon Knob
A knob featuring a static icon from lucide-react. Demonstrates how to use icon libraries with RadialImage primitive for centered icon display.
Hi-Fi Knob
A high-fidelity knob featuring a static background image, multiple TickRings for the scale, and a ValueRing indicator.
Selector Knob
A multi-layer knob with discrete positions, featuring a rotating selector image, static body overlay, and custom-rendered text labels via TickRing.
Pan Knob
A speaker-style pan control where sound waves appear on the left or right side based on the pan value.
Custom Knob View
A custom knob view with ring indicator and rotating line. Center content is rendered via HTML overlay (outside SVG) for Safari compatibility.
Maze Control
A maze with a path revealing as the value increases (RevealingPath primitive), showcasing limitless creativity for component design.
Classic Vector Knob
A timeless vintage-style knob using embedded SVG vector graphics for pixel-perfect rendering at any resolution
Guitar Knob
A retro guitar amplifier-style knob featuring pixel art graphics with custom rotation and openness settings. Note how the component value is always located on top of the component.
Value: 0Normalized: 0.0000