New component: Tile Puzzle Reveal.
It turns an image into a responsive sliding puzzle that reveals a message, coupon code, or link once solved.
This kind of interaction is typically tacky, so I kept it quiet. By default, it sits as a normal image with a small "Scramble" pill in the corner. Click it, and the image becomes a puzzle. Solve it, and the reveal appears. You can also set it to start as a puzzle from the beginning.
The preview page includes test controls, which can be switched off for live use. The component itself is responsive and configurable: image fit, tile density, reveal content, motion, and styling, and more.
Submitted to the Marketplace, but not yet showing in the public feed. Direct links below.
Preview:
https://puzzlereveal.framer.website/
Component:
https://framer.com/m/TilePuzzleReveal-09vKQj.js@vcFFqvg0kACfL5e4islv
Free to copy.
New component: Tile Puzzle Reveal.
It turns an image into a responsive sliding puzzle that reveals a message, coupon code, or link once solved.
This kind of interaction is typically tacky, so I kept it quiet. By default, it sits as a normal image with a small "Scramble" pill in the corner. Click it, and the image becomes a puzzle. Solve it, and the reveal appears. You can also set it to start as a puzzle from the beginning.
The preview page includes test controls, which can be switched off for live use. The component itself is responsive and configurable: image fit, tile density, reveal content, motion, and styling, and more.
Submitted to the Marketplace, but not yet showing in the public feed. Direct links below.
Preview:
https://puzzlereveal.framer.website/
Component:
https://framer.com/m/TilePuzzleReveal-09vKQj.js@vcFFqvg0kACfL5e4islv
Free to copy.
