Description

This recipe adds a fun, interactive "All Seeing Chip" to any Rock page. The chip features eyes that follow your mouse cursor around the screen, creating an engaging and playful element for any page you want.

Caveats

• You'll need to upload your own background image for chip and update the URL in the code.
• The eye positioning is based on a specific image size and layout. If you use a different image, you may need to adjust the eye positioning values.
• For mobile devices, the eyes will not move in the same way since on a phone your movements are not smooth like a mouse and are mostly just poke here poke there.

How-To

1. Upload Your Chip Image:

   • Go to Admin Tools > CMS Configuration > Files
   • Upload your chip background image
   • Make note of the image ID or direct URL for use in the code

2. Add an HTML Block to your desired page:

   • Block Title: All Seeing Chip (or leave blank)

3. Add the Following Code to the HTML Block:

   <style>
     .chip-container {
       position: relative;
       width: 100%;
       height: 400px;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     
     .chip-image {
       position: relative;
       width: 300px;
       height: 300px;
       background-image: url('YOUR_IMAGE_URL_HERE');
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
     }
     
     .eye-container {
       position: absolute;
       top: 65px;
       right: 111px;
       width: 65px;
       height: 55px;
       /* Uncomment to debug eye placement 
       border: 1px solid red;*/
     }
     
     .eye {
       position: absolute;
       width: 35px;
       height: 50px;
       background-color: white;
       border: 3px solid #522600;
       border-radius: 50%;
       transform: rotate(5deg);
     }
     
     .eye-left {
       left: 17px;
     }
     
     .eye-right {
       right: -22px;
     }
     
     .pupil {
       position: absolute;
       width: 20px;
       height: 20px;
       background-color: #522600;
       border-radius: 50%;
       top: 15px;
       left: 8px;
       transition: all 0.1s ease;
     }
   </style>
   <div class="chip-container">
     <div class="chip-image">
       <!-- Eyes that follow cursor -->
       <div class="eye-container">
         <div class="eye eye-left">
           <div class="pupil" id="left-pupil"></div>
         </div>
         <div class="eye eye-right">
           <div class="pupil" id="right-pupil"></div>
         </div>
       </div>
     </div>
   </div>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       const container = document.querySelector('.chip-container');
       const leftPupil = document.getElementById('left-pupil');
       const rightPupil = document.getElementById('right-pupil');
       const leftEye = document.querySelector('.eye-left');
       const rightEye = document.querySelector('.eye-right');
       
       let rect = container.getBoundingClientRect();
       
       function trackMouse(e) {
         const x = e.clientX - rect.left - rect.width/2;
         const y = e.clientY - rect.top - rect.height/2;
         
         // Get eye dimensions for movement constraints
         const leftEyeRect = leftEye.getBoundingClientRect();
         const eyeWidth = leftEyeRect.width;
         const eyeHeight = leftEyeRect.height;
         
         // Max movement should be based on eye size minus pupil size
         const maxMoveX = (eyeWidth - 20) / 2 - 2; // 20 is pupil width, 2 is buffer
         const maxMoveY = (eyeHeight - 20) / 2 - 2; // 20 is pupil height, 2 is buffer
         
         // Calculate distance (max 1)
         const distance = Math.min(1, Math.sqrt(x*x + y*y) / (rect.width/3));
         
         // Calculate angle
         const angle = Math.atan2(y, x);
         
         // Calculate pupil positions with larger range
         const pupilX = Math.cos(angle) * distance * maxMoveX;
         const pupilY = Math.sin(angle) * distance * maxMoveY;
         
         leftPupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
         rightPupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
       }
       
       document.addEventListener('mousemove', trackMouse);
       
       document.addEventListener('mouseleave', function() {
         leftPupil.style.transform = 'translate(0, 0)';
         rightPupil.style.transform = 'translate(0, 0)';
       });
       
       window.addEventListener('resize', function() {
         rect = container.getBoundingClientRect();
       });
     });
   </script>

4. Important: Replace YOUR_IMAGE_URL_HERE with the URL of your uploaded image

   Example: background-image: url('/GetImage.ashx?Id=1234'); (where 1234 is your image ID)

Troubleshooting

• Eyes Not Positioned Correctly: Uncomment the debug line in the CSS to see the eye container position
• Component Looks Wrong on Mobile: This is expected as mouse tracking doesn't work on touchscreens

Don't hesitate to leave a comment below on how this recipe increased overall staff morale.