examples/index.html

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Alpine.js Focal</title>
        <script type="module">
            import Focal from '../dist/module.esm.js'

            document.addEventListener('alpine:initializing', () => {
                window.Alpine.plugin(Focal)
            })
        </script>
        <script defer src="https://unpkg.com/alpinejs@3.1.1/dist/cdn.min.js"></script>
    </head>
    <body>
        <img 
            src="https://images.unsplash.com/photo-1542114904-3bc059596c5f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" 
            width="400px" 
            height="600px" 
            x-focal="1656px 345px"
            x-data>
        </img>
    </body>
</html>