I'd need to look into the code as I couldn't find a live demo to quickly noodle with, but my first thought was to add a border radius or some sort of blur filter to make it more spotlight-like? :)
About adding a border-radius, I'll love that feature, in fact I was thinking about implement it, but isn't as easy as it seems.
TLDR: Right now they are 4 divs for making the focus enable:
1- Fills the left part of the page. 2- Fills the top part of the page to the top part of the element. 3- Fills the bottom part of the element to the bottom part of the page. 4- Fills the right part of the page.
These divs are absolute positioned inside a wrapper that have disabled the pointer events to enable the interaction with the focused element.
So for that reason I can't simply add a border-radius for the active element.
This images can help me to explain you how it works http://cl.ly/image/3g2K2N1j1S3S http://cl.ly/image/031j3p283235
Once again we find on HN a UI project with no link to a live demo on the project page.
#overlay-layer .column:nth-child(2):after,
#overlay-layer .column:nth-child(2):before,
#overlay-layer .column:nth-child(3):after,
#overlay-layer .column:nth-child(3):before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
}
#overlay-layer .column:nth-child(2):after {
right: 0;
bottom: -10px;
box-shadow: 5px -5px 1px rgba(0,0,0,0.8);
}
#overlay-layer .column:nth-child(2):before {
left: 0;
bottom: -10px;
box-shadow: -5px -5px 1px rgba(0,0,0,0.8);
}
#overlay-layer .column:nth-child(3):after {
right: 0;
top: -10px;
box-shadow: 5px 5px 1px rgba(0,0,0,0.8);
}
#overlay-layer .column:nth-child(3):before {
left: 0;
top: -10px;
box-shadow: -5px 5px 1px rgba(0,0,0,0.8);
}