webawesome-addons

Custom, dependency-free web components that drop in alongside Web Awesome, under a jk- prefix so they never collide with official wa-* components.

Components

• <jk-tilt> — parallax tilt-on-hover effect with an optional glare overlay.
• <jk-code-editor> — lightweight editable code surface with auto-indent, bracket pairing, line numbers, undo/redo, and a syntax-highlight hook.

See skills/joes-addons/ for full per-component docs.

Usage

1. Load Web Awesome Free first — these components consume its --wa-* design tokens.

2. Add the loader (a module script). It auto-discovers any jk-* element on the page, now or added later:

   <script type="module" src="jk-webawesome.loader.js"></script>
   

3. Use the components:

   <jk-tilt><div class="card">Hover me</div></jk-tilt>
   

The loader strips the jk- prefix and imports components/<name>/<name>.js, resolved relative to the loader file via import.meta.url, so the package works from any path. It also exports startLoader, stopLoader, and discover for manual control.

Attribution

The autoloader is derived from Web Awesome's MIT-licensed autoloader.