Mobile versionCode: Select all
const INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS = 2.75;
const MIN_EYELID_PERCENT = 29;
const MAX_EYELID_PERCENT = 70;
const eyelidlineLeft = document.getElementById("eyelid_outline");
const eyelidlineRight = document.getElementById("right_eyelid_outline");
const eyelids = document.getElementById("eyelid");
const pupils = document.getElementById('pupils');
let isBlinking = false;
function updateEyelidsAndOutlines(event) {
if (isBlinking) {
return;
}
if (!eyelids || !eyelidlineLeft || !eyelidlineRight) {
console.error("One or more eyelid elements not found. Cannot update.");
return;
}
const windowHeight = window.innerHeight;
const mousePercentFromTop = (event.clientY / windowHeight) * 100;
const clampedEyelidPercent = Math.min(Math.max(mousePercentFromTop, MIN_EYELID_PERCENT), MAX_EYELID_PERCENT);
eyelids.style.clipPath = `inset(0 0 ${100 - clampedEyelidPercent}% 0)`;
const eyelidsRect = eyelids.getBoundingClientRect();
const eyelidsHeightPx = eyelidsRect.height;
const eyelidsTopPx = eyelidsRect.top;
const eyelidsBottomPx = eyelidsRect.bottom;
// console.log("eyelids top is at " + eyelidsTopPx);
// The `clampedEyelidPercent` represents the visible height of the eyelid fill as a percentage
// from the top of the `eyelids` element.
// So, the Y position of the bottom edge of the clip-path (the "wipe line")
// is `eyelidsTopPx` + (`visible_height_percentage` * `eyelidsHeightPx`).
const targetWipeLineAbsoluteY = eyelidsTopPx + (eyelidsHeightPx * (clampedEyelidPercent / 100));
// --- Position the eyelid lines to match the wipe line ---
// Get the containers for the eyelid lines. They are direct parents of the the elements.
const eyelidLineLeftSvg = eyelidlineLeft.closest('svg');
const eyelidLineRightSvg = eyelidlineRight.closest('svg');
if (!eyelidLineLeftSvg || !eyelidLineRightSvg) {
console.error("SVG containers for eyelid lines not found. Cannot position lines.");
return;
}
// those get dimensions for the eyelid lines.
const eyelidLineLeftSvgRect = eyelidLineLeftSvg.getBoundingClientRect();
const eyelidLineRightSvgRect = eyelidLineRightSvg.getBoundingClientRect();
// Calculate the *default* absolute Y position of the line within its own SVG
// (i.e., where it would be if no extra `translateY` was applied to `eyelid_outline` or `right_eyelid_outline`).
// The `INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS` is its Y position relative to its own SVG's top-left.
const defaultAbsYOfLeftLine = eyelidLineLeftSvgRect.top + INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS;
const defaultAbsYOfRightLine = eyelidLineRightSvgRect.top + INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS;
// console.log(defaultAbsYOfLeftLine);
// Calculate the `translateY` needed for each line's element
// This moves the line from its `defaultAbsY` to the `targetWipeLineAbsoluteY`.
const requiredTranslateYLeft = targetWipeLineAbsoluteY - defaultAbsYOfLeftLine + 1;
const requiredTranslateYRight = targetWipeLineAbsoluteY - defaultAbsYOfRightLine;
// Apply the transformation to the eyelid line elements
eyelidlineLeft.style.transform = `translateY(${requiredTranslateYLeft}px)`;
eyelidlineRight.style.transform = `translateY(${requiredTranslateYRight}px)`;
}
// Attach the main update function to the mousemove event
document.addEventListener("mousemove", updateEyelidsAndOutlines);
// --- Blinking Animation (now uses the same positioning logic) ---
async function blink() { // Make this function async
if (isBlinking) { // Prevent multiple blinks from overlapping
return;
}
isBlinking = true; // Set flag to true at the start of blink
if (!eyelids || !eyelidlineLeft || !eyelidlineRight) {
isBlinking = false; // Reset flag if elements are missing
return;
}
// Capture the current mouse-controlled state to ensure a smooth blink animation
const currentEyelidsClipPath = eyelids.style.clipPath;
const currentLeftLineTransform = eyelidlineLeft.style.transform;
const currentRightLineTransform = eyelidlineRight.style.transform;
// Get the bounding box of the element (the fill).
const eyelidsRect = eyelids.getBoundingClientRect();
const eyelidsHeightPx = eyelidsRect.height;
const eyelidsTopPx = eyelidsRect.top;
// The target for a "fully closed" blink is when the eyelid covers 100% of the eye.
// This means the clip-path should go to `inset(0 0 0% 0)`.
const targetClosedClipPath = `inset(0 0 0% 0)`; // 0% inset means fully visible
// Calculate the target ABSOLUTE Y position for the eyelid lines when the eye is fully closed.
// This should precisely match the bottom edge of the 'eyelids' fill element.
const targetWipeLineAbsoluteYClosed = eyelidsTopPx + eyelidsHeightPx;
const eyelidLineLeftSvg = eyelidlineLeft.closest('svg');
const eyelidLineRightSvg = eyelidlineRight.closest('svg');
// Get updated bounding client rects for the SVG containers in case they've shifted
const eyelidLineLeftSvgRect = eyelidLineLeftSvg.getBoundingClientRect();
const eyelidLineRightSvgRect = eyelidLineRightSvg.getBoundingClientRect();
const defaultAbsYOfLeftLine = eyelidLineLeftSvgRect.top + INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS;
const defaultAbsYOfRightLine = eyelidLineRightSvgRect.top + INITIAL_LINE_Y_IN_OUTLINE_SVG_UNITS;
const lineAdjustmentOffset = 3; // Use the small offset you found helpful
const requiredTranslateYLeftClosed = targetWipeLineAbsoluteYClosed - defaultAbsYOfLeftLine + lineAdjustmentOffset;
const requiredTranslateYRightClosed = targetWipeLineAbsoluteYClosed - defaultAbsYOfRightLine + lineAdjustmentOffset;
const blinkDuration = 450; //