Skip to content
Hover Tilt

Web Component Demo

This page demonstrates the Web Component version of Hover Tilt running completely standalone - no Framework, no build step, just pure HTML and JavaScript loaded from a CDN.

The Web Component is loaded via:

index.html
<script type="module" src="https://cdn.jsdelivr.net/npm/hover-tilt/dist/hover-tilt.js"></script>

and then applied to the DOM like this:

index.html
<hover-tilt shadow scale-factor={1.2}>
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <h3>Basic Example</h3>
    <p>Hover over this card to see the default tilt effect</p>
  </div>
</hover-tilt>

Basic Example

Hover over this card to see the default tilt effect

View Source

Section titled “View Source”

You can view the source of this page to see that it’s pure HTML - no Svelte Components, no build-time magic, just the Web Component working as intended.