HiC Components

A collection of interactive web components built with the HTML-in-Canvas API.

Each effect is a self-contained custom element that can be imported and dropped into any page with a single line of code. Wrap your content, and the component takes care of the rest - rendering it onto a canvas with a visual effect while keeping it fully interactive and accessible.

Note: The HTML-in-Canvas API is still experimental. These components require a browser that supports it.

Explore the full collection and try the live demos at HiCshowroom.com.

Available Components

The showroom includes effects like ripple-trails, prismatic-shift, wobbly-cursor, and more, with more on the way. 😀

Browse them all in the Showroom.

Quick Start

Import from CDN:

import 'https://esm.sh/hic-components/component-name';

(You can also load it as a script tag (type="module" is required) or install it locally via npm.)

Then wrap your content:

<component-name>
  <h1>Hello World</h1>
  <p>This content is now rendered in a canvas.</p>
</component-name>

That's it! Your content will be rendered with the component's visual effect while remaining fully interactive and accessible.

For more details and examples, see the How to Use guide.

Customization

Most components support customization via data-* attributes:

<ripple-trails data-strength="1.5" data-size="2" data-speed="0.8">
  <!-- your content -->
</ripple-trails>

Check the showroom for each component's available options.

Contributing

You can add your own component to the showroom by opening a pull request. Add a folder under components/ with an index.js (web component) and a demo.html, register it in showroom-data.js, and you're done.

See the full guide at HiCshowroom.com/contribute.html.

License

MIT © Amit Sheen