Design engineering
We make interfaces feel inevitable.
This hero is a controlled demonstration. Press the button to expose the structure underneath, then reassemble it.
Plain-English explanation
When you press Unravel hero, the page does not tear itself apart. It takes a temporary snapshot of a few key boxes in this hero area, lifts them into a separate visual layer, separates them in space, and then puts them back.
The point is to show how design works: before a screen looks polished, it is made of structure, hierarchy, spacing, and components. The effect dramatises that idea without breaking the actual page.
Nerdy explanation
This proof-of-concept avoids mutating the live DOM. On trigger,
JavaScript measures selected elements with
getBoundingClientRect(), creates fixed-position clones in
an aria-hidden overlay, and stores their positions and
explosion vectors in CSS custom properties.
The overlay applies perspective, and the clones animate
only transform and opacity. The original
hero receives a ghost state. This keeps the effect scoped, reversible,
and much safer than trying to explode a real production DOM.