Streaming live at 10am (PST)

Help with Cursor Responsive Div Boxes


#1

Hey everyone! I typically try to figure everything out on my own, but I've been having difficulty with this one and was hoping I could get some advice from you guys.

The effect I'm trying to get is here: https://openai.com/
It's a desktop only effect, and it occurs when hovering your cursor over a div box of one of the topics.
The cursor moves in 3D space and tilts to face the cursor slightly more. On top of that, there's a div box with a light gradient that provides a 'glare' effect.

I've followed along with some tutorials online, as well as frankensteined together some code from another person's project on CodePen.

What I have: https://codepen.io/thejarren/pen/LyrMEE/

A tutorial going through a similar process: https://designmodo.com/apple-tv-effect/
(Though the shine effect is operated differently here, and the cursor is always tracked, even when not over the div)

The site I'm trying to get it up and running for: https://preview.webflow.com/preview/tunic?preview=e2ebbdba4227d2d922f453330e2848f8

And a live link to the site: http://tunic.webflow.io/
--

I'd basically like to get to a point where I have the code on hand, I put it in the custom head code section.

Then name the divs "Box1" and "Box2" give it an id to give them depth.

and then create a "Glare" Div

and have each of them respond accordingly.
--
I'd appreciate any help with this. Thanks a lot.