Interactive Divi Eye Animation: A Living Plates Tutorial

Design History: The Delsarte System of Expression

On this page is a pair of eyes that watch your cursor as it moves across them. If you're on a phone, drag a finger instead. What's odd about them is their age: they're built from a drawing that's roughly 140 years old. 

The engraving is from Genevieve Stebbins's Delsarte System of Expression, a performance and elocution manual first published in the 1880s. Among its charts is a plate that breaks the human eye down into combinations of upper lid and brow — a kind of grammar of the gaze, each small drawing a different shade of feeling. The book has been in the public domain for a long time, which means anyone is free to use those illustrations. I took the eye from that plate and gave it its gaze back.

How the Cursor-Tracking SVG Animation Works

A flat engraving can't move its own pupils, so the eyes you see here aren't the scanned plate. They're redrawn as SVG — vector line-work styled to echo the original's ink and cross-hatching. Drawing them as vectors does two things: it keeps them crisp at any size, and, more usefully, it lets the pupils actually move.

A small script does the watching. Every time your cursor (or finger) moves, it measures the direction and distance from each eye to the pointer, then slides that eye's pupil toward it — capped so the pupil never slips out from under the lid. The motion is eased rather than instant, which is what makes it read as a glance instead of a twitch. Stop moving, and after a short pause the eyes begin a slow idle drift; every few seconds, they blink.

It also honours the "reduce motion" accessibility setting. For visitors who've asked their device to minimise motion, the self-running drift and blink switch off — but the cursor-follow stays, because that's motion the visitor is choosing to create rather than something looping at them. And the whole thing is wrapped in its own scoped container, so none of its styling leaks out into the rest of the page.

How to Add the Cursor-Following Eye Effect to Your Divi Site

You'll need Divi's Code module, which lets you drop raw HTML, CSS and JavaScript straight into a layout.

1. Edit your page with the Visual Builder and add a Code module where you want the eyes to sit.
2. Paste the entire snippet below into the module's Content → Code box — all of it: the <link>, the <style>, the <div> and the <script>. It all goes in that one box. The CSS does not go in Divi's separate CSS field.
3. Save and exit the builder.
4. View the published page — not the Visual Builder. Divi doesn't run custom JavaScript inside the builder, so the eyes only appear on the live page (or through Preview).

Here's the complete code:

Troubleshooting Custom Animation

If the eyes still don't appear on the live page, a security plugin or your user role may be stripping the <script> out when the page saves. In that case, move just the <script>…</script> portion into Divi → Theme Options → Integration → "Add code to the body of your blog," and leave everything else in the module.

Customizing the Interactive Eye Effect

A handful of values near the bottom of the script are meant to be changed:

• Spacing — the cx numbers in the EYES line set each eye's horizontal centre. Move them apart for a wider gap, together for a narrower one.
• Lashes — N is how many there are, and the L line controls their length.
• Brows — peakY sets how high the brow sits (a smaller number brings it closer to the eye), and the is its thickness.
• Colors — the CSS variables at the top (--paper, --ink, and the rest) recolor the entire plate. Swap in your own palette to match your site.
• Your own artwork — set DRAW_EYEBALL to false, add an <image> of an aligned engraving, and nudge the eye centers so the pupils land in its sockets. Then it's your illustration doing the looking.

This is the first in a series — Living Plates — that brings public-domain illustrations back to life one plate at a time. If there's an old engraving you'd like to see move, that's exactly the kind of thing I'm collecting.