ProximityEffect demos
Each demo animates a set of elements by their distance from the pointer. Touch and pen work too, while touching the screen. If you've asked your system for reduced motion, the elements stay at rest. Every demo has a button to pause it.
The source of each page is short and commented, and shows the parameters and styles it uses. See the README for the full documentation.
- Bubbles
- Bubbles light up and grow near the pointer, with a ragged hard edge and a trail.
- Depth
- Tiles lift towards you and go out of focus, using 3D transforms and filters together.
- Vanishing point
- Tiles at the top of a long column, with
perspectiveOriginputting the column's vanishing point at their centre instead of far down the page. - Flip
- A photo cut into tiles that turn over in a diagonal band, using horizontal distance and per-element offsets.
- Reveal
- Hidden bubbles appear in a small pool around the pointer.
- Lens
- The letters of a poem grow and come into focus as the pointer passes, and stay readable at rest.
- Scatter
- The letters or words of a poem are scattered in 3D and gather near the pointer, with a
redrawlistener adding blur. - Pulse
- 900 squares distort around the pointer, with a threshold that changes every frame.
- Playground
- Controls for the main properties, to see what each one does.
- Accessibility
- A pause control, keyboard focus as the target, a reduced-motion setting, and text that stays readable.