This is an extremely basic HTML page using Bootstrap for responsive layout and Prism for syntax highlighting in the code sections.
Plinthos content like the background can be added to nearly any site* via a single line code snippet**.
<script src="https://snippet.plinth.digital/n3x4mP130n1y.js" type="module"></script>* This includes sites made with raw html, website builders (Wordpress, Squarespace, Wix, etc), or frontend frameworks (React, Vue, Angular etc).
** The above snippet is an example only.
The camera is moving with your mouse movements or the tilt of your phone.
Set the shot for a given block of content using only a data attribute.
Use additional data attributes in your element tags to change aspects of the shot (e.g., colors and framing) when that element is on screen.
<section data-pd-show="clouds @ background"
data-pd-clouds="storm"
>
<!-- content -->
</section>
Content reacts to user actions with an easy-to-use JS API.
<button
onclick="Plinthos.displays.background.run('recolor')"
>
Recolor
</button>
Find out more or get in touch for more information / commissions.