Pointer study / 01
A card that carries the stillness.
Roman emperor from 161 to 180 AD and the last of the Five Good Emperors. His private notes, published as Meditations, set out a practical Stoicism: focus on what you control, accept what you cannot, and meet each day with calm.
- 26 Apr 121 ADDate of birth
- 17 Mar 180 ADDate of death
- RomanNationality
Marcus Aurelius
Marble bust of Marcus Aurelius · Metropolitan Museum of Art
About this effect
the tilt is a css 3d transform. the pointer’s position inside the card becomes rotateX(-9° × y) and rotateY(13° × x), with a 200ms cubic-bezier(.22, 1, .36, 1) settle. The card sits inside perspective: 1500px and lifts 46px on hover.
the foil is a screen-blend gradient with a fixed 102° angle and background-size: 260% 100%. its horizontal position follows the pointer across the card, so the highlight tracks the cursor. a second color-dodge layer adds the faint rainbow (my fave), and an inset rim brightens at the edges. the idle float lives on a parent element, so its 7000ms keyframe never fights the pointer transform.
the card face is a cc0 marble portrait of Marcus Aurelius (boss) from the Metropolitan Museum of Art, sitting inside the css metal frame. the tilt, band and rim are preserved as csslayers over the photograph. motion off removes the float, the tilt, the foil and the rim. with reduced motion the float is disabled as well, while the card still responds to direct pointer input. wild.
Portrait: marble bust of Marcus Aurelius, Metropolitan Museum of Art. Public domain (CC0).
← Back to index