Device Mockup 38 - Scroll-linked phone screenPro
A sticky phone stays pinned while the page scrolls, and its screen content scrolls in lockstep with the page as numbered steps on the left light up one by one. Use it for long-form product tours where each scroll beat should reveal a different part of a tall app screen.
About Device Mockup 38
A sticky phone stays pinned while the page scrolls, and its screen content scrolls in lockstep with the page as numbered steps on the left light up one by one. Use it for long-form product tours where each scroll beat should reveal a different part of a tall app screen.
Device Mockup 38 is a pro device mockup block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 96 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
- phone
- scroll
- sticky
- scroll-linked
- steps
- tour
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/device-mockup-38Dependencies installed automatically: motion.
Uses: device-frame, reveal, utils.
Usage
import DeviceMockup38 from "@/components/blocks/device-mockup-38"
export default function Page() {
return <DeviceMockup38 />
}