How to Use

Add visual effects to your site in minutes. Pick a component, import it, and wrap your content.

1. Import the Component

Each component is a self-contained ES module that registers itself as a custom element. Just import it and it's ready to use.

The easiest way is to import the component directly from the CDN:

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

Or load it as a script tag:

<script type="module" src="https://esm.sh/hic-components/component-name"></script>

You can also install the library locally via npm:

npm install hic-components
import 'hic-components/component-name';

2. Use It in Your HTML

Wrap any content with the component tag. The effect will be applied to everything inside.

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

3. Add Customization

Many components support customization via attributes. Check the documentation for each component to see available options.

<component-name data-option1="value1" data-option2="value2">
  <!-- your content here -->
</component-name>

4. That's It

You're all set! HiC components are designed to be easy to use and integrate seamlessly into your existing workflow.

Just import, wrap your content, and customize as needed. The HTML-in-Canvas API takes care of the rest, rendering your content with stunning visual effects while keeping it fully interactive and accessible.

The rendered result

The <component-name> tag will be replaced by a canvas element. The canvas will contain one wrapper div that renders your content with the specified effect.

All attributes on the original tag are transferred to the canvas, so you can use them for styling or customization. 

<!-- Your original HTML -->
<component-name data-foo="bar" class="my-component">
  <!-- your content here -->
</component-name>
<!-- The rendered HTML -->
<canvas data-foo="bar" class="my-component">
  <!-- a full size wrapper div to render your content -->
  <div style="width: 100%; height: 100%;">
    <!-- your content here -->
  </div>
</canvas>

Your original HTML content remains fully interactive and accessible, while the canvas provides the visual enhancements.

Size

Note that a canvas is not a div, and it will NOT automatically size to fit its content. You need to set the size of the canvas using CSS or by setting the width and height attributes on the original tag. 

<!-- Set size with attributes -->
<component-name width="300" height="200">
  <!-- your content here -->
</component-name>
<component-name class="my-component">
  <!-- your content here -->
</component-name>

<!-- Set size with CSS -->
.my-component {
  width: 100%;
  height: 400px;
}

A Word of Caution

The HTML-in-Canvas API is still an experimental technology. Browser support is limited, behavior may change between versions, and some edge cases are not yet fully resolved.

Use these components with care, and keep an eye on the API's evolution.

That said, it's a great time to experiment and explore what's possible.

Explore the Showroom ⇾