houdini-tesla

    0.0.2 • Public • Published

    houdini-tesla

    houdini tesla used on a button

    A CSS Houdini Worklet to paint Tesla coils.

    Getting started

    1. Load the worklet

    Using CDN is the easiest way to add the library:

    if ('paintWorklet' in CSS) {
      CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
    }

    You can use the polyfill

    To add support for all moder browsers, you can load the worklet with css-paint-polyfill fallback.

    <script>
      ;(async function() {
        if (CSS['paintWorklet'] === undefined)
          await import('https://unpkg.com/css-paint-polyfill')
    
        CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
      })()
    </script>

    2. Ready to use it in your CSS!

    To use the Tesla worklet you need to define some custom properties with values and add the value paint(tesla) on the background property.

    .element {
      --tesla: 0; /* Entry point to animate coil and trigger repaint */
      --tesla-hue: 0;
      --tesla-saturation: 50;
      --tesla-lightness: 50;
      --tesla-blur: 10;
      --tesla-width: 10;
      --tesla-angle: 45;
      --tesla-segments: 2;
      background: paint(tesla-coil);
    }
    Property Description Default
    --tesla Hack, use this property to animate coil. Animating the property triggers a repaint. 0
    --tesla-hue Hue, use this to define the hue of the coil 0
    --tesla-saturation Saturation, use this to define the saturation of the coil 0
    --tesla-lightness Lightness, use this to define the lightness of the coil 0
    --tesla-blur Blur, use this to define a stroke blur for the coil 0
    --tesla-width Width, use this to adjust the stroke width of the coil 0
    --tesla-angle Angle, use this to adjust the permitted angles in the coil 0
    --tesla-segments Segments, use this to adjust the number of segments in the coil 0

    Development

    Run it locally!

    npm i
    make develop
    

    License

    MIT License

    Copyright (c) 2020 jh3y

    Install

    npm i houdini-tesla

    DownloadsWeekly Downloads

    239

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    6.21 kB

    Total Files

    3

    Last publish

    Collaborators

    • jh3y