Wireface Images · Completely free
Your photos.
A little more alive.
A smile. A raised eyebrow. Eyes that follow you. Give every face in your gallery a personality with one line of JavaScript.
Silent expressions and eye movements.
Free for personal and commercial use. No key. No account.
Move your pointer around the portraits. They're looking back.
The same portraits as our home page. Artwork uses its existing saved landmarks; ordinary photos can be detected automatically. The wireframe is the native SDK face.
02 / A carousel
Life, as you scroll.
Swipe, scroll, or use the arrows. Faces animate when they come into view.
animateImages({ selector: '.face-carousel', mood: 'curious' });03 / Just a class
A face for your team page.
Choose which pictures come alive. These two portraits use local automatic detection. The third has no selected class and stays still.
animateImages({ selector: '.team-face', mood: 'happy' });New matching images are picked up automatically.
One script. Your images.
Drop it in. Watch them wake up.
By default, Wireface finds faces in every image on the page. Copy this before your closing </body> tag.
<script defer src="https://cdn.jsdelivr.net/gh/wireface/wireface-images@d3467fc2556f7c048ce05cbd6d631b3378043fec/dist/wireface-images.js"></script>Served by jsDelivr, pinned to a fixed release of Wireface Images. The script loads its matching animation engine and local face detector automatically. Prefer to host it yourself? Download the JS and examples below.
Or limit it to your gallery:
<script defer src="https://cdn.jsdelivr.net/gh/wireface/wireface-images@d3467fc2556f7c048ce05cbd6d631b3378043fec/dist/wireface-images.js"
data-selector=".portraits" data-mood="happy" data-intensity="0.7"></script>Already using the SDK?
import { animateImages } from '@wireface/sdk/images';
const gallery = animateImages({ selector: '.portraits' });
gallery.setOptions({ mood: 'curious', eyeTracking: true });
// gallery.pause(); gallery.resume(); gallery.destroy();Everything runs in the browser. Cross-origin image hosts need to allow CORS. Clear photographic faces work best; drawings can use prepared landmarks. Motion preferences are respected automatically.