Pellucid

• Heroku: http://pellucid.herokuapp.com/

As Pellucid is a highly experimental module, it requires a browser that supports Custom Elements. With the lack of any screenshot API, Pellucid uses antiquated iframe elements to create a crystalline blurred background for your elements – as such there are certain downsides. Pellucid merely loads the current page in its default state, and therefore any elements which have been modified since the initial state will not be included in the crystalline background – this affects greatly SPAs and pages that use POST data. Considerations should also be taken for the duplicated page-load.

Getting Started

<section is="pellucid-container" data-pellucid-blur="15px">
    <h1>Drag Me&hellip;</h1>
</section>

With the above code Pellucid should create a crystalline background for you! Using the data-pellucid-blur attribute you can define how blurred the background is. Any elements that are appended to the section element will be automatically transposed into a div element with a content class.

Pellucid will render the following HTML structure given the above code:

<section is="pellucid-container" style="...">
    <div class="background" style="...">
        <iframe class="pellucid" src="http://localhost:5000/"></iframe>
    </div>
    <div class="content" style="...">
        <h1>Drag Me…</h1>
    </div>
</section>

By default Pellucid will not make your elements draggable – you can instead use something such as Draggabilly — which is what the example uses.