Device Mockup 11 - Ken Burns pan across a tall screenshotPro
A wide, paper-style screenshot window slowly pans diagonally down a tall page in a seamless back-and-forth loop, under a centered headline and above three short captions. Use it to show off a long landing page, document or report without asking visitors to scroll it themselves.
About Device Mockup 11
A wide, paper-style screenshot window slowly pans diagonally down a tall page in a seamless back-and-forth loop, under a centered headline and above three short captions. Use it to show off a long landing page, document or report without asking visitors to scroll it themselves.
Device Mockup 11 is a device mockup block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 102 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- mockup
- screenshot
- ken burns
- pan
- loop
- showcase
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add device-mockup-11Dependencies installed automatically: motion.
Uses: button, reveal, use-reduced-motion, utils.
Usage
import DeviceMockup11 from "@/components/blocks/device-mockup-11"
export default function Page() {
return <DeviceMockup11 />
}