Code & Algorithms » Demo & Live Tool Playground
Web Demo: CSS Dynamic Point Light Source & Parallax Shadows

Let There Be More Light: Web Demo: CSS Dynamic Point Light Source & Parallax Shadows

Click here to view this in a separate tab.

This demonstrates a high-performance method of rendering dynamic CSS drop shadows from a simulated point light source.

The note and sun light source elements have been made interactively user-draggable by the inclusion of an external draggability package.

Until I have this documented, you can see the code on Codepen at https://codepen.io/kupietz/pen/LEpzJgL.

Update, Feb 2026:

This is not my work but it deserves a mention here. I've been completely outdone. Check this demo out. This guy designed an entire css system around physical lighting: https://ambientcss.vercel.app/ Github: https://github.com/kikkupico/ambientcss

Workshop » Works In Progress » Code & Algo Works In Progress
Draggable Elements WordPress Plugin

Nothin' But A Drag: Draggable Elements WordPress Plugin

First, the demo

This is a brief demo page for my KupieTools Draggable Elements WordPress plugin, which dynamically adds interactive draggability to any page element, based on CSS class names (or, really, any CSS selector).

Here's some boxes:

Drag Me Horizontally Drag Me Vertically Drag Me Anywhere Drag Me To Corners

If you select "View Page Source" on this page in your browser, you will see that the above four DIV elements, as defined in the page HTML, are just ordinary DIV elements with a single classname, an ID, and some visual styling. The KupieTools Draggable Elements plugin adds draggability to any arbitrary page element, by simply specifying a class name or other CSS selector for it in the plugin. (If you use your browser's Inspector instead of View Page Source, you'll see the current state of those elements, with any changes or additions the plugin created…