Halftone lens
A halftone print of a picture whose dots swell into the real photo under the pointer.
- enhancer
- hover
- pointer
- image
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Halftone lens example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<figure class="m-halftone-lens" data-motion="halftone-lens"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="An evening sky over layered hills"></figure>import { HalftoneLens } from "./motion/react/HalftoneLens";
<HalftoneLens>Your content</HalftoneLens><script setup lang="ts">
import HalftoneLens from "./motion/vue/HalftoneLens.vue";
</script>
<template>
<HalftoneLens>Your content</HalftoneLens>
</template>const el = document.querySelector("#title");
el.dataset.motion = "halftone-lens";The wrappers: HalftoneLens.tsx (React, TypeScript) and HalftoneLens.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-cell | 7 | the dot grid in pixels |
data-motion-radius | 130 | the lens radius in pixels |
data-motion-color | true | dots in the picture's colors; false for one ink |
Accessibility
The picture keeps its place and its alternative text; the print is a canvas laid over it, so nothing moves on the page and screen readers hear the picture as before. Keyboard focus inside opens the lens in the middle; a tap opens it for a moment. Reduced motion: the lens opens and closes at once.
Size
halftone-lens.js is 2.1 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.